CSS: card

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

base is é an dromchla ardaithe réamhshocraithe. Úsáid nested chun cárta le teorainn a chur laistigh de chárta bonn. Scálaíonn padding agus réimse na gcuara choirnéil de réir leithead an Card féin; úsáideann marcáil oidhreachta gan .content brisephointí radhairc.

Source: card.css

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/components/components.css";

@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";

Samplaí

Cárta coimeádáin

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">An chéad rannóg</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">An dara rannóg</div>
    </section>
  </div>
</article>

Modhnóirí

Modhnóir	Cur síos
.-variant-base	Cárta ábhair caighdeánach; níl stíl ar na páistí. Réamhshocrú nuair nach bhfuil eagsúlacht socraithe.
.-variant-container	As dáta — use .-variant-nested.
.-variant-content	As dáta — use .-variant-base.
.-variant-nested	Dromchla teorann amháin do chárta laistigh de chárta bonn.

Coinníollacha

Cineál	Ceist	Cur síos
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--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-card	none | <shadow>#	—