Typography component
Use Typography to present User Interface text elements that follow the Sema4.ai Design system typographic scale.
For styling article like content see the Content component.
My title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor vestibulum turpis, vitae cursus elit tincidunt eget. Pellentesque aliquam quam a magna ornare placerat. Ut a tincidunt magna, et tempus risus. Duis cursus pharetra metus, in efficitur massa consectetur vel. Nunc tristique nibh vitae diam ornare, a pretium purus interdum.
Variants
Use Typography component `variant` property for the suitable style variant required in the given User Interface context.
A variant defines the font size, line height and letter spacin of the content. For other styling options, see Styles.
display-x2-large
display-x-large
display-large
display-medium
display-small
display-headline
display-heading
body-large Lorem ipsum dolor sit amet, consectetur adipiscing elit.
body-large-loose Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor vestibulum turpis, vitae cursus elit tincidunt eget. Nulla tempor metus sed sem faucibus luctus sit amet ac nunc. Nulla leo purus, convallis in lobortis et, ultrices sed enim.
body-medium body-medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
body-medium-loose Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor vestibulum turpis, vitae cursus elit tincidunt eget. Nulla tempor metus sed sem faucibus luctus sit amet ac nunc. Nulla leo purus, convallis in lobortis et, ultrices sed enim.
body-small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor vestibulum turpis, vitae cursus elit tincidunt eget.
body-small-loose - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor vestibulum turpis, vitae cursus elit tincidunt eget.
Styles
Typography component supports various text styles and decorations that can be combined if required. To define font size, line height or letter spacing it is suggested to use the variant property.
Regular weight
Medium weight
Bold weight
Underline
Line throught
Italic font
Uppercase
capitalized text
Combined style
Mono Font
Use the `$mono` property to use the defined monospace font. Monospace font is compatible with all `body-*` type variants.
const title = "Conversational Agents";
Truncate
Use the `truncate` property to limit longer text to given line count
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor vestibulum turpis, vitae cursus elit tincidunt eget.