Esto es una tarjeta sin encabezado ni pie.
Contenedores
Agrupa contenido relacionado en una superficie propia, con borde y radio.
<vadavo-card> envuelve el contenido. El encabezado va en el atributo heading, con el hueco actions a su derecha; el pie, opcional, en el hueco footer. La cabecera y el pie aparecen solo cuando hay algo que poner en ellos.
Esto es una tarjeta sin encabezado ni pie.
<vadavo-card>
<p>Esto es una tarjeta sin encabezado ni pie.</p>
</vadavo-card>Esto es una tarjeta con encabezado.
<vadavo-card heading="Encabezado">
<p>Esto es una tarjeta con encabezado.</p>
</vadavo-card>El hueco actions ocupa el extremo derecho de la cabecera.
Plan de 25 GB con copias de seguridad diarias.
<vadavo-card heading="Hosting WordPress">
<span slot="actions" class="badge success">Activo</span>
<p>Plan de 25 GB con copias de seguridad diarias.</p>
</vadavo-card>El pie recoge los botones de acción de la tarjeta, centrados por defecto.
Pulsa sobre el botón para hacer efectiva la modificación de los DNS.
<vadavo-card heading="Modificar DNS">
<p>Pulsa sobre el botón para hacer efectiva la modificación de los DNS.</p>
<div slot="footer">
<button class="button primary">Modificar DNS</button>
</div>
</vadavo-card>La clase ribbon sobre un hijo directo de la tarjeta lo pone centrado y a caballo del borde superior, fuera del flujo del contenido.
Velocidad y capacidad enterprise.
<vadavo-card raised heading="Business WP">
<span class="badge offer callout ribbon">Mejor relación calidad-precio</span>
<p>Velocidad y capacidad enterprise.</p>
</vadavo-card>Radio de 20px y borde sólido. Sin ninguna clase añadida, la tarjeta usa la superficie por defecto; con la clase de una superficie de marca, pasa a ser esa superficie. El nombre de la clase es su criterio de uso, no su color.
Superficie elevada para contenido sobre el fondo de página.
Para destacar una tarjeta dentro de un grupo.
Para destacar una tarjeta dentro de un grupo.
Para la tarjeta que debe mirarse primero, y para las secciones que cierran una página.
<div style="display: grid; gap: 1.5rem">
<vadavo-card heading="Por defecto">
<p>Superficie elevada para contenido sobre el fondo de página.</p>
</vadavo-card>
<vadavo-card class="standout" heading="Standout">
<p>Para destacar una tarjeta dentro de un grupo.</p>
</vadavo-card>
<vadavo-card class="callout" heading="Callout">
<p>Para destacar una tarjeta dentro de un grupo.</p>
</vadavo-card>
<vadavo-card class="spotlight" heading="Spotlight">
<p>Para la tarjeta que debe mirarse primero, y para las secciones que cierran una página.</p>
</vadavo-card>
</div>| Token | Qué es |
|---|---|
--card--color--shadow | El color de la sombra desplazada de una tarjeta raised. |