Use text to present your design and content as clearly and efficiently as possible.

While many components include one or more text elements, such as button labels and card headings, text components are commonly used to add structure to a component layout in containers like forms and cards or simply to display information to the user.

Structural text uses heading styles from our type scale. When applying structure to your layout, choose heading styles that reflect the hierarchical relationship between UI elements. Informational text uses body styles for the main text content and complements this with structural headings as required. To learn more about the heading and body styles in our type scale, see Typography.