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.
npm install @bbc/psammead-headings
| 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 |
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
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.
The SubHeading component has a tabindex of -1 so that it works correctly with screen readers when navigated to via a skip link.
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.
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.
Psammead is Apache 2.0 licensed.