Headers & Heading Styles

Standard heading typography classes, custom display variations, and semantic accessibility rules for the Edmon Low Library design system.

Heading Hierarchy & Accessibility Rule (WCAG 2.1 AA)

Always maintain a logical document outline by nesting headings sequentially (<h1> down to <h6>) without skipping levels. If a visual design requires an <h3> to look like an <h1>, use the visual class modifier (e.g., <h3 class="heading-1">) rather than using an improper HTML tag.

Custom Heading Styles

Primary utility classes for page headings, section headers, and scannable interface elements.

Design System Heading Classes

Class Name	Visual Preview	Usage / Context
`.heading-1`	The quick brown fox	Main page title (typically applied to `<h1>`).
`.heading-2`	The quick brown fox	Secondary section titles (applied to `<h2>`).
`.heading-3`	The quick brown fox	Standard sub-section titles (applied to `<h3>`).
`.heading-3-alt`	The quick brown fox	Alternative compact style for sidebar lists and card headers.
`.heading-3-alt-emphasized`	The quick brown fox	Emphasized bold variation for highlighted UI sections.

Standard HTML & Bootstrap Utility Classes

Standard HTML heading tags and Bootstrap font-size utility classes (.h1–.h5).

Native HTML Elements & Class Overrides

Element / Class	Visual Preview	Usage / Context
`<h1>` or `.h1`	The quick brown fox	Top-most level heading.
`<h2>` or `.h2`	The quick brown fox	Major topic section heading.
`<h3>` or `.h3`	The quick brown fox	Sub-topic heading within an `<h2>` section.
`<h4>` or `.h4`	The quick brown fox	Card titles, modal titles, or sub-group headings.
`<h5>` or `.h5`	The quick brown fox	Minor content labels and list group headers.

Code Implementation Example

HTML Snippet

<!-- Main Page Title -->
<h1 class="heading-1">Special Collections &amp; University Archives</h1>

<!-- Section Header -->
<h2 class="heading-2">Featured Digital Exhibits</h2>

<!-- Card Header styled as Heading 3 Alt -->
<h3 class="heading-3-alt">Oral History Manuscripts</h3>

Headers & Heading Styles - Edmon Low Library