Typography
warning
Use this component only if all other Halstack Design System components for adding text DO NOT meet your requirements. This component should always be the LAST OPTION to use.
| Name | Type | Description | Default |
|---|---|---|---|
| display | 'inline' | 'block' | Specifies the display CSS property of the component. | 'inline' |
| color | string | Color of the text. | '#000000' |
| fontFamily | 'Open Sans, sans-serif' | 'Source Code Pro, monospace' | Specifies the font-family CSS property of the component. | 'Open Sans, sans-serif' |
| fontSize | '0.75rem' | '0.875rem' | '1rem' | '1.25rem' | '1.5rem' | '2rem' | '3rem' | '3.75rem' | Specifies the font-size CSS property of the component. | '1rem' |
| fontStyle | 'normal' | 'italic' | Specifies the font-style CSS property of the component. | 'normal' |
| fontWeight | '300' | '400' | '600' | '700' | Specifies the font-weight CSS property of the component. | '400' |
| letterSpacing | '-0.025em' | '-0.0125em' | '0em' | '0.025em' | '0.05em' | '0.1em' | Specifies the letter-spacing CSS property of the component. | '0em' |
| lineHeight | '1em' | '1.25em' | '1.365em' | '1.5em' | '1.715em' | '2em' | Specifies the line-height CSS property of the component. | '1.5em' |
| textAlign | 'left' | 'center' | 'right' | Specifies the text-align CSS property of the component. | 'left' |
| textDecoration | 'none' | 'underline' | 'line-through' | Specifies the text-decoration CSS property of the component. | 'none' |
| textOverflow | 'clip' | 'ellipsis' | 'unset' | Specifies the text-overflow CSS property of the component. | 'unset' |
| whiteSpace | 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | Specifies the white-space CSS property of the component. | 'normal' |
Required | React.ReactNode | Custom text. | - |
| as | keyof HTMLElementTagNameMap | Determines the HTML tag with which the text is to be rendered (any valid HTML tag). | 'span' |