CSS: card ​

.instui-card — Un contenedor de superficie que acepta contenido arbitrario.

Variant controla cómo se estilizan los hijos directos: content (predeterminado) los deja sin estilos; container los apila como secciones con borde y relleno. El relleno escala con el ancho de la ventana y es el mismo en ambas variantes. Size es completamente receptivo: el relleno y el radio de borde aumentan automáticamente a 320px (20rem) y 640px (40rem) mediante las consultas de medios estándar min-width; no se necesita una clase de tamaño. Combínalo con @pantoken/components para encabezados, botones y otros componentes en línea.

Accesibilidad ​

Usa <article> como el elemento card cuando la tarjeta es una unidad de contenido autocontenida; usa <section> cuando esté agrupada dentro de un punto de referencia mayor. En -variant-container, prefiere elementos <section> como hijos directos para que cada región con borde tenga significado semántico.

Uso ​

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

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

Ejemplos ​

Tarjeta de contenido

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

Tarjeta contenedora

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

Estructura ​

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;

Modificadores ​

ModificadorDescripción
.-variant-containerTarjeta contenedora; los hijos directos se convierten en secciones con borde y relleno.
.-variant-contentTarjeta de contenido estándar; los hijos no tienen estilos. Predeterminado cuando no se establece variante.

Condiciones ​

TipoConsultaDescripción
media(min-width: 20rem)—
media(min-width: 40rem)—

Tokens consumidos ​

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

Compatibilidad con navegadores ​

  • @scope es Baseline 2023 Newly Available; la tarjeta se degrada a una hoja de estilos plana sin ámbito en navegadores antiguos sin pérdida del estilo visible.

Relacionado ​

  • heading — Colócalo directamente en la tarjeta o dentro de una sección contenedora.
  • button — Colócalo directamente en la tarjeta o dentro de una sección contenedora.
  • img — Colócalo directamente en la tarjeta como una región de medios.
  • badge — Colócalo directamente en la tarjeta como un indicador de estado.

Véase también ​