CSS: card

.instui-card — контейнер поверхні, який приймає довільний вміст.

Variant керує тим, як оформлюються безпосередні дочірні елементи: content (за замовчуванням) залишає їх без стилів; container розміщує їх як області з рамками й відступами. Відступи масштабуются відповідно до ширини вікна перегляду і однакові в обох варіантах. Size повністю адаптивний — відступи й радіус заокруглення крокують автоматично при 320px (20rem) і 640px (40rem) за допомогою стандартних медіа-запитів min-width; клас розміру не потрібен. Паруйте з @pantoken/components для заголовків, кнопок та інших вбудованих компонентів.

Доступність

Використовуйте <article> як елемент картки, коли картка є самодостатньою одиницею вмісту; використовуйте <section> коли вона групується в межах більшого орієнтира. У -variant-container надавайте перевагу елементам <section> як безпосереднім дочірнім елементам, щоб кожна область з рамкою мала семантичне значення.

Використання

@import "@pantoken/plugin-custom-components/custom-components.css";

@import "@pantoken/plugin-custom-components/custom-components.css";

Приклади

Картка вмісту

<article class="instui-card">
  <h2 class="instui-heading -h3">Card title</h2>
  <p>Content here.</p>
  <button class="instui-button">Action</button>
</article>

Контейнерна картка

<article class="instui-card -variant-container">
  <section>First section</section>
  <section>Second section</section>
</article>

Структура

.instui-card
  ‹content›

flowchart TD n0[".instui-card"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Модифікатори

Модифікатор	Опис
.-variant-container	Контейнерна картка; безпосередні дочірні елементи стають областями з рамкою та відступами.
.-variant-content	Стандартна картка вмісту; дочірні елементи не мають стилів. За замовчуванням, коли варіант не встановлено.

Умови

Тип	Запит	Опис
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Використано токенів

Token	Тип	Значення
--instui-component-card-background-color	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-card-border-radius-base-lg	<length>	1rem
--instui-component-card-border-radius-base-md	<length>	1rem
--instui-component-card-border-radius-base-sm	<length>	0.75rem
--instui-component-card-border-radius-nested-lg	<length>	0.75rem
--instui-component-card-border-radius-nested-md	<length>	0.5rem
--instui-component-card-border-radius-nested-sm	<length>	0.5rem
--instui-component-card-nested-border-color	<color>	LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-card-padding-base-lg	<length>	1.5rem
--instui-component-card-padding-base-md	<length>	1rem
--instui-component-card-padding-base-sm	<length>	0.75rem
--instui-component-card-padding-nested-lg	<length>	1rem
--instui-component-card-padding-nested-md	<length>	0.75rem
--instui-component-card-padding-nested-sm	<length>	0.5rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-lg	<length>	1rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-md	<length>	0.75rem
--instui-component-shared-tokens-spacing-gap-cards-nested-containers-sm	<length>	0.5rem
--instui-component-shared-tokens-stroke-width-sm	<length>	0.0625rem
--instui-elevation-card	none | <shadow>#	—

Підтримка браузерів

• @scope доступний у Baseline 2023; картка деградує до неспеціфікованого плоского стилю в старіших браузерах без втрати видимого оформлення.

Пов'язані

• heading — Розміщуйте безпосередньо в картці або всередині секції-контейнера.
• button — Розміщуйте безпосередньо в картці або всередині секції-контейнера.
• img — Розміщуйте безпосередньо в картці як медіарегіон.
• badge — Розміщуйте безпосередньо в картці як індикатор статусу.

Див. також

• https://drafts.csswg.org/css-cascade-6/#scoping