@bbc/psammead-headings

psammead-headings -

Description

The Headings are a set of two components, Headline and SubHeading. They use a h1 and h2 HTML element respectively, with the Headline being designed for a single use on the page, with SubHeading being aimed at repeated use.

Installation

npm install @bbc/psammead-headings

Props

Argument	Type	Required	Default	Example
script	object	yes	latin	{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }
service	string	yes	N/A	'news'
darkMode	bool	no	false	true

Usage

import { Headline, SubHeading } from '@bbc/psammead-headings';
import { latin } from '@bbc/gel-foundations/scripts';

const Wrapper = () => (
  <Fragment>
    <Heading script={latin} service="news">
      Some headline
    </Heading>
    <SubHeading script={latin} service="news">
      Some subheadline
    </SubHeading>
  </Fragment>
);

SubHeading components can be used as page anchors when passed an id prop. To take the above usage as an example:

<SubHeading id="some-subheadline" script={latin} service="news">
  Some subheadline
</SubHeading>

This usage will allow for the page anchor: www.bbc.com/news/articles/articleID#some-subheadline

When to use this component

These components can be used at any point on the page, however the Headline is designed to be used once at the top of the page. The SubHeading takes an optional id value and passes it to the h2 which can be used as an anchor when referencing content.

Accessibility notes

The SubHeading component has a tabindex of -1 so that it works correctly with screen readers when navigated to via a skip link.

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.