CSS: card ​

.instui-card — Coimeádán dromchla a ghlacann ábhar ar bith.

Eagsúlacht rialálann conas a stílaítear na páistí díreacha: fágann content (réamhshocrú) iad gan stíl; cuireann container iad i sraitheanna mar réigiúin le teorainn agus padáil. Méadaíonn an padáil de réir leithead an radhairc agus tá sé mar an gcéanna sna dhá eagsúlacht. Tá an Méid go hiomlán freagartha — ardaíonn an padáil agus radius na teorann go huathoibríoch ag 320px (20rem) agus 640px (40rem) trí cheangail mheánchaighdeánacha min-width; níl aon rangmhéid riachtanach. Páirigh le @pantoken/components do theideal, cnaipe, agus comhpháirteanna inline eile.

Inrochtaineacht ​

Bain úsáid as <article> mar eilimint chárta nuair is aonad ábhair féinchoinníollach í an cárta; bain úsáid as <section> nuair atá sé ghrúpáilte laistigh de réigiún tábhachtach níos mó. I -variant-container, roghnaigh eilimintí <section> mar pháistí díreacha ionas go mbeidh brí shéimeantach ag gach réigiún le teorainn.

Úsáid ​

@import "@pantoken/plugin-custom-components/custom-components.css";

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Samplaí ​

Cárta ábhair

html
<article class="instui-card">
  <h2 class="instui-heading -h3">Card title</h2>
  <p>Content here.</p>
  <button class="instui-button">Action</button>
</article>

Cárta coimeádáin

html
<article class="instui-card -variant-container">
  <section>First section</section>
  <section>Second section</section>
</article>

Struchtúr ​

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;

Modhnóirí ​

ModhnóirCur síos
.-variant-containerCárta coimeádáin; éireoidh na páistí díreacha mar réigiúin le teorainn agus padáil.
.-variant-contentCárta ábhair caighdeánach; níl stíl ar na páistí. Réamhshocrú nuair nach bhfuil eagsúlacht socraithe.

Coinníollacha ​

CineálCeistCur síos
media(min-width: 20rem)—
media(min-width: 40rem)—

Tóicíní a úsáideadh ​

TokenCineálLuach
--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>#—

Tacaíocht bhrabhsálaí ​

  • Tá @scope ar fáil mar Bhunlíne 2023; ísíonn an cárta go stíleolaí réidh neamh-scóipáilte i mbrausair níos sine gan cailliúint i stíliú infheicthe.

Gaolmhar ​

  • heading — Cuir go díreach sa chárta nó laistigh de rannán coimeádáin.
  • button — Cuir go díreach sa chárta nó laistigh de rannán coimeádáin.
  • img — Cuir go díreach sa chárta mar réigiún mheán.
  • badge — Cuir go díreach sa chárta mar tháscaire stádais.

Féach freisin ​