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";

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

Примеры ​

Карточка содержимого

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

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

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

Структура ​

text
.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-cardnone | <shadow>#—

Поддержка браузеров ​

  • @scope является Baseline 2023 Newly Available; в старых браузерах карточка деградирует до несвязанной плоской таблицы стилей без потери видимого оформления.

Связанные ​

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

См. также ​