CSS: card ​

.instui-card · stable — 可容納任意內容的表面容器。

base 是預設的浮起表面。使用 nested 在基底卡片內作為有邊框的卡片。內邊距和圓角會隨 Card 本身的寬度縮放；沒有 .content 包裹的舊有標記會使用視窗斷點。

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">第二節</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>#—