Standfirst is a short introductory paragraph used to draw attention to specific information related to page content.
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.
- CTA link or button
There is also a title implementation with a white background that can be found on the Workplace Learning page.
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.
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.
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.