Briefs / Mock U · Component Library / U-02 · Headings

Headings — the typography primitive

SNIPPET BLOCK LIVE
snippets/heading.liquid
blocks/heading.liquid

The Headings component is the typography primitive every other component leans on. It separates semantic level (which h1–h6 tag is rendered, for screen readers and document outline) from visual size (how big it looks), so a page can have an h2 that visually reads as display, or an h3 that's quietly compact. The same component ships as a snippet for use inside other sections ({% render 'heading', ... %}) and as a block for composition inside Flexible Columns or Flexible Rows.

§ 01Configure the heading. See it render.

Settings
Semantics
Choose for screen readers and outline. Visual size is set separately below — a h2 can read as display, an h3 can read as small.
Optional. Renders as id="..." for deep-link targeting and in-page TOC.
Typography
Use serif_italic for editorial accent. Inside the heading text itself, wrap a phrase in <em> to mix serif italic with sans.
Layout
Content
Small uppercase label above heading. Leave blank to hide.
Allows inline <em>...</em> for serif italic emphasis.
Optional supporting text below heading. Leave blank to hide.
Live preview

§ 02Schema & rendered HTML.

Block schema (JSON) 

        

        

          

            Rendered HTML
            
          

          

        

      

    

  


  


  
  

    

      
§ 03The snippet's Liquid.


      

        

          snippets/heading.liquid
          
        

        

      

    

  


  


  
  

    

      
§ 04Use, accessibility, related components.


      

        

          
When to use which size

          
display — once per page, top of hero or landing sections.

          
hero — homepage feature blocks, marketing headers.

          
large — default section title. Use for most h2s.

          
medium — sub-section dividers, card titles.

          
small — sidebar labels, sticky-nav items.

          
compact — minor headings, footer column titles.

        

        

          
Accessibility · WCAG 2.2 AA

          
    
            
  • Always honour the document outline — pick level for the page's
              heading hierarchy, not for size. Skipping levels (e.g. h1 →
              h3) breaks navigation for screen-reader users.
    • 
            
  • The kicker is decorative; the heading text is the real label.
              The kicker uses <span>, not a heading tag.
    • 
            
  • The rule under the heading carries no meaning — rendered with
              aria-hidden="true".
    • 
            
  • Inverted and brand tones meet WCAG AA on the matching backgrounds
              (paper-on-ink ≥ 14.2:1; paper-on-navy ≥ 8.6:1).
    • 
            
  • If anchor_id is set, ensure it's unique on the page — duplicate ids
              break focus management for in-page links.
    • 
          

        

        

          
Related components

          
    
            
  • U-01 Section — uses Headings internally for its built-in title.
              Set show_title: false on a Section if you want to compose with a
              standalone Heading block instead.
    • 
            
  • U-03 Hero — uses display + hero sizes by default.
    • 
            
  • U-04 Flexible Columns · U-05 Flexible Rows — Heading
              is one of the block types these containers accept.
    • 
            
  • U-06 Text — pairs with Headings for body copy under a section
              title. Headings handles the title; Text handles the prose.
    •