Componentes · Ola 1 · Contenido

Card

Superficie que agrupa contenido relacionado, con cabecera, cuerpo y pie. La cabecera, el cuerpo y el pie son snippets y se separan con una línea sutil. Con href la tarjeta entera es un link, y con onclick, un botón.

import { Card } from '@archeblack/ui';

Ejemplos

Cabecera, cuerpo y pie

El título y un Badge en la cabecera, el contenido en el cuerpo y las acciones en el pie.

184.302 de 250.000 solicitudes.

Se reinicia el 1 de octubre.

Svelte

<script lang="ts">
	import { Badge, Button, Card } from '@archeblack/ui';
</script>

<Card style="width: 100%; max-width: 30rem">
	{#snippet header()}
		<h4>Uso del mes</h4>
		<Badge variant="brand">Plan Estudio</Badge>
	{/snippet}
	<p>184.302 de 250.000 solicitudes.</p>
	<p style="color: var(--arche-color-text-muted)">Se reinicia el 1 de octubre.</p>
	{#snippet footer()}
		<Button variant="ghost">Ver detalle</Button>
		<Button variant="secondary">Ampliar plan</Button>
	{/snippet}
</Card>

Como link

Con href toda la tarjeta es un <a>: el hover sube a la capa más clara y el foco la rodea.

184.302 solicitudes este mes.

92.418 solicitudes este mes.

Svelte

<script lang="ts">
	import { Badge, Card } from '@archeblack/ui';
</script>

<!-- Toda la tarjeta es el link: adentro solo texto, sin botones ni otros links. -->
<div
	style="display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--arche-spacing-4); width: 100%"
>
	<Card href="#portal">
		{#snippet header()}
			<h4>Portal de clientes</h4>
			<Badge variant="success" size="sm" dot>Activo</Badge>
		{/snippet}
		<p>184.302 solicitudes este mes.</p>
	</Card>
	<Card href="#payments">
		{#snippet header()}
			<h4>API de pagos</h4>
			<Badge variant="warning" size="sm" dot>Degradado</Badge>
		{/snippet}
		<p>92.418 solicitudes este mes.</p>
	</Card>
</div>

Como botón

Con onclick es un <button> que ejecuta una acción, como crear un proyecto. Su contenido es en línea: <strong> y <span>.

Svelte

<script lang="ts">
	import { Card } from '@archeblack/ui';

	let created = $state(0);
</script>

<!--
	Una sola tarjeta que ejecuta una acción. Como botón, el contenido es en línea: <strong> y <span>
	en lugar de títulos y párrafos. Para elegir entre varias opciones va un grupo de radios, y para
	navegar, href.
-->
<div style="display: grid; justify-items: start; gap: var(--arche-spacing-3); width: 100%">
	<Card onclick={() => created++} style="max-width: 22rem">
		{#snippet header()}<strong>Nuevo proyecto vacío</strong>{/snippet}
		<span>Crea un proyecto desde cero, con la configuración base.</span>
	</Card>
	<p role="status" style="margin: 0; color: var(--arche-color-text-muted)">
		{created === 1 ? 'Creaste 1 proyecto.' : created > 1 ? `Creaste ${created} proyectos.` : ''}
	</p>
</div>

Props

Props de Card
Prop	Descripción
`header?` `Snippet`	Cabecera: el título a la izquierda y, a la derecha, un badge o una acción. Un título (`<h2>`–`<h6>`) toma la letra de la cabecera: 15 px en semibold.
`children?` `Snippet`	El cuerpo. Sus bloques se separan con 14 px.
`footer?` `Snippet`	Pie: acciones alineadas a la derecha.
`href?` `string`	Con `href` la tarjeta entera es un `<a>`. Acepta los atributos del link (`target`, `rel`…).
`onclick?` `MouseEventHandler \| null \| undefined`	Sin `href` y con una función en `onclick`, la tarjeta entera es un `<button type="button">` y acepta `disabled`. Puede venir condicional (`onclick={editable ? edit : undefined}`): la forma se decide al renderizar y, sin función, la tarjeta es estática.
`class?` `ClassValue`	Clases del producto; se suman a `arche-card`.
`...rest` `HTMLAttributes`	Cualquier otro atributo va a la raíz: el `<div>`, el `<a>` o el `<button>`.

Accesibilidad

Estática es un <div>: el título de la cabecera es el que la nombra. Si la tarjeta es una región importante, dale role="region" y aria-labelledby con el id del título.
Como link o botón, todo su texto forma el nombre accesible. Mantén el contenido corto; si es largo, aria-labelledby con el id del título deja solo el título como nombre.
Una tarjeta interactiva no puede tener otros controles adentro (links, botones, casillas): un control dentro de otro no se puede alcanzar con el teclado ni con un lector de pantalla.
Un botón solo admite contenido en línea: sin títulos ni párrafos. Si la tarjeta necesita un título que figure en la lista de títulos de la página, usa un link.
El foco es el anillo de Arche alrededor de toda la tarjeta. El hover sube a la capa más clara con el borde y el brillo tenue; en colores forzados, el borde toma el color del sistema.

Qué evitar

Botones o links dentro de una tarjeta con href u onclick. Una tarjeta estática con las acciones en el pie, o el título como único link de la tarjeta.
Una tarjeta con onclick que navega a otra página. href: un link se puede abrir en otra pestaña y el lector lo anuncia como link.
Tarjetas dentro de tarjetas para agrupar. Una sola superficie y separadores, o títulos dentro del cuerpo.
Tarjetas como botones para elegir una opción entre varias (un plan, un tamaño). Un grupo de radios: comunica cuál está elegida y se recorre con las flechas.
Sombras propias o fondos de colores para destacar una tarjeta. Un Badge en la cabecera. En el vacío la separación la dan la capa, el borde y el brillo.