Todos los componentes (204)

Tarjeta de producto

Comercio · ProductCard · .amset-product

Qué es y cuándo usarlo

La ficha de un producto en una rejilla de tienda: la foto, el nombre, una línea de detalle, las estrellas, el precio y, abajo, sus acciones (añadir al carrito, elegir talla).

Cuándo usarlo

En el listado de una categoría, en los resultados de una búsqueda o en «También te puede gustar»: cada tarjeta lleva a la ficha de su producto.
priceBefore para una rebaja: el precio viejo sale tachado, con el ahorro, y el lector de pantalla oye «Antes».
soldOut cuando no quedan existencias: la foto se apaga y se escribe «Sin existencias» encima.
badge para una cinta corta en la esquina de la foto: «Nuevo», «Últimas unidades».

Cuándo no

Una tarjeta que no es un producto (una categoría, un artículo del blog): Card, que también estira su enlace por encima.
La línea de un carrito o de un pedido: OrderSummary.
Varias tarjetas en una fila que no cabe: dentro de un Carousel.

Teclado: Tab llega al nombre, que es el único enlace, e Intro abre la ficha. El siguiente Tab entra en las actions. El anillo de foco se pinta en la tarjeta entera, no solo en el nombre.

Accesibilidad: es un article que se llama como el producto. El enlace envuelve solo el nombre y se estira por encima de la tarjeta con un pseudoelemento, así que se pulsa en cualquier sitio y se puede abrir en otra pestaña; las actions van por encima y se pulsan sin abrir la ficha. Sin photoText la foto es decorativa (alt=""), porque el nombre ya está al lado. Las estrellas son de solo lectura y se llaman «Valoración de» y el nombre.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escribe el precio.

Aspecto fino: variables CSS --amset-product-*: -detail, -gap, -inner-gap, -name, -padding, -photo-radius, -radius. El tamaño mueve el relleno, el radio, el hueco y los cuerpos de letra.

Cómo se ve

Camiseta tecnica

24,90 € ~~Antes: 32 €~~ Ahorras un 22 %

<ProductCard name="Camiseta tecnica" href="/p/camiseta" price={24.9} priceBefore={32} />

Props

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

Prop	Tipo	Para qué sirve
`href`obligatoria	`string`	—
`name`obligatoria	`string`	—
`price`obligatoria	`number`	—
`actions`	`ReactNode`	Lo que va abajo: un boton de añadir al carrito, un selector de talla.
`badge`	`string`	Cinta de esquina: «Nuevo», «Últimas unidades».
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currency`	`string`	—
`detail`	`string`	Segunda linea bajo el nombre: la marca, la categoria.
`photo`	`string`	—
`photoRatio`	`PhotoRatio`	—
`photoText`	`string`	Que se ve en la foto. Sin esto la foto es decorativa: el nombre ya esta al lado.
`priceBefore`	`number`	Precio anterior: sale tachado y con el ahorro.
`rating`	`number`	Nota media, de 0 a 5.
`reviewCount`	`number`	—
`size`	`"sm" \| "md" \| "lg"`	—
`soldOut`	`boolean`	Sin existencias: se apaga y se dice.

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-product-gap`	`var(--amset-space-3)`
`--amset-product-inner-gap`	`var(--amset-space-2)`
`--amset-product-padding`	`var(--amset-space-3)`
`--amset-product-radius`	`var(--amset-radius-lg)`
`--amset-product-photo-radius`	`var(--amset-radius)`
`--amset-product-name`	`var(--amset-text-base)`
`--amset-product-detail`	`var(--amset-text-sm)`

Cómo se cambia

.amset-product {
  --amset-product-gap: ...;
  --amset-product-inner-gap: ...;
}

En el banco de pruebas

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