Text
O Text é o componente de texto, utilizado para escrever e formatar blocos de conteúdo dentro de páginas ou componentes.
import React from "react";
import { Text } from "@nimbus-ds/components";
const Example: React.FC = () => <Text as="p">Lorem ipsum dolor sit amet</Text>;
export default Example;O componente Text é composto por um (p) ou (span) estilizado que consome nossos tokens de tipografia para o body, sendo eles o base, o caption e o small.
O conteúdo do componente pode ser alinhado à esquerda, ao centro e à direita. O critério de uso de cada um pode variar caso a caso, sendo o mais comum a esquerda para texto corrido, ao centro para informações únicas ou pontuais e a direita para textos dentro de listas de informações.
O componente permite formatar trechos de conteúdo, sendo possível personalizar o peso e a cor usando a propriedade span.
Utilizamos o Text para escrever texto corrido com hierarquia básica, além de formatar trechos específicos de conteúdo.
Componente Title - Usado para dar título e subtítulo a telas, páginas, blocos de texto, seções ou outros componentes, empregando hierarquia visual e semântica.
Textos em bold devem ser usados para destacar informações pontualmente.
O bold deve ser usado com parcimônia, evitando longos blocos de texto.
Para textos longos devemos dar preferência a estilos tamanho base.
Tamanhos de texto Highlight deve ser evitado para textos longos.
Quando temos conteúdos diferentes em uma mesma linha, devemos manter o mesmo estilo de texto.
Não devemos ter tamanhos contrastantes em uma mesma linha.
Para textos é importante usar cores que não se confundam com outros tipos de elementos.
A cor do conteúdo não deve ser parecida com as cores interativas.
Instale o componente via terminal.
npm install @nimbus-ds/textAdditional props are passed to the <Text> element. See p docs for a list of props accepted by the <Text> element.