CSS: card ​

.instui-card · stable — 任意のコンテンツを受け入れるサーフェスコンテナ。

base はデフォルトの浮き上がったサーフェスです。Use nested ベースカード内の境界付きカードには nested を使用してください。Padding and corner radii scale with the Card's own width; legacy markup without a .content wrapper uses viewport breakpoints.

Source: card.css

アクセシビリティ ​

カードが自己完結したコンテンツの単位である場合は <article> をカード要素として使用してください；より大きなランドマーク内でグループ化される場合は <section> を使用します。-variant-container 内では、各境界付き領域が意味を持つように直接の子要素として <section> 要素を優先してください。

使用法 ​

@import "@pantoken/components/components.css";

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";

例 ​

コンテナカード

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">最初のセクション</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">2番目のセクション</div>
    </section>
  </div>
</article>

修飾子 ​

修飾子説明
.-variant-base標準のコンテンツカード；子要素は無スタイルです。バリアントが設定されていない場合のデフォルトです。
.-variant-container非推奨 — use .-variant-nested.
.-variant-content非推奨 — use .-variant-base.
.-variant-nestedベースカード内のカード向けの境界のみのサーフェス。

条件 ​

型クエリ説明
container(width >=20rem)—
container(width >=40rem)—
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>#—