Minimal header

This is a minimal header that is used for WAI tools that exist outside the main WAI website. Such tools commonly don’t require full WAI navigation or functionality like search.

Used by

This component is used by:

ATAG Report Tool
WCAG EM Report Tool (2020 rebuild)
WCAG Supporting Documents redesign project

Examples

Example 1: ATAG Report Tool

Example 2: WCAG EM Report Tool

Example 3: WCAG Techniques

Code

Embedding a header in a Liquid template:

{% include minimal-header.html
   title="ATAG Report Tool"
%}

Embedding a header as HTML:

HTML

<header class="minimal-header" id="site-header">
  <div class="minimal-header-container">
    <div class="minimal-header-name">
      
          ATAG Report Tool
        
    </div>
    
  </div>
  
  <div class="minimal-header-logo">
    <a href="/">
      <img alt="W3C" src="/assets/images/w3c2.svg" width="92" height="44"/>
      <img alt="Web Accessibility Initiative" src="/assets/images/wai.svg"/>
    </a>
  </div>
</header>

Parameters

title="ATAG Report Tool": Name of the tool
class="with-subtitle" subtitle="powered by WAI": Add a subtitle underneath the title