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 — ضعها مباشرة في البطاقة كمؤشر حالة.

انظر أيضا ​