CSS: card ​

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

Variant نحوهٔ سبک‌دهی به فرزندان مستقیم را کنترل می‌کند: content (پیش‌فرض) آن‌ها را بدون سبک نگه می‌دارد؛ container آن‌ها را به عنوان بخش‌هایی با حاشیه و پدینگِ پشته‌ای درمی‌آورد. پدینگ با عرض نما مقیاس می‌یابد و در هر دو واریانت یکسان است. Size کاملاً پاسخگو است — پدینگ و شعاع حاشیه در نقاط 320px (20rem) و 640px (40rem) به‌طور خودکار افزایش می‌یابند از طریق رسانه‌پرس‌کوئری‌های استاندارد 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کارت ظرفی؛ فرزندان مستقیم به بخش‌هایی با حاشیه و پدینگ تبدیل می‌شوند.
.-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 — مستقیماً داخل کارت به‌عنوان نشانگر وضعیت قرار دهید.

همچنین ببینید ​