Eyebrow con barra
Etiqueta corta que sitúa el bloque en su categoría o norma — p. ej. «NOM-154 · A·B·C» o «Categoría destacada». Lleva una barra lateral en color de marca que da peso visual sin agregar texto.
Dato prop eyebrow (string)
Módulo 9 · CategoryFeature
Spotlight de categoría
Categoría destacada · Demo
El equipo que más piden
en cada proyecto
Los productos de esta categoría cubren el 80 % de los casos reales. Te ayudamos a elegir el modelo correcto según el tamaño de tu inmueble y el riesgo que tienes que proteger.
- Equipo base incluido — Todo lo necesario para empezar desde el primer día.
- Instalación en 48 h — Coordinamos la entrega y puesta en marcha a tu ritmo.
- Documentación de respaldo — Ficha técnica, constancias y manual incluidos sin costo extra.
- Servicio post-venta — Mantenimiento preventivo y soporte en los primeros 12 meses.
Marcas disponibles
Marca A Marca B recomendado Marca C Marca D
Segunda categoría · Demo
Complementos para
cada instalación
Accesorios y refacciones que mantienen el equipo en óptimas condiciones durante toda su vida útil. Sin esto, el equipo principal pierde vigencia antes de tiempo.
- Compatible con todas las marcas — Refacciones originales y equivalentes certificadas.
- Entrega exprés en CDMX — Mismo día en pedidos antes de las 13:00 h.
- Asesoría para elegir la correcta — Te decimos qué pieza necesitas antes de comprar.
Cada prop, explicada
Anatomía del módulo
NOM-154 · Ejemplo vivo
Extintores para
cada clase de fuego
Párrafo que describe la categoría. No repite los bullets: da contexto general sobre qué es y para quién.
- Bullet 1 — label en negrita — Desc breve que complementa el label.
- Bullet 2 — ítem de valor — Desc breve.
- Bullet 3 — diferenciador — Desc breve.
Marcas disponibles
Marca A Marca B destacado
Título + acento
H3 con la primera parte del título en color tinta y la segunda parte (titleAccent) en color de marca. Permite resaltar la palabra clave de la categoría sin CSS extra en la página.
Dato props title + titleAccent (opcional)
Descripción
Párrafo de 2-3 líneas que complementa el título. No debe repetir los bullets: su trabajo es dar contexto general — qué es la categoría y para qué sirve.
Dato prop description (string)
Bullets con ícono check
Lista de puntos clave donde cada ítem tiene un label en negrita y un desc breve. El ícono check en caja de color de marca dirige la mirada antes de leer. Array vacío oculta la lista.
Dato prop features: { label, desc }[]
Pills de marcas
Fila de pills con nombre de marca y nota opcional (p. ej. «recomendado»). Refuerza la credibilidad del catálogo sin necesitar logos. Array vacío oculta el bloque de marcas.
Dato prop brands?: { name, note? }[]
CTA con flecha
Botón de fondo sólido con ícono de flecha que viaja hacia la derecha al hover. Apunta al catálogo de la categoría (/productos u otra ruta). Siempre el último elemento de la columna de texto.
Dato props ctaLabel + ctaHref
Galería 1 + 2
Columna derecha con una imagen grande arriba (aspect-ratio 16/10) y dos imágenes pequeñas debajo en grid de 2 columnas (aspect-ratio 4/3). Todas con border-radius del sistema y object-fit: cover.
Dato props imgMain + imgA + imgB (GalleryImage: src + alt)
Ventajas de CategoryFeature
Por qué usar este módulo
Vende la categoría, no solo la lista
El grid de CategoryCards muestra el catálogo de un vistazo, pero cada tarjeta solo cabe 2 líneas. CategoryFeature entra cuando quieres convencer de una categoría antes de que el visitante entre a su página — con argumentos, prueba de marca y contexto visual.
Galería sin página adicional
Tres imágenes en una composición 1+2 dan la sensación de catálogo sin pedir al visitante que navegue a otra URL. La imagen grande comunica el producto estrella; las dos pequeñas muestran variedad.
Prop flip para alternar ritmo visual
Con flip={true} la galería va a la izquierda y el texto a la derecha. Esto permite alternar el orden en una home con varios spotlights sin que la página se vea monótona.
Marcas como prueba social rápida
Las pills de marcas no requieren logos ni archivos SVG: solo texto en border con peso visual. Son escaneables en menos de un segundo y refuerzan confianza en el catálogo.
Reglas de uso
Cómo usarlo bien
Sí conviene
- Usar una instancia de CategoryFeature por cada 2-3 CategoryCards del grid para dar ritmo y profundidad.
- Aprovechar flip={true} cuando hay dos spotlights seguidos para que la home no sea monotemática.
- Dejar brands vacío si el negocio no trabaja marcas comerciales — el bloque desaparece limpiamente.
- Mantener features entre 3 y 5 ítems. Más de 5 deja de ser un spotlight y se convierte en una ficha.
Mejor evita
- No usar CategoryFeature para TODAS las categorías — es un spotlight, no un grid. El grid usa CategoryCard.
- No repetir en description lo que ya dicen los features — cada zona del componente tiene su trabajo.
- No inventar marcas. Si brands llega vacío la sección se oculta sola.
- No usar titleAccent en el mismo texto del title — son elementos distintos, titleAccent va en línea nueva.
Cuándo usar cada uno