Primer / Subhead
The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
This repository is a module of the full primer repository.
$ npm install --save primer-subhead
The source files included are written in Sass (SCSS) You can simply point your sass
include-path at your
node_modules directory and import it like this.
You can also import specific portions of the module by importing those partials from the
/lib/ folder. Make sure you import any requirements along with the modules.
For a compiled CSS version of this module, an npm script is included that will output a css version to
build/build.css The built css file is also included in the npm package:
$ npm run build
The basic Subhead consists of a
.Subhead container, which has a light gray bottom border. Use
.Subhead-heading for the heading itself. It's an
<h2> sized heading with normal font-weight.
Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
To add a top margin to the Subhead, use
.Subhead--spacious. This is useful for separating sections on a settings page.
You can add a one line description to the subhead with
Subhead with descriptionThe subhead is a subdued header style with a light bottom border.
For longer descriptions, it is recommended that you use a paragraph below the Subhead.
Plain subheadThis is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have bold text. Click to learn more.
You can add a button or something to the right of
.Subhead-heading with the
Subhead with buttonActionSubhead with linkLearn more
Use all the elements together to create a Subhead with actions and a description.
Subhead with actions and descriptionActionThe subhead is a subdued header style with a light bottom border.
.Subhead-heading--danger modifier to make the text bold and red. This is useful for warning users.