Choose the class that matches the text's role. The class sets its font and size.
Display (Krypton)
Use for hero text and page titles.
-
-
-
Headings (Xenon)
Use to organize sections and components.
-
-
-
-
Body (Neon)
Use for paragraphs and longer reading.
-
-
-
Labels (Argon)
Use for short labels and metadata.
-
-
-
-
Code (Neon)
Use the body font for code too.
-
-
-
Interactive (Argon)
Use for buttons and action labels.
-
-
-
Callout (Radon)
Use for pull quotes and asides.
-