Introduction

Introduction will output an article's intro text.

Introductions help structure content on webpages, making it easier for users to navigate and understand the main points. They provide a clear overview, summarising the page and enhancing readability.

When to use this component

Page introductions are perfect for setting the tone and structure of the content, helping users quickly understand what the page is about. They break down complex topics into digestible summaries, guiding users to the most relevant information right from the start.

Make each introduction distinct by using clear, engaging language that reflects the purpose of the page. Subtle styling, such as a larger font or a different colour, can improve visibility while maintaining a clean design.

Examples in GOSS products

The Default template (and all templates that use this default output) to show the article introduction text

Accessibility considerations

Page introductions provide a clear summary of the content, helping users understand the main topics and navigate the page easily. For accessibility, use simple, descriptive language and ensure good contrast for readability, making it easier for screen readers to interpret the content.

Avoid embedding interactive elements directly within the introduction. Instead, place actions elsewhere to maintain focus and clarity, ensuring an accessible experience for all users.

Basic introduction

An introduction component with no additional configuration options.

This is a basic introduction.

HTML Java .NET

<p class="a-intro">
	This is a basic introduction.	
</p>

<comp:introduction>
	This is a basic introduction.
</comp:introduction>

// .NET doesn't have an introduction component, instead it makes use of this asset area
@{
	Layout = null;
}
@if (!string.IsNullOrWhiteSpace(Model.ArticleIntroText))
{
	<p class="a-intro a-intro--@Model.TemplateName">
			@Html.WysiwygArticleIntroText(Model)
	</p>
}

Introduction with modifiers

An introduction component with the modifiers attribute set to 'center'.