Text Style
O componente "Text Style" é utilizado para aplicar os principais estilos de combinações de fontes no Letras
Observações adicionais
Escolha o tipo de texto apropriado com base no contexto de uso.
Selecione a variante de tamanho que melhor se adapta à importância e legibilidade do texto.
Mantenha a consistência na aplicação dos estilos de texto em todo o aplicativo.
Uso
O componente Text Style pode ser aplicado em outros componentes que possuem algum tipo de descrição textual com o intuito de manter a padronização dos tamanhos e estilos de texto do produto. O Text Style pode ser aplicados em descrições de cards, listas, componentes de títulos e outros locais onde houver a necessidade de conteúdo textual curto.
Anatomia
1. Label (Opcional)
Utilizado para pequenas descrições e informações adicionais do conteúdo abaixo.
Funciona como uma tag que complementa o conteúdo principal.
Não deve possuir mais de 1 linha.
2. Primary Label (Opcional)
Título principal do componente, com ênfase visual para destacar informações importantes.
Não deve ultrapassar 3 linhas.
Quando aplicado sem o
4. Iconalterar para Fill.O texto pode ser centralizado, quando utilizado em conjunto com thumbnail circulares.
3. Secondary Label (Opcional)
Complementa as informações apresentadas na primary label.
Utilizado para fornecer detalhes adicionais ou contextos específicos que não são abordados pela primary label.
Pode ser usado sozinho em situações em que o componente relacionado já fornece todas as informações necessárias.
4. Icon (Opcional)
Pode ser utilizado para diferenciar ou fornecer mais contexto ao primary label. Por exemplo, em um ranking de contribuidores, o ícone pode indicar a posição de cada contribuidor.
Além disso, o ícone pode ser substituído por um ícone de botão para indicar que a primary label é clicável, como um link ou ação interativa.
Posicionamento
Deve está sempre posicionado alinhado a esquerda e quando estiverem dentro de contêineres maiores, como cards o espaçamento interno desses contêineres deve ser ajustado para acomodar os componentes sem comprometer a coesão visual.
Variantes
Regular / Regular
O Text Style Body é utilizado para textos com peso regular. É comumente empregado em descrições de listas e cards.
-> Small
Adequado para corpo de texto secundário, como descrições menores em componente de lista e/ou cards com imagens X Small ou Small.
-> Medium
Adequado para corpo de texto secundário, como descrições menores em componente de lista e/ou cards com imagens Medium ou Large.
-> Large
Adequado para corpo de texto secundário, como descrições menores em componente de lista e/ou cards com imagens Large ou X Large.
Strong / Regular
A variante Title 01 é utilizado para títulos com descrição. Geralmente é utilizada para títulos de seções ou contextos em que precise de maior diferenciação entre Primary e Secondary Label.
-> Small
Apropriado para subtítulos e subseções.
-> Medium
Apropriado para títulos de menor relevância, como cabeçalhos de seções principais.
-> Large
Recomendado para títulos de página e de seções que necessitam de um destaque maior, como seções de um artigo do blog.
-> Display
Para elementos de maior destaque, como títulos principais da página, seções importantes e chamada de artigos.
Strong / Strong
O estilo de texto Title 02 é utilizado em locais onde é necessário destacar tanto o título quanto a subtítulo.
-> Medium
Apropriado para cabeçalhos de seções principais que precisam de destaque no título e no subtítulo.
Histórico de Atualizações
Atualizado