Nature Section Heading
The Nature Section heading is a type of heading used for titles of some subsections of pages on Nature.com.
It uses borders to make it stand out from other headings on the page.
When to use this component
Use the Nature Section heading when you want to organise multiple pieces of content into a section on a landing page. For example, a group of cards linking to articles on a similar subject.
When not to use this component
When you need to break up content on article pages into chunks, use default heading styles.
How it works
Write clear, descriptive headings using sentence case.
Section headings with and without a top border
There are 2 styles of Section heading:
- one with a top and botton border - this is set as an
<h2>
heading level - one with a bottom border and no top border - this is designed for sub-headings and is set at heading level
<h3>
If you need to change the default heading level of a Section heading, you can do this using the heading level with the aria-level
property. The level should be a string, not an integer.
To make our sites accessible, you must always use heading levels correctly to communicate page structure.
Section headings as links
You can use a Section heading to link to another page.
If you're using the handlebars template and you add a link, the heading will render a chevron after the heading text to show users that they can click on it.
If you're not using the handlebars template, you'll need to style it yourself using the source code for the chevron svg icon.
Installation
To use the Section heading component, enter the following command in your Terminal:
npm install @springernature/nature-section-heading
Usage
Then import the installed component code in your scss
file:
// settings
@import '@springernature/nature-section-heading/scss/10-settings/section-heading';
// component
@import '@springernature/nature-section-heading/scss/50-components/section-heading';
Once you’ve installed the scss
, build your Section heading using the following HTML as a guide.
Template
Find a configurable template in the Section heading's view
folder.
See an example in the Section heading's demo
folder.
Help improve this page
If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the #design-systems Slack channel.