CSS: card

.instui-card — Yfirborðssvæði sem tekur við hvaða efni sem er.

Variant stýrir hvernig beinir börn eru stílhrein: content (sjálfgefið) skilur þau eftir óstíluð; container raðar þeim upp sem afmörkuðum, púðuðum köflum. Innrýmið mælist miðað við breidd sýnishornsins og er það sama í báðum gerðum. Stærð er algjörlega móttækileg — innrými og hornar aukast sjálfkrafa við 320px (20rem) og 640px (40rem) með venjulegum min-width media-fyrirspurnum; engin stærðarflokka þarf. Paraðu við @pantoken/components fyrir fyrirsögn, hnapp og önnur innlínueiningar.

Aðgengi

Notaðu <article> sem spilaskiptið þegar spilið er sjálfstætt efniseining; notaðu <section> þegar það er hópað innan stærri landamerkis. Í -variant-container, forðastu ekki að hafa <section> þætti sem beina börn svo hver afmörkuð svæði beri merkingu.

Notkun

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

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

Dæmi

Innihaldsspjald

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

Ílátsspjald

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

Uppbygging

.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;

Breytingar

Breyti	Lýsing
.-variant-container	Ílátsspjald; bein börn verða afmörkuð, púðuð svæði.
.-variant-content	Staðlað innihaldsspjald; börn eru óstíluð. Sjálfgefið þegar engin variant er stillt.

Skilyrði

Tegund	Fyrirspurn	Lýsing
media	(min-width: 20rem)	—
media	(min-width: 40rem)	—

Notuð tákn

Token	Tegund	Gildi
--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>#	—

Vafrastuðningur

• @scope er Baseline 2023 nýlega aðgengilegt; spjaldið fellur aftur í óskipt litaða stílblaða í eldri vöfrum án taps á sýnilegri stílun.

Tengdar

• heading — Settu beint í spjaldið eða inni í ílátssvæði.
• button — Settu beint í spjaldið eða inni í ílátssvæði.
• img — Settu beint í spjaldið sem fjölmiðlasvæði.
• badge — Settu beint í spjaldið sem stöðvunarvísir.

Sjá einnig

• https://drafts.csswg.org/css-cascade-6/#scoping