IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Headline

/

Design

Create a primary area of interest with large type.

Headlines establish the first-level typographical hierarchy for sections throughout the interface.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Headline documentation and examples.

Size

The level of headline you select should provide the appropriate hierarchy and visual coherency within the interface.

We help coaches and athletes win with video.

One: Establishes top-level hierarchy. Stick to one per interface.

Small Screens

If you use the headline component, headlines automatically decrease in size for screens smaller than 600px. If you’re designing exclusively for smaller screens, use smaller type sizes and manually provide those specifications to your developer.

Usage

Use our UI label guidelines when typesetting headlines.

  • Never set headlines in all caps.
  • Keep headlines short, sweet and to the point.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.