Text
Text são indicadores de status utilizados para tornar evidentes metadados importantes.
Quando usar
- For necessário mostrar status associados com a lógica de negócio ou ações do usuário.
- O conteúdo a ser mostrado for readonly.
- For preciso categorizar algo.
Quando não usar
- O conteúdo que a text representa puder ser setado ou removido pelo usuário.
- O click no componente precisar executar uma ação ou funcionalidade.
Uso
js
<CdsText
as="span"
textAlign='start'
:noMargin="false"
>
O empenho em analisar o desenvolvimento contínuo de distintas formas de atuação obstaculiza a apreciação da importância do retorno esperado a longo prazo.
</CdsText>Preview
O empenho em analisar o desenvolvimento contínuo de distintas formas de atuação obstaculiza a apreciação da importância do retorno esperado a longo prazo.
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
as | string | 'span' | h1 h2 h3 h4 h5 h6 heading-1 heading-2 heading-3 subheading-1 subheading-2 subheading-3 p q span body-1 body-2 caption overline strong em del small legend | A tag HTML que o componente deve renderizar. |
color | string | 'n-800' | n-0 n-10 n-20 n-30 n-40 n-50 n-100 n-200 n-300 n-400 n-500 n-600 n-700 n-800 n-900 | Define a cor do texto. Aceita os tokes de cor do design system da shade 'neutrals'. Para cores fora da paleta neutra, utilize uma classe personalizada. |
fontWeight | string | 'regular' | -- | Define o peso da fonte. |
textAlign | string | 'start' | -- | Define o alinhamento do texto. |
noMargin | boolean | false | -- | Remove as margens padrão de tags HTML como `p`, `h1`, `h2`, `h3`, etc. |
Slots
Nome | Descrição |
|---|---|
#default |