Text
Text es el componente de texto, utilizado para escribir y formatear bloques de contenido dentro de páginas y 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;El componente Text posee un elemento HTML (p) o (span) estilizado utilizando nuestros tokens de tipografía para el body, pudiendo ser base, caption o small.
El contenido del componente puede ser alineado a la izquierda, centro o derecha. El criterio de uso de cada uno puede variar caso a caso, siendo más común el alineamiento a la izquierda para texto de corrido, al centro para informaciones únicas o puntuales y a la derecha para textos dentro de listas.
El componente permite formatear bloques de contenido, siendo posible personalizar el peso y el color usando las propiedades disponibles.
Usamos Text para escribir texto de corrido con jerarquía básica, además de formatear bloques específicos de contenido.
Componente Title - Usado para titular pantallas, páginas, bloques de texto, secciones u otros componentes, utilizando jerarquía visual y semántica.
El texto en negrita se debe utilizar para resaltar la información puntualmente.
La negrita debe usarse con moderación, evitando bloques largos de texto.
Para textos largos debemos dar preferencia a los estilos de longitud base.
los tamaños de texto resaltados deben evitarse para textos largos.
Cuando tenemos diferentes contenidos en una misma línea, debemos mantener el mismo estilo de texto.
No deberíamos tener tamaños contrastantes en la misma línea.
Para los textos es importante utilizar colores que no se mezclen con otro type de elementos.
El color del contenido no debe ser similar a los colores interactivos.
Instalá el 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.
Text
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the link. | |
as | 'p' | 'p' | Type of html tag to create for the Text component. |
color | 'currentColor' | 'neutral-textLow' | The color property is used to set the color of the text. 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" }' |
fontSize | 'base' | 'base' | The fontSize property sets the size of the text. 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" }' |
fontWeight | 'bold' | 'regular' | The fontWeight property sets how thick or thin characters in text 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" }' |
lineHeight | 'base' | 'base' | The lineHeight property specifies the line height of the text. 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" }' |
textAlign | 'center' | 'left' | The textAlign property specifies the horizontal alignment of text. 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" }' |
textDecoration | 'line-through' | The textDecoration shorthand property sets the appearance of decorative lines on text. 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" }' | |
wordBreak | 'break-all' | The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed. 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" }' | |
lineClamp | number | The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed. 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" }' |
Text.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
fontSize | 'base' | ||
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. | |
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |