CSS: card

.instui-card — Cynhwysydd arwyneb sy'n derbyn cynnwys aribtrawr.

Amrywiad yn rheoli sut mae plant uniongyrchol yn cael eu steilio: content (diofyn) yn eu gadael heb eu steilio; container yn eu trefnu fel adrannau gyda ffin a phadio. Mae'r padio yn addasu gyda lled y ffenestr ac yn yr un modd ar gyfer y ddau amrywiad. Maint yn gwbl ymatebol — mae padio a radiws y ffin yn cynyddu'n awtomatig ar 320px (20rem) a 640px (40rem) trwy ymholiadau cyfryngau safonol min-width; nid oes angen dosbarth maint. Cydweddu gyda @pantoken/components ar gyfer pennawd, botwm, a chyfrannau mewnlin eraill.

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

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

Enghreifftiau

Cerdyn cynnwys

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

Cerdyn cynhwysydd

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

Strwythur

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

Modyfiwyr

Modyfiwr	Disgrifiad
.-variant-container	Cerdyn cynhwysydd; mae'r plant uniongyrchol yn troi'n adrannau â ffin a phadio.
.-variant-content	Cerdyn cynnwys safonol; mae'r plant heb eu steilio. Diofyn pan nad oes amrywiad wedi'i osod.

Amodau

Math	Ymchwiliad	Disgrifiad
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>#	—

Cefnogaeth porwr

• @scope is Baseline 2023 Newly Available; mae'r cerdyn yn cael ei ostwng i daflen arddull fflat heb sgop mewn porwyr hŷn heb golli steilio gweladwy.

Perthnasol

• heading — Rhowch yn uniongyrchol yn y cerdyn neu o fewn adran cynhwysydd.
• button — Rhowch yn uniongyrchol yn y cerdyn neu o fewn adran cynhwysydd.
• img — Rhowch yn uniongyrchol yn y cerdyn fel rhan gyfryngau.
• badge — Rhowch yn uniongyrchol yn y cerdyn fel dangosydd statws.

Gweler hefyd

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