CSS: card ​

.instui-card · stable — حاوية سطح تقبل محتوى تعسفي.

base هو السطح المرتفع الافتراضي. استخدم nested لبطاقة ذات حد داخل بطاقة أساسية. تتدرج الحشوة ونصف قطر الزوايا بناءً على عرض البطاقة نفسه؛ الترميز القديم الذي لا يحتوي على غلاف .content يستخدم نقاط توقف نافذة العرض.

Source: card.css

Accessibility ​

استخدم <article> كعنصر البطاقة عندما تكون البطاقة وحدة محتوى مكتفية ذاتيًا; استخدم <section> عند تجميعها داخل معلم أكبر. في -variant-container، فضّل عناصر <section> كأطفال مباشرين حتى يحمل كل قسم محاط بالحافة معنىً دلالياً.

Usage ​

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

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

Examples ​

بطاقة حاوية

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>

Modifiers ​

ModifierDescription
.-variant-baseبطاقة محتوى قياسية؛ الأطفال بدون تنسيق. الافتراضي عندما لا يتم تعيين متغير.
.-variant-containerDeprecated — use .-variant-nested.
.-variant-contentDeprecated — use .-variant-base.
.-variant-nestedسطح بإطار فقط لبطاقة داخل بطاقة أساسية.

Conditions ​

TypeQueryDescription
container(width >=20rem)—
container(width >=40rem)—
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokens consumed ​

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