CSS: card ​

.instui-card · stable — یک کانتینر سطحی که محتوای دلخواه را می‌پذیرد.

base سطح پیش‌فرض ارتقا یافته است. از nested برای یک کارت دارای حاشیه درون یک کارت پایه استفاده کنید. فاصله‌های داخلی (padding) و شعاع‌های گوشه متناسب با عرض خود Card تغییر می‌کنند؛ نشانه‌گذاری قدیمی بدون یک .content wrapper از نقاط شکست نمای دید (viewport breakpoints) استفاده می‌کند.

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