CSS: card

.instui-card · stable — Yon kontenè sifas ki aksepte nenpòt kontni.

base se sifas elve pa defo a. Sèvi ak nested pou yon kat ki gen bor anndan yon kat baz. Padding ak radyis kwen yo echèl selon pwòp lajè Card la; makaj eritaj san yon .content anvlòp sèvi ak pwen chanjman (viewport breakpoints).

Source: card.css

Aksè

Sèvi ak <article> kòm eleman kat la lè kat la se yon inite kontni endepandan; sèvi ak <section> lè li gwoupe andedan yon landmark pi gwo. Nan -variant-container, prefere eleman <section> kòm timoun dirèk pou chak rejyon gen yon siyifikasyon semantik.

Itilizasyon

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

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

Egzanp

Kat kontenè

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Premye seksyon</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Dezyèm seksyon</div>
    </section>
  </div>
</article>

Modifikatè

Modifikatè	Deskripsyon
.-variant-base	Kat kontni estanda; timoun yo pa gen estil. Dèfò lè pa gen okenn variant ki mete.
.-variant-container	Depreke — use .-variant-nested.
.-variant-content	Depreke — use .-variant-base.
.-variant-nested	Sifas ki gen sèlman bor pou yon kat anndan yon kat baz.

Kondisyon

Tip	Rechèch	Deskripsyon
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Tokens konsome

Token	Tip	Valè
--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>#	—