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>#—