Summary text
Summary text follows the H1 to provide a more detailed introduction to the page. It uses a larger font size than regular text.
Summary text example
Here's an example of summary text. You'll find it in the hero banner of most pages, including this one.
How to use summary text
Add summary text underneath the H1 to introduce users to the content on the page. It should be clear and descriptive, but also compelling to encourage users to read on.
In our standard hero, it appears in the hero panel just under the H1, before any other content. On the SDI site, it appears in the main body of the content, underneath the page breadcrumbs.
Adding summary text in the CMS
To add summary text, just add a Text Component to a panel. In the rich text editor (RTE), select the text that should form the summary text, go to the paragraph dropdown, then select ‘Large paragraph’ under ‘Headings’. This will automatically add the summary text styling.
Summary text modifier rules
Standard hero
If you use a hero template, you shouldn't need to adjust the modifiers at all.
- Background: Primary
- Grid span: 8
- Padding: as set in template
- Alignment: as set in template
SDI
- Background: default or white (‘none’)
- Grid span: 8
- Padding: default, unless required to improve layout
- Alignment: default
Accessibility
Like all text, summary text should use plain English. It should clearly introduce the topic of the page so that all users can see at a glance if the page is of interest to them.
Read our guidelines for writing accessible content for more information