CSS: card ​

.instui-card — Một vùng chứa bề mặt chấp nhận nội dung tùy ý.

Variant điều khiển cách các phần tử con trực tiếp được tạo kiểu: content (mặc định) để chúng không được tạo kiểu; container xếp chồng chúng thành các phần có viền và đệm. Đệm tỉ lệ theo chiều rộng khung nhìn và giống nhau ở cả hai biến thể. Size hoàn toàn đáp ứng — đệm và bán kính viền tự động tăng tại 320px (20rem) và 640px (40rem) thông qua các truy vấn media chuẩn min-width; không cần lớp kích thước. Kết hợp với @pantoken/components cho tiêu đề, nút và các thành phần nội tuyến khác.

Khả năng truy cập ​

Dùng <article> làm phần tử thẻ khi thẻ là một đơn vị nội dung tự chứa; dùng <section> khi nhóm trong một mốc lớn hơn. Trong -variant-container, ưu tiên các phần tử <section> làm con trực tiếp để mỗi vùng có viền mang ý nghĩa ngữ nghĩa.

Sử dụng ​

@import "@pantoken/plugin-custom-components/custom-components.css";

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Các ví dụ ​

Thẻ nội dung

html
<article class="instui-card">
  <h2 class="instui-heading -h3">Card title</h2>
  <p>Content here.</p>
  <button class="instui-button">Action</button>
</article>

Thẻ vùng chứa

html
<article class="instui-card -variant-container">
  <section>First section</section>
  <section>Second section</section>
</article>

Cấu trúc ​

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;

Bộ sửa ​

Bộ sửaMô tả
.-variant-containerThẻ vùng chứa; các con trực tiếp trở thành các phần có viền và đệm.
.-variant-contentThẻ nội dung chuẩn; các con không được tạo kiểu. Mặc định khi không đặt variant.

Điều kiện ​

KiểuTruy vấnMô tả
media(min-width: 20rem)—
media(min-width: 40rem)—

Token tiêu thụ ​

TokenKiểuGiá trị
--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>#—

Hỗ trợ trình duyệt ​

  • @scope là Baseline 2023 Mới Có sẵn; thẻ sẽ xuống cấp thành stylesheet phẳng không phạm vi trên các trình duyệt cũ hơn mà không mất đi kiểu hiển thị.

Liên quan ​

  • heading — Đặt trực tiếp trong thẻ hoặc bên trong một phần vùng chứa.
  • button — Đặt trực tiếp trong thẻ hoặc bên trong một phần vùng chứa.
  • img — Đặt trực tiếp trong thẻ như một vùng phương tiện.
  • badge — Đặt trực tiếp trong thẻ như một chỉ báo trạng thái.

Xem thêm ​