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.