Display

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

There are 4 display sizes

 

Display illustration 1

1. Display 1

Display illustration 2

2. Display 2

Display illustration 3

3. Display 3

Display illustration 4

4. Display 4


Usage

Display usage illustration 1

Use display text to highlight important headings or key messages.

Display usage illustration 2

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+