CSS: card ​

.instui-card — ภาชนะผิวหน้าที่รับเนื้อหาใด ๆ ก็ได้.

Variant ควบคุมการจัดสไตล์ของลูกโดยตรง: content (ค่าเริ่มต้น) ปล่อยให้ไม่ถูกจัดสไตล์; container จัดเรียงเป็นส่วนที่มีขอบและช่องว่างภายใน (padding). ช่องว่างภายในปรับขนาดตาม ความกว้างของ viewport และมีค่าเท่ากันในทั้งสองแบบแปรผัน. Size ตอบสนองแบบเต็มที่ — padding และ border-radius จะเพิ่มขึ้นโดยอัตโนมัติที่ 320px (20rem) และ 640px (40rem) ผ่าน media query มาตรฐาน min-width; จึงไม่จำเป็นต้องมีคลาสขนาด. ใช้คู่กับ @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การ์ดคอนเทนเนอร์; ลูกโดยตรงจะกลายเป็นส่วนที่มีขอบและ padding.
.-variant-contentการ์ดเนื้อหามาตรฐาน; ลูกจะไม่ถูกจัดสไตล์. เป็นค่าเริ่มต้นเมื่อไม่ได้ตั้งค่า variant.

เงื่อนไข ​

ชนิดการค้นหาคำอธิบาย
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 — วางโดยตรงในการ์ดในฐานะบริเวณสื่อ (media region).
  • badge — วางโดยตรงในการ์ดในฐานะตัวบ่งชี้สถานะ.

ดูเพิ่มเติม ​