CSS: card ​

.instui-card — He ipu mata e whakaae ana i ngā ihirangi huhua.

Variant e whakahaere ana i te āhua o ngā tamariki tūhono: content (taunoa) ka waiho kia kore-āhua; container ka tūhono hei wāhanga ā-āraitanga, ā-kapi. Ka pīkau te whakakī ki te whānuitanga o te mata, ā, he ōrite i ngā variant e rua. Ko te Rahi he tino urutau — ka piki aunoa te whakakī me te poro-ā-ārai i te 320px (20rem) me te 640px (40rem) mā ngā pātai pāpāho paerewa min-width; kāore he karaehe-rahi e hiahiatia. Tautokohia ki @pantoken/components mō ngā taitara, pātene, me ētahi atu wāhanga ā-raina.

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

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

Ngā tauira ​

Kāri ihirangi

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

Kāri ipu

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

Hanganga ​

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;

Ngā Kaitī ​

KaiwhakatikatikaWhakamārama
.-variant-containerKāri ipu; ka huri ngā tamariki tūhono hei wāhanga ā-āraitanga, ā-kapi.
.-variant-contentKāri ihirangi paerewa; kāore i whakapaehia ngā tamariki. Koinei te taunoa mēnā kāore he variant kua tautuhia.

Ngā Conditions ​

MomoPātaiWhakamārama
media(min-width: 20rem)—
media(min-width: 40rem)—

Ngā tohu i whakamahia ​

TokenMomoUara
--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>#—

Tautoko pūtirotiro ​

  • @scope is Baseline 2023 Newly Available; ka heke te kāri ki tētahi anga kāraka papa kore-ā-rohe i ngā pūtirotiro tawhito, kāore he ngaro o te āhua e kitea ana.

Hono ​

  • heading — Whakanoho tika ki roto i te kāri, ki roto rānei i tētahi wāhanga ipu.
  • button — Whakanoho tika ki roto i te kāri, ki roto rānei i tētahi wāhanga ipu.
  • img — Whakanoho tika ki roto i te kāri hei rohe pāpāho.
  • badge — Whakanoho tika ki roto i te kāri hei tohu tūnga.

Tirohia anō ​