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.

Refer to the defaults below for the object structure:

{
  styledText: {
    stylePreset: "inkBase",
    typographyPreset: {
      xs: "editorialSubheadline010",
      lg: "editorialSubheadline020"
    }
  }
}

Playground

Standfirst Content

import React from 'react';
import { Standfirst } from 'newskit';

export default () => (
  <Standfirst>Standfirst Content</Standfirst>
);

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.