Atomia Pattern Library

Logotype

The brand logo as used in e.g. the main navigation bar.

Use the $logo-path variable to set an SVG image to use for the logo.

Use the $logo-label variable to set the hidden text label.

Below is the default logo without context dependent positioning.

<div style="background-color: #C90062; width: 10rem;">
    <span class="Logo"><span class="Logo-label"></span></span>
</div>

Use this for the alternative logo, in our case with inverted colors

Logo--alt

Navigation bar logo

<span class="Logo Logo--alt"><span class="Logo-label"></span></span>

Use this for the logo placed in the default NavBar--apps component

Logo--nav

Navigation bar logo

<div class="NavBar NavBar--apps">
    <span class="Logo [modifier class]"></span>
</div>