CSS: card ​

.instui-card — מיכל משטח המקבל תוכן כלשהו.

Variant שולט באופן עיצוב הילדים הישירים: content (ברירת מחדל) משאיר אותם ללא עיצוב; container מסדר אותם כסעיפים ממוסגרים ומרופדים. הריפוד משתנה בהתאם לרוחב החלון והינו זהה בשני הווריאנטים. Size רספונסיבי לחלוטין — ריפוד וגבול-רדיוס מתגדלים אוטומטית ב-320px (20rem) ו-640px (40rem) בעזרת שאילתות מדיה סטנדרטיות min-width; אין צורך במחלקת גודל. לשילוב כותרות, כפתורים ורכיבים inline אחרים השתמשו ב-@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 — מקם ישירות בתוך הכרטיס כאינדיקטור מצב.

ראה גם ​