Content Headings

Approved — Ready for dev

The Content Headings component provides standardized type and spacing combinations for a number of common heading scenarios throughout the platform.

Content Headings

Anatomy

Content headings offer an easy way to consistently implement a variety of type styles throughout the platform. At its core, a content heading is composed of a type style and top and bottom margins. 

The five standardized content heading styles are: District Heading, Task Heading (with and without a description), High Emphasis Section Heading, Low Emphasis Section Heading, Table Heading.

Each heading variation is designed for a unique use case. To ensure clarity in typographic hierarchy, avoid using type treatments similar to these for other labels within the platform.

District heading

This component should be used as the primary label for buckets or widgets. On Desktop, this component should always appear within the marquee. It sometimes appears with a tab group beneath it. With or without the tabs, the space beneath the district heading should be the same.

  1. District heading - Large heading

Task heading

Activity descriptions serve to label tasks. The label styled in Medium Heading sometimes becomes the activity label within the top bar when the view is scrolled.

  1. Task heading - Medium heading
  2. Task description - Body 1 (Optional)

High emphasis section heading

The high emphasis heading is intended to describe groups using various types of content. It is especially useful when the content beneath is visual or dynamic in nature. High emphasis headings are often used to label partial bottom sheets.

  1. High emphasis section heading - Small heading

Low emphasis section heading

The low emphasis heading is best used to describe sections of content that are simple and repetitive.

  1. Low emphasis section heading - Subtitle 1

Table heading

The table heading is used to label columns of content within a table. It may or may not be actionable and include the sort/arrange icon in an embedded Quick Action Button.

  1. Table heading - Overline
  2. Sort/arrange affordance — Xsmall embedded quick action button (optional)

Specs

Color

Element Property Value
Label Text color ∆colorPlatformGray900

Elevation

There are no elevation considerations for this component.

Spacing

Note: when the quick action button is not present, the same top and bottom spacers should still be used.

Type

Element Property Value
District heading Type level Large heading
Task heading Type level Medium heading
Task description Type level Body 1
High emphasis section heading Type level Small heading
Low emphasis section heading Type level Subtitle 1
Table heading Type level Overline

States

There are no state considerations for this component. For state guidance regarding the optional quick action button in the table heading variant, see Quick Action Button

Theming

There are no additional theming considerations for this component.


Placement

The content heading variations each have unique placement rules. The district heading should always appear near the top of a bucket or widget, oftentimes inside of the top bar or marquee. The task heading should appear near the top of the view and may be scrolled out of view, having its label replace the header in the top bar on mobile. Both section headings should appear above the content they describe, always left-aligned. Table headings should appear within the top row of any table, with one heading per column.

Behavior

There are no behavior considerations for this component.

Developer Docs

Vue Developer Docs

Component documentation coming soon!