Skip to main contentSkip to site searchSkip to component search
Honeycomb

Header brand

Header brand holds your logo goodness.

The header brand container holds your logo goodness and should be the first element of the header (second if you have skip links.

The alt attribute is extremely important, this is how screen reader users understand that the image is a logo, and what's the name of the product or platform, don't omit it.

The default header brand is 24px (spacing-4) tall and has a somewhat fluid width, good for most logos that are rectangular:

FlixTrain logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="160" height="24" src="/img/logos/svg/flixtrain-white.svg" alt="FlixTrain logo"/>
      </a>
    </div>
  </div>
</header>

The --tall modifier raises the brand height to 36px (spacing-6):

Flix Logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand flix-header-brand--tall">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="106" height="36" src="/img/logos/svg/flix-white.svg" alt="Flix Logo"/>
      </a>
    </div>
  </div>
</header>

You can also render square logos with the --square modifier:

Honeycomb Logo 
<header class="flix-header flix-header--unfixed">
  <div class="flix-header__inner">
    <div class="flix-header-brand flix-header-brand--square">
      <a class="flix-header-brand__link" href="/">
        <img class="flix-header-brand__img" width="36" height="36" src="/img/logos/svg/honeycomb-white.svg" alt="Honeycomb Logo"/>
      </a>
    </div>
  </div>
</header>

Why set image width and height

Setting the logo image width and height is good for performance and usability.

If you are using a big image, or an SVG image as the logo, they may be rendered super big before the browser has a chance of loading the CSS files to resize them. Predefining the width and height will tell the browser to allocate only that specific amount of space for the incoming image, reducing layout shifts during page load (very good for usability) and the impact the user device CPU (faster page rendering).