Standfirst
Overview
Standfirst is an introductory paragraph in an article, which summarises the article's content. It is often in larger or bolder type than regular paragraph text and is positioned at the top of the article content under the Headline. This is to attract the user’s attention to read more of the article.
Usage
No special requirements.
Props
The Standfirst component provides the following props for customisation.
childrenstring
The content of the Standfirst is passed as the child of the component.as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' = h2
This is a string name with one of the following html elements: h1, h2, h3, h4, h5, h6 or span, that the standfirst can be converted to. Standfirst defaults as a h2 element, but it can be converted to another heading element or span by `renderStyledTextAs="span"` prop.overridesobject
If provided, overrides the respective presets for the component and provided elements.styledTextobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the passed styled text.typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the styled text.{
styledText: {
stylePreset: "inkBase",
typographyPreset: {
xs: "editorialSubheadline010",
lg: "editorialSubheadline020"
}
}
}
Playground
Standfirst Content
For more information on overriding component defaults, see the docs here.
Rationale
Styling
The Standfirst component was designed to be discreet as they are intended to supplement the primary content.
Accessibility
Colour
Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator.