CSS: card

.instui-card · stable — He ipu mata e whakaae ana ki ngā ihirangi ahurei.

base koinei te mata whakanui taunoa. Whakamahia nested mō tētahi kāri kei te paerō i roto i tētahi kāri tūāpapa. Ka urutau te āwhi (padding) me te rōrahi porowhita o ngā kokonga ki te whānuitanga o te Kāri; ko te tohu-tukutuku tawhito me te kore .content hei whakakapi ka whakamahi i ngā wehenga rahi tirohanga (viewport breakpoints).

Source: card.css

Wātea mō te katoa

Whakamahia <article> hei waahanga kāri mēnā ko te kāri he wāhanga ihirangi motuhake; whakamahia <section> mēnā ka rōpūhia i roto i tētahi tohu nui ake. I roto i -variant-container, me pai ake te whakamahi i ngā waahanga <section> hei tamariki tūhono kia ia rohe ā-āraitanga ka mau i tētahi tikanga pūāhua.

Ngā Whakamahi

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

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

Ngā tauira

Kāri ipu

<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Wāhanga tuatahi</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Wāhanga tuarua</div>
    </section>
  </div>
</article>

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-variant-base	Kāri ihirangi paerewa; kāore i whakapaehia ngā tamariki. Koinei te taunoa mēnā kāore he variant kua tautuhia.
.-variant-container	Kua tukuna — use .-variant-nested.
.-variant-content	Kua tukuna — use .-variant-base.
.-variant-nested	He mata paerō anake mō tētahi kāri i roto i te kāri tūāpapa.

Ngā Conditions

Momo	Pātai	Whakamārama
container	(width >=20rem)	—
container	(width >=40rem)	—
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Ngā tohu i whakamahia

Token	Momo	Uara
--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>#	—