The Content Headings component provides standardized type and spacing combinations for a number of common heading scenarios throughout the platform.
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.
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.
- District heading - Large 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.
- Task heading - Medium heading
- 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.
- 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.
- Low emphasis section heading - Subtitle 1
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.
- Table heading - Overline
- Sort/arrange affordance — Xsmall embedded quick action button (optional)
There are no elevation considerations for this component.
Note: when the quick action button is not present, the same top and bottom spacers should still be used.
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
There are no additional theming considerations for this component.
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.
There are no behavior considerations for this component.
Developer DocsVue Developer Docs
Component documentation coming soon!