CSS: card ​

.instui-card · stable — คอนเทนเนอร์พื้นผิวที่รับเนื้อหาใดก็ได้.

base เป็นพื้นผิวยกระดับเริ่มต้น ใช้ nested สำหรับการ์ดมีเส้นขอบภายในการ์ดฐาน การเยื้องและรัศมีมุมจะปรับตามความกว้างของ Card เอง; มาร์กอัปแบบเก่าที่ไม่มีตัวห่อ .content จะใช้จุดตัดของ viewport.

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