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 新釋出；在舊版瀏覽器中，卡片會降級為無作用域的扁平樣式表，但不會失去可見的樣式。

相關 ​

  • heading — 直接放在卡片內或置於容器區段內。
  • button — 直接放在卡片內或置於容器區段內。
  • img — 直接放在卡片內作為媒體區域。
  • badge — 直接放在卡片內作為狀態指示。

另見 ​