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.

Props

NameTypeDescriptionDefault
display'inline' | 'block'Specifies the display CSS property of the component.'inline'
colorstringColor 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
children
React.ReactNodeCustom text.-
as'a' | 'blockquote' | 'cite' | 'code' | 'div' | 'em' | 'figcaption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'small' | 'span' | 'strong'Determines the HTML tag with which the text is to be rendered.'span'

Examples

Basic usage

Nested texts