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 — 直接放在卡片中，作为状态指示。

另见 ​