Standfirst

Purpose

Standfirst is a short introductory paragraph used to draw attention to specific information related to page content.

Example

Standfirst Small
Standfirst Medium
Standfirst Large

Description

Standfirst is displayed in larger font size than body text, usually on a Gainsboro grey background. It is typically accompanied by a relevant call to action button. The elements within the standfirst component are center aligned.

The default implementation of Standfirst can be found on the Closed Step page.

Elements

Variants

White Background

There is also a title implementation with a white background that can be found on the Workplace Learning page.

Standfirst White Bg Small
Standfirst White Bg Medium 2
Standfirst White Bg Large 3

Small

This is the current usage on the Pre Course page. Applying the --small modifier to the Standfirst molecule causes the font size and line-height to decrease.

Standfirst Small Variant Small
Standfirst Small Variant Medium
Standfirst Small Variant Large

Large

This is the implementation found on the Statement of Participation promo page (50%). Applying the --large modifier to the Standfirst molecule causes the font size and line-height to increase.

Standfirst Large Variant Small
Standfirst Large Variant Medium
Standfirst Medium Variant Large

Wide (Homepage)

This is the implementation found on the Homepage. This uses viewport width CSS units, which is a special case because we wanted the homepage to have the biggest impact.

Standfirst Wide Varient Small
Standfirst Wide Varient Medium
Standfirst Wide Varient Large

Added by: