Title

Uso

O componente de Title é utilizado para exibir títulos de seções, categorias ou informações importantes em uma interface de usuário. Ele é empregado em diversas partes do layout para destacar e identificar visualmente diferentes seções de conteúdo, como títulos de seções, títulos de página, cabeçalhos de componente, títulos de cards, entre outros.

Anatomia

1. Slots (Opcional)

• Espaços reservados para componetes que façam sentido para o contexto. Podem ser substituídos por botões, tags, thumbnail e outros.

2. Text Style

• O Text Style refere-se ao estilo de texto aplicado ao título.

• O tamanho do texto deve ser adaptado ao contexto em que está sendo aplicado, respeitando as variantes de Mobile e Desktop do componente de Text Style.

• Aplicar os tamanhos de acordo com as recomendações de uso da guideline de tipografia.

Posicionamento

Espaçamento

Para garantir uma experiência agradável foram definidas diretrizes para o espaçamento entre título e conteúdo levando em consideração o espaçamento visual entre esses dois elementos, que considera o início e o final real dos itens, desconsiderando seus frames e caracteres ascendentes e descentes da fonte. Como no exemplo abaixo:

No caso de itens sem espaçamento interno (media list, thumbnails e etc), recomenda-se um espaçamento visual de 24px.

Quando o título anteceder um componente que possui espaçamento interno, como listas a recomendação é de um espaçamento visual de 32px.

É importante ressaltar que, apesar das diretrizes estabelecidas, pequenas variações no espaçamento podem ocorrer dependendo do contexto específico da aplicação. Variações de até 2px para mais ou para menos podem ser toleradas, desde que não comprometam a coesão visual e a hierarquia de informação.

Aplicação

No layout, o componente de Title deve sempre ser aplicado como fill container, independentemente da existência de um ou mais títulos na mesma linha ou coluna. Isso significa que o título deve ocupar todo o espaço disponível dentro do contêiner em que está inserido.

Em caso de quebra de linha em títulos que são links, o botão continua alinhado a última palavra da última linha, como na imagem abaixo.

Comportamento

Os elementos dentro do componente de título mantêm seus estados funcionais. Por exemplo, um botão aumenta de tom quando passado o mouse sobre ele. Além disso, quando o título funciona como um link, o clique é aplicável a toda a área do título, não apenas ao botão.

Use cases

Histórico de Atualizações