We use necessary cookies to make our website work. We'd also like to use optional cookies to understand how you use it, and to help us improve it.

For more information, please read our cookie policy.

Banner image

Example

Markup

                        
<div class="m-header__banner">
<img class="m-header__banner-image" src="/media/0pyhto5a/landscape-sky-clouds.jpg?crop=0,0.60322916666666671,0,0.16239583333333332&amp;cropmode=percentage&amp;width=1920&amp;height=300&amp;rnd=132562208439930000" alt="">
</div>
                            
                        

Guidance

  • The banner is purely decorative - it doesn't add information to the page. Set the alternative text attribute to "".

Logo

Example

Markup

                        
<a href="#"><img class="m-header__logo" src="/images/logo/logo.svg" alt="UK Civil Aviation Authority - Home" width="70" height="89"></a>
                            
                        

Guidance

  • Always use SVG format for logos, where available.
  • The alternative text should be descriptive of the link destination when the logo is used as a link e.g. "UK Civil Aviation Authority - Home", instead of "UK Civil Aviation Authority logo".