CSS: card ​

.instui-card — Մակերեսային կոնտեյներ, որը ընդունում է ցանկացած բովանդակություն.

Variant հսկում է, թե ինչպես են ուղղակի երեխաները ստանում ոճ­­ը՝ content (ստանդարտ) թողնում է նրանց առանց ոճավորման; container շարասյունում տեղավորում է նրանց՝ որպես շրջանակապատ և լցված բաժիններ։ Լցումը կախված է դիտման պատուհանի լայնությունից և նույնն է երկու տարբերակներում։ Size ամբողջովին արձագանքող է — լցումը և եզրի ռադիուսը ավտոմատաբար մեծանում են 320px (20rem) և 640px (40rem) նրբադիր առկա min-width մեդիա-հարցումների միջոցով; размерի առանձին դասիկա անհրաժեշտ չէ։ Συνδυրեք @pantoken/components-ի հետ վերնագրերի, կոճակների և այլ inline կոմպոնենտների համար.

Մուտքականություն ​

Օգտագործեք <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 Newly Available; քարտը՝ հին զննարկիչներում, վերածվում է առանց-սկոպ հարթ ոճաթղթի՝ տեսանելի ոճի կորուստ չունենալով.

Ավելին կապված ​

  • heading — տեղադրել ուղղակի քարտի ներսում կամ կոնտեյներ բաժնի մեջ։
  • button — տեղադրել ուղղակի քարտի ներսում կամ կոնտեյներ բաժնի մեջ։
  • img — տեղադրել ուղղակի քարտում որպես մեդիա-տարածք։
  • badge — տեղադրել ուղղակի քարտում որպես կարգավիճակի ցուցիչ.

Տես նաև ​