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.