The “Heading” component helps users organize content and maintain clear structure within webpages. With various customization options, users can tailor the appearance of their headings to match the overall design and enhance readability.
Live Example
Gloss Heading Component
Options and Variations
Heading Styles
The heading component has three different style options to choose from: primary, secondary, and tertiary. Primary styles are used for main section headers with the secondary and tertiary headers being used to differentiate smaller sections within the larger group.
Primary
Secondary
Tertiary
Pre-heading Options
The heading component includes the option of adding a smaller pre-heading above the main title. This is used to give a little more context to the section or heading than can be included in the main headline.
This is a heading
This is a heading
Heading Alignment
Left Aligned
Center Aligned
Bottom Margin
None
The heading above this text block has no bottom padding applied to it. Aliquam orci justo, molestie non purus eget, semper fringilla urna.
Small
The heading above this text block has small padding applied to it. Aliquam orci justo, molestie non purus eget, semper fringilla urna.
Large
The heading above this text block has large padding applied to it. Aliquam orci justo, molestie non purus eget, semper fringilla urna.
X-Small
The heading above this text block has extra small padding applied to it. Aliquam orci justo, molestie non purus eget, semper fringilla urna.
Medium
The heading above this text block has medium padding applied to it. Aliquam orci justo, molestie non purus eget, semper fringilla urna.
X-Large
The heading above this text block has extra large padding applied to it. Aliquam orci justo, molestie non purus eget, semper fringilla urna.
Usage
Do...
- Use the Heading component to clearly structure your content, making it easier for readers to navigate.
- Select from primary, secondary, and tertiary styles to suit the importance and hierarchy of the content.
- Ensure consistent use of heading styles throughout the document to create a cohesive look.
- Use left-aligned or center-aligned options based on the layout and design requirements of your webpage.
- Use headings judiciously to avoid clutter and maintain a clean, organized presentation.
Don't...
- Use headings for decorative purposes without adding structural value.
- Mix too many heading styles in a single document.
- Use heading styles that clash with the overall design of the page.
- Place headings too close to each other without intervening content.
- Center-align headings unless it aligns with the overall page layout.