Bugcrowd Design System

Bugcrowd Design System

Search/

Headings

Need Review

Last modified:

Use these heading classes set text styles for `h1` to `h6`.

ℹ️ This component competes with Display type and deserves a design review.

Back to top

Example of Headings - default

<div>
  <h1 class="bc-h1">heading handgloves 1</h1>
  <h2 class="bc-h2">heading handgloves 2</h2>
  <h3 class="bc-h3">heading handgloves 3</h3>
  <h4 class="bc-h4">heading handgloves 4</h4>
  <h5 class="bc-h5">heading handgloves 5</h5>
  <h6 class="bc-h6">heading handgloves 6</h6>
</div>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

Apply these to all headings, ideally with the corresponding class.

Use semantic markup for Headings, eg. heading tags (h1..6).

Design

Last modified:

Heading styles provide a consistent hierarchy of titles to structure and title sections.

Our Headings scale in size inversely with the heading unit size, which is built to match the corresponding HTML heading hierarchy.

Accessibility

Last modified:

Headings should use semantic markup.

Heading hierarchy levels must be sequential in nested sections, that is, a h2 and its content should not be followed by a h4 but instead a h3 if structured deeper. Meanwhile, it’s of course fine to jump “back up”, from say a h4 to a new higher-level h2 section.

Rationale

Last modified:

Headings are commonly understood way of structuring and titling sections of a page.

See also

Last modified: