Example of Display Type - default
<div> <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> </div>
React documentation
Last modified:
ℹ️ This feature doesn’t have a corresponding React component yet.
HTML
Last modified:
Display type should use or be wrapped by semantic markup, eg. heading tags (h1..6).
Design
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).
Accessibility
Last modified:
See HTML guidance.
Double-check type sizing when printing.
Rationale
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: