CSS: card

.instui-card · stable — Cynhwysydd arwyneb sy'n derbyn cynnwys ar hap.

base yw'r arwyneb uwch diofyn. Defnyddiwch nested ar gyfer cerdyn wedi'i ffinio o fewn cerdyn sylfaen. Mae padio a radiws y corneli yn addasu'n ôl lled y Cerdyn ei hun; mae marciad hen heb .content lapio yn defnyddio pwyntiau torri'r golwg.

Source: card.css

Hygyrchedd

Defnyddiwch <article> fel elfen cerdyn pan fo'r cerdyn yn uned gynnwys hunangynhwysol; defnyddiwch <section> pan gaiff ei grwpio o fewn nodwedd fwy. Yn -variant-container, dewiswch elfennau <section> fel plant uniongyrchol fel bod pob rhan ffiniedig yn cario ystyr semantig.

Defnydd

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

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

Enghreifftiau

Cerdyn cynhwysydd

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Adran gyntaf</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Ail adran</div>
    </section>
  </div>
</article>

Modyfiwyr

Modyfiwr	Disgrifiad
.-variant-base	Cerdyn cynnwys safonol; mae'r plant heb eu steilio. Diofyn pan nad oes amrywiad wedi'i osod.
.-variant-container	Wedi'i henffurfio — use .-variant-nested.
.-variant-content	Wedi'i henffurfio — use .-variant-base.
.-variant-nested	Arwyneb ffin-yn-unig ar gyfer cerdyn o fewn cerdyn sylfaen.

Amodau

Math	Ymchwiliad	Disgrifiad
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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>#	—