Title
Dar hierarquia visual e semântica aos títulos, cabeçalhos e seções de conteúdo em uma página.
- Titular uma tela, página ou seção principal: marcar o início de uma página ou um bloco de conteúdo grande com hierarquia semântica. Ex.: "Configuração de envio", "Gestão de produtos", "Meus pedidos".
- Dividir conteúdo longo em subseções: estruturar a informação usando diferentes níveis de títulos para melhorar a legibilidade e a navegação. Ex.: usar h2 para categorias principais e h3 para subcategorias dentro de uma seção.
- Oferecer contexto e propósito a uma seção: fazer com que a pessoa entenda imediatamente do que se trata o conteúdo que vem a seguir sem precisar ler o corpo do texto. Ex.: um h2 que introduz uma lista de variantes de um produto.
- Escrever texto corrido ou parágrafos: usar conteúdo narrativo, descrições longas ou ajudas de campo. Nesse caso, usar Text.
- Categorizar ou etiquetar um valor: representar o estado de um elemento com palavras-chave, ícones e cores. Nesse caso, usar Tag.
- Comunicar uma quantidade breve: mostrar um contador ou um indicador de novidade. Nesse caso, usar Badge.
A etiqueta HTML (as) define a hierarquia semântica do título dentro do documento: como ele é interpretado por leitores de tela e buscadores, independentemente do seu tamanho visual.
| Nível | Descrição |
|---|---|
| H1 | Nível de hierarquia máximo; usa-se uma única vez por página para o título principal. |
| H2 | Divide seções grandes de conteúdo. |
| H3 | Titular blocos de conteúdo dentro de uma subseção. |
| H4 | Subtitular blocos de conteúdo com menor hierarquia. |
| H5 | Realçar conteúdo de maior importância que o texto sem formato. |
| H6 | Realçar conteúdo de baixa hierarquia. |
O tamanho controla-se independentemente da hierarquia semântica. Permite usar um tamanho visual diferente do que corresponderia por semântica HTML, mantendo o nível semântico correto (ex. h2 com tamanho visual de h3).
Tamanho H1
Tamanho H1 (2rem): o maior; para títulos principais.
Tamanho H2
Tamanho H2 (1.75rem): para divisões de seções principais.
Tamanho H3
Tamanho H3 (1.5rem): para titular blocos de conteúdo.
Tamanho H4
Tamanho H4 (1.25rem): cabeçalhos dentro de cartões, seções de um formulário ou blocos dentro de um modal.
Tamanho H5
Tamanho H5 (1rem): cabeçalhos de cards pequenos.
Tamanho H6
Tamanho H6 (0.875rem): etiquetas de agrupamento dentro de listas ou componentes menores.
Medium
Medium: ênfase leve. Diferencia um título sem chegar ao peso completo de negrito.
Bold
Bold: ênfase máxima. Usar em títulos principais ou quando se requer maior peso visual. Por padrão, os títulos costumam usar bold.
Neutral low
Neutral low: cor padrão para títulos padrão. Ex.: títulos principais de seções.
Neutral high
Neutral high: maior contraste que neutral low, para títulos que precisam de mais ênfase dentro de um bloco neutral.
Neutral background
Neutral background: branco; usado sobre fundos escuros, como um cartão ou um banner com fundo escuro.
Primary
Primary: para destacar uma novidade ou informação relevante sem transmitir urgência.
O componente Title utiliza-se em toda a interface para estruturar e hierarquizar a informação. Costuma aparecer no início de telas, seções, modais, cards e outros contêineres que necessitam de um cabeçalho claro.
Meios de envio
Envio personalizado
Crie o meio de envio que quiser para realizar as entregas dos seus produtos.
Gestão de produtos
Manter o mesmo estilo (peso, cor, tamanho) em todo o título. Não misturar negrito com regular ou cores diferentes em uma mesma linha.
Gestão
de produtos
Evitar mudar o estilo dentro de um mesmo título, como ter parte do texto em negrito e parte em regular.
Meios de envio
Envio personalizado
Zonas de cobertura
Seguir uma hierarquia lógica e sequencial. Usar h1 para o título principal, h2 para seções, h3 para subseções, etc.
Meus pedidos
Detalhe do pedido
Usar múltiplos h1 em uma mesma página. Confunde a estrutura semântica e afeta a acessibilidade.
- Usar etiquetas semânticas corretas: marcar títulos com h1–h6 conforme seu nível de hierarquia, não com span ou div. Leitores de tela usam esses cabeçalhos para navegar a estrutura da página.
- Um único h1 por página: o h1 identifica o tema principal da página. Usar múltiplos h1 confunde a navegação.
- Manter uma estrutura sequencial: não saltar níveis (ex. h1 → h3); respeita a hierarquia para que navegadores e tecnologias assistivas entendam a organização.
- Contraste suficiente (WCAG AA): escolher uma cor que contraste claramente com o fundo (ex. não usar cores muito similares como texto cinzento sobre fundo claro).
Instale o componente via terminal.
npm install @nimbus-ds/componentsUsado para o título principal da página; deve usar-se uma única 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;As propriedades adicionais passam-se ao elemento <Title>. Consulte a documentação para ver a lista de atributos aceitos pelos 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. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.