Display Type

Need Review

Last modified:

Use these display type classes to arbitrarily size text at display sizes.

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

Example of Display Type - default

  <h6 class="bc-display-type-1">h6 display type 1</h6>
  <h6 class="bc-display-type-2">h6 display type 2</h6>
  <h6 class="bc-display-type-3">h6 display type 3</h6>
  <h6 class="bc-display-type-4">h6 display type 4</h6>
  <h6 class="bc-display-type-5">h6 display type 5</h6>
  <h5 class="bc-display-type-6">h5 display type 6</h5>
  <h4 class="bc-display-type-7">h4 display type 7</h4>
  <h3 class="bc-display-type-8">h3 display type 8</h3>
  <h2 class="bc-display-type-9">h2 display type 9</h2>
  <h1 class="bc-display-type-10">h1 display type 10</h1>
  <span class="bc-display-type-1">span display type 1</span>
  <span class="bc-display-type-2">span display type 2</span>
  <span class="bc-display-type-3">span display type 3</span>
  <span class="bc-display-type-4">span display type 4</span>
  <span class="bc-display-type-5">span display type 5</span>
  <span class="bc-display-type-6">span display type 6</span>
  <span class="bc-display-type-7">span display type 7</span>
  <span class="bc-display-type-8">span display type 8</span>
  <span class="bc-display-type-9">span display type 9</span>
  <span class="bc-display-type-10">span display type 10</span>

React documentation

Last modified:

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


Last modified:

Display type should use or be wrapped by semantic markup, eg. heading tags (h1..6).


Last modified:

These classes scale up in font-size in relation to their class names; the bigger the number, the larger the font-size (from 1 to a cap of 10).


Last modified:

See HTML guidance.

Double-check type sizing when printing.


Last modified:

Display type are historically purpose-built for large sizes, eg. store fronts or in newspaper title pages.

📝 Display type were intentionally scaled inversely to Headings. (This comes from its print-world association, but it’s confusing and probably deserves review.)

See also

Last modified: