CSS: card ​

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

Variant は直接の子要素のスタイルを制御します: content（デフォルト）は子要素を無スタイルのままにします。container は子要素を境界線とパディングのあるセクションとして積み重ねます。パディングはビューポート幅に応じてスケールし、両バリアントで同じです。 Size は完全にレスポンシブです — パディングとボーダー半径は標準の min-width メディアクエリにより 320px（20rem）および 640px（40rem）で自動的に増加します；サイズクラスは不要です。 見出し、ボタン、その他のインラインコンポーネントには @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 の新規利用可能機能です；古いブラウザではスコープされていないフラットなスタイルシートにフォールバックしますが、表示上のスタイルは失われません。

関連項目 ​

  • heading — カード内、またはコンテナセクション内に直接配置してください。
  • button — カード内、またはコンテナセクション内に直接配置してください。
  • img — メディア領域としてカード内に直接配置してください。
  • badge — ステータス表示としてカード内に直接配置してください。

参照先 ​