CSS: card ​

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

base es la superficie elevada predeterminada. Use nested para una tarjeta con borde dentro de una tarjeta base. El relleno y los radios de las esquinas escalan con el ancho de la propia Card; el marcado heredado sin un .content envoltorio usa puntos de quiebre del viewport.

Source: card.css

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

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

Ejemplos ​

Tarjeta contenedora

html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">Primera sección</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Segunda sección</div>
    </section>
  </div>
</article>

Modificadores ​

ModificadorDescripción
.-variant-baseTarjeta de contenido estándar; los hijos no tienen estilos. Predeterminado cuando no se establece variante.
.-variant-containerObsoleto — use .-variant-nested.
.-variant-contentObsoleto — use .-variant-base.
.-variant-nestedSuperficie solo con borde para una tarjeta dentro de una tarjeta base.

Condiciones ​

TipoConsultaDescripción
container(width >=20rem)—
container(width >=40rem)—
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>#—