Use display text to create prominent headings in hero sections, banners, or key sections of a page
There are 4 display sizes

1. Display 1

2. Display 2

3. Display 3

4. Display 4
Usage

Use display text to highlight important headings or key messages.

Avoid excessively long words that don’t scale well on smaller screens and test how the text appears at different sizes to ensure clarity.
Writing display text
Display Text is designed for large, prominent headlines that capture attention. The language should be clear, concise, and engaging, ensuring readability and accessibility across different contexts.
Available platforms
Platform |
Available |
---|---|
Figma |
v4+ |
Web (@ovotech/element) |
v4+ |
App (@ovotech/element-native) |
v4+ |
Related
External links