Typography
Usage
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 children | React.ReactNode | Custom 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' |
() => { return ( <DxcInset space="2rem"> <DxcTypography fontFamily="Open Sans, sans-serif"> This DxcTypography component has some children with different styles; parent has a fontFamily 'Open Sans, sans-serif' and{" "} <DxcTypography fontSize="0.75rem" color="#049afd" fontFamily="Source Code Pro, monospace" > one of the children has 'Open Sans, mono-space' and different color and size, </DxcTypography>{" "} <DxcTypography>the other child gets parent's styles.</DxcTypography> </DxcTypography> </DxcInset> ); }