Todos los componentes (204)

Tarjeta

Superficies · Card · .amset-card

Qué es y cuándo usarlo

Superficie con cabecera (título, subtítulo y un hueco a la derecha), cuerpo, medios a sangre y un pie separado por un divisor. Puede ser estática, pulsable (onPress) o un enlace (href).

Cuándo usarlo

Para agrupar lo que va junto: un pedido, una factura, un bloque de ajustes, una cifra del cuadro de mando.
onPress cuando la tarjeta entera abre algo en la misma pantalla; href cuando lleva a otra página. En los dos casos el title es obligatorio: es el nombre del botón o del enlace.
tone pinta una franja de color en el borde de inicio: acompaña a un texto que ya lo dice («Vencida hace 12 días»), no lo sustituye.
size: sm en una rejilla de opciones o de cifras, lg para una tarjeta que encabeza. withoutPadding deja el contenido a sangre (una tabla, una lista), con la cabecera y el pie en su sitio.
loading pinta una barra que recorre el borde de arriba y marca el cuerpo como ocupado.
selected marca la elegida en una rejilla de opciones pulsables, y se anuncia: la pulsable es un botón que se queda pulsado.

Cuándo no

El producto de una rejilla de tienda: ProductCard, que ya trae la foto, el precio y las acciones.
Una sola opción de un grupo que se elige con las flechas y viaja en un formulario: RadioGroup, o ShippingPicker si son métodos de envío. La tarjeta seleccionada es un botón pulsado, no un radio.
Pares de etiqueta y valor (los datos de un cliente): DataList.
Controles dentro del cuerpo de una tarjeta pulsable: el enlace estirado los tapa. Lo que se pulsa por separado va en footer o en extra, que quedan por encima.

Teclado: la estática no tiene paradas de Tab. En la pulsable, un solo Tab llega al botón del título; Intro y Espacio lo pulsan. Con href, Intro sigue el enlace. disabled (solo en la pulsable) deja el botón deshabilitado y no dispara onPress. Lo que vaya en footer y en extra tiene su propia parada.

Accesibilidad: el título es un encabezado de verdad, h3 por defecto: headingLevel lo ajusta al sitio donde se monta (del 2 al 6: el h1 es de la página). En la pulsable, el botón o el enlace va DENTRO del encabezado y se estira por encima de la tarjeta con un pseudoelemento: se anuncia un único destino con el nombre del título, el HTML sigue siendo válido (un button no puede contener un h3) y los botones del pie siguen funcionando. selected se anuncia según la forma: en la pulsable, aria-pressed en el botón (también false, para que se sepa que se puede elegir; sin la prop, es un botón normal); en la de enlace, aria-current; en la estática, que no tiene control, «(seleccionada)» escrito tras el título. loading pone aria-busy en el cuerpo.

Aspecto fino: variables CSS --amset-card-*: -padding (12, 20 o 24 px según el tamaño), -title, -radius, -background, -border, -shadow, -slot (el grosor de la franja de tono, 3 px) y -media-width (10rem en horizontal; en ventanas de menos de 30rem los medios vuelven arriba). El foco de la pulsable es el contorno de 2 px de todos los controles.

Cómo se ve

Tres artículos, 148,20 €. Recogido en punto de entrega.

<Card title="Pedido 4821" subtitle="Entregado el 3 de octubre" variant="raised">
  <Text>Tres articulos, 148,20 EUR. Recogido en punto de entrega.</Text>
</Card>

Props

Se importa con import { Card } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`extra`	`ReactNode`	A la derecha del titulo: una etiqueta de estado, un menu de acciones.
`footer`	`ReactNode`	Franja de abajo, separada por un divisor: botones o metadatos.
`headingLevel`	`CardHeadingLevel`	Nivel del encabezado. Lo manda el sitio donde se monta la tarjeta, no la tarjeta: dentro de una seccion con `h2` esto es un `h3`.
`horizontal`	`boolean`	Los medios al lado del texto en vez de encima.
`href`	`string`	—
`id`	`string`	—
`loading`	`boolean`	Marca el contenido como ocupado mientras llega.
`media`	`ReactNode`	A sangre, antes del contenido: imagen, grafica, mapa.
`onPress`	`() => void`	—
`rel`	`string`	—
`selected`	`boolean`	Elegida: borde y fondo de acento, para rejillas de opciones. Tambien se anuncia, cada forma a su manera: la pulsable es un boton que se queda pulsado (`aria-pressed`, tambien con `false`: asi se sabe que se puede elegir), la de enlace es la actual (`aria-current`) y la estatica, que no tiene control, lo dice escrito tras el titulo: «(seleccionada)».
`size`	`"sm" \| "md" \| "lg"`	El relleno y el cuerpo del titulo: 12, 20 o 24 px alrededor.
`subtitle`	`ReactNode`	—
`target`	`string`	—
`title`	`ReactNode`	Obligatorio: es el nombre accesible de la tarjeta pulsable. Obligatorio: es el texto del enlace de la tarjeta.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Pinta una franja de color en el borde de inicio. El neutro no la pinta.
`variant`	`"outline" \| "raised" \| "flat"`	`outline` (por defecto), `raised` (con sombra) o `flat` (sin borde, sobre un fondo alterno).
`withoutPadding`	`boolean`	Sin relleno en el contenido, para lo que va a sangre: una tabla, una lista, un mapa. La cabecera y el pie conservan el suyo.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-card-padding`	`var(--amset-space-5)`
`--amset-card-title`	`var(--amset-text-lg)`
`--amset-card-radius`	`var(--amset-radius-lg)`
`--amset-card-background`	`var(--amset-surface)`
`--amset-card-border`	`var(--amset-border)`
`--amset-card-shadow`	`none`
`--amset-card-slot`	`3px`
`--amset-card-media-width`	`10rem`

Cómo se cambia

.amset-card {
  --amset-card-padding: ...;
  --amset-card-title: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: