Headings output the article heading text of an article.
Headings make it easy to structure content on pages, helping users quickly navigate and identify key sections. They provide a clear hierarchy of information, guiding users through the page and enhancing readability. You can also add optional styling or icons to draw attention to specific headings and make the purpose of each section more evident.
When to use this component
Headings are perfect for organizing content on webpages, making it easier for users to navigate and understand the structure of the page. They help break down information into digestible sections, guiding users to the most relevant content quickly.
Ensure each heading is distinct by using clear, descriptive titles that reflect the content of each section. Subtle styling, such as bold or larger text, can improve visibility while keeping the design clean and readable.
If the heading needs to be interactive, such as linking to more information, consider adding hyperlinks or drop-downs to provide users with a smooth, intuitive experience.
Headings are also an effective way to establish a clear hierarchy of information, making content easier to scan and enhancing overall user engagement.
Examples in GOSS products
- The Default template (and all templates that use this default output) to show the article heading
Accessibility considerations
The h1 tag is used to define the primary heading of a page, typically representing the most important title or topic of the page. It plays a critical role in structuring content, providing users and search engines with a clear understanding of the main subject of the page.
From an accessibility perspective, the h1 tag helps screen readers identify the page's primary focus, ensuring users with visual impairments can quickly understand the page's context. It's important to use only one h1 per page to maintain proper content hierarchy, as this helps both users and search engines interpret the structure effectively.
When styling the h1, ensure that it is prominent but not overwhelming. It should be clear and easy to read, with proper contrast against the background. Additionally, avoid embedding interactive elements like buttons or links within the h1, as it could distract from its primary function as the main heading of the page. Instead, provide any related actions elsewhere, maintaining clarity and accessibility.
Basic heading
A heading component with no additional configuration options.
This is a basic heading
<div class="a-heading">
<h1 class="a-heading__title">
This is a basic heading
</h1>
</div><comp:heading>
This is a basic heading
</comp:heading>// .NET doesn't have a heading component, instead it makes use of this asset area
@{
Layout = null;
}
@if (!string.IsNullOrWhiteSpace(Model.ArticleHeading))
{
<div class="a-heading a-heading--@Model.TemplateName">
<h1 class="a-heading__title">@Html.WysiwygArticleHeading(Model)</h1>
</div>
}
Heading with modifiers
A heading component with the modifiers attribute set to 'blue'.
This is a basic heading
Share this page
