Title
Dar jerarquía visual y semántica a los títulos, encabezados y secciones de contenido en una página.
- Titular una pantalla, página o sección principal: marcar el inicio de una página o un bloque de contenido grande con jerarquía semántica. Ej.: "Configuración de envío", "Gestión de productos", "Mis pedidos".
- Dividir contenido largo en subsecciones: estructurar la información usando diferentes niveles de títulos para mejorar la legibilidad y la navegación. Ej.: usar h2 para categorías principales y h3 para subcategorías dentro de una sección.
- Dar contexto y propósito a una sección: que la persona entienda inmediatamente de qué trata el contenido que sigue sin necesidad de leer el cuerpo de texto. Ej.: un h2 que introduzca una lista de variantes de un producto.
- Escribir texto de corrido o párrafos: usar contenido narrativo, descripciones largas o ayudas de campo. En su lugar, usar Text.
- Categorizar o etiquetar un valor: representar el estado de un elemento con palabras clave, íconos y colores. En su lugar, usar Tag.
- Comunicar una cantidad breve: mostrar un contador o un indicador de novedad. En su lugar, usar Badge.
La etiqueta HTML (as) define la jerarquía semántica del título dentro del documento: cómo lo interpretan lectores de pantalla y buscadores, independientemente de su tamaño visual.
| Nivel | Descripción |
|---|---|
| H1 | Nivel de jerarquía máximo; se usa una sola vez por página para el título principal. |
| H2 | Divide secciones grandes de contenido. |
| H3 | Titular bloques de contenido dentro de una subsección. |
| H4 | Subtitular bloques de contenido con menor jerarquía. |
| H5 | Resaltar contenido de mayor importancia que el texto sin formato. |
| H6 | Resaltar contenido de baja jerarquía. |
El tamaño se controla independientemente de la jerarquía semántica. Permite usar un tamaño visual diferente del que correspondería por semántica HTML, manteniendo el nivel semántico correcto (ej. h2 con tamaño visual de h3).
Tamaño H1
Tamaño H1 (2rem): el más grande; para títulos principales.
Tamaño H2
Tamaño H2 (1.75rem): para divisiones de secciones principales.
Tamaño H3
Tamaño H3 (1.5rem): para titular bloques de contenido.
Tamaño H4
Tamaño H4 (1.25rem): encabezados dentro de tarjetas, secciones de un formulario o bloques dentro de un modal.
Tamaño H5
Tamaño H5 (1rem): encabezados de cards pequeños.
Tamaño H6
Tamaño H6 (0.875rem): etiquetas de agrupación dentro de listas o componentes más reducidos.
Medium
Medium: énfasis leve. Diferencia un título sin llegar al peso completo de negrita.
Bold
Bold: máximo énfasis. Usar en títulos principales o cuando se requiera mayor peso visual. Por defecto, los títulos suelen usar bold.
Neutral low
Neutral low: color por defecto para títulos estándar. Ej.: títulos principales de secciones.
Neutral high
Neutral high: mayor contraste que neutral low, para títulos que necesitan más énfasis dentro de un bloque neutral.
Neutral background
Neutral background: blanco; se usa sobre fondos oscuros, como una tarjeta o un banner con fondo oscuro.
Primary
Primary: para destacar una novedad o información relevante sin transmitir urgencia.
El componente Title se utiliza en toda la interfaz para estructurar y jerarquizar la información. Suele aparecer al inicio de pantallas, secciones, modales, cards y otros contenedores que necesitan un encabezado claro.
Medios de envío
Envío personalizado
Creá el medio de envío que quieras para realizar las entregas de tus productos.
Gestión de productos
Mantener el mismo estilo (peso, color, tamaño) en todo el título. No mezclar negrita con regular o colores diferentes en una misma línea.
Gestión
de productos
Evitar cambiar el estilo dentro de un mismo título, como tener parte del texto en negrita y parte en regular.
Medios de envío
Envío personalizado
Zonas de cobertura
Seguir una jerarquía lógica y secuencial. Usar h1 para el título principal, h2 para secciones, h3 para subsecciones, etc.
Mis pedidos
Detalles del pedido
Usar múltiples h1 en una misma página. Confunde la estructura semántica y afecta la accesibilidad.
- Usar etiquetas semánticas correctas: marcar títulos con h1–h6 según su nivel de jerarquía, no con span o div. Lectores de pantalla usan estos encabezados para navegar la estructura de la página.
- Un solo h1 por página: el h1 identifica el tema principal de la página. Usar múltiples h1 confunde la navegación.
- Mantener una estructura secuencial: no saltar niveles (ej. h1 → h3); respeta la jerarquía para que navegadores y tecnologías asistivas entiendan la organización.
- Contraste suficiente (WCAG AA): elegir un color que contraste claramente con el fondo (ej. no usar colores muy similares como texto gris sobre fondo claro).
Instalá el componente via terminal.
npm install @nimbus-ds/componentsUsado para el título principal de la página; debe usarse una sola vez.
import React from "react";
import { Title } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Title as="h1">Lorem ipsum dolor sit amet</Title>
);
export default Example;Las propiedades adicionales se pasan al elemento <Title>. Consultá la documentación para ver la lista de atributos aceptados por los elementos <h1> a <h6>.
Title
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the title. | |
as | 'h1' | 'h1' | Type of html tag to create for the title. |
fontSize | '0-5' | 'base' | The fontSize property sets the size of the title. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
fontWeight | 'bold' | 'regular' | The fontWeight property sets how thick or thin characters in title should be displayed. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
lineHeight | '0-5' | 'base' | The lineHeight property specifies the line height of the title. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
textAlign | 'center' | 'left' | The textAlign property specifies the horizontal alignment of title. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
color | 'danger-textHigh' | 'neutral-textLow' | The color property is used to set the color of the title. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value", "xxl": "value" }' |
Title.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
as | 'h1' | 'h1' | Type of html tag to create for the title. |
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.