CSS: card

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

base là bề mặt nâng mặc định. Sử dụng nested cho một thẻ có viền bên trong một thẻ cơ sở. Padding và bán kính góc tỷ lệ theo chiều rộng riêng của Card; markup cũ không có .content wrapper sử dụng điểm ngắt của viewport.

Source: card.css

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/components/components.css";

@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";

Các ví dụ

Thẻ vùng chứa

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Phần đầu tiên</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Phần thứ hai</div>
    </section>
  </div>
</article>

Bộ sửa

Bộ sửa	Mô tả
.-variant-base	Thẻ nội dung chuẩn; các con không được tạo kiểu. Mặc định khi không đặt variant.
.-variant-container	Không khuyến nghị — use .-variant-nested.
.-variant-content	Không khuyến nghị — use .-variant-base.
.-variant-nested	Bề mặt chỉ có viền cho một thẻ bên trong thẻ cơ sở.

Điều kiện

Kiểu	Truy vấn	Mô tả
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Token tiêu thụ

Token	Kiểu	Giá 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-card	none | <shadow>#	—