MEC Style Guide

MEC Logo With Colour

.logo--mec
.logo--mec--black
.logo--mec--white
.logo--mec--gray

This pattern contains: atoms-mec-logo-svg-as-span

HTML

									
										<ul class="sg-colors sg-logos">
    <li>
        <span class="logo--mec">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
         aria-labelledby="mec-logo-title" role="img">
                <title id="mec-logo-title">MEC</title>
                <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
            </svg>
            
        </span>
        <p>.logo--mec</p>
    </li>
    <li>
        <span class="logo--mec--black">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
         aria-labelledby="mec-logo-title" role="img">
                <title id="mec-logo-title">MEC</title>
                <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
            </svg>
            
        </span>
        <p>.logo--mec--black</p>
    </li>
    <li>
        <span class="logo--mec--white">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
         aria-labelledby="mec-logo-title" role="img">
                <title id="mec-logo-title">MEC</title>
                <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
            </svg>
            
        </span>
        <p>.logo--mec--white</p>
    </li>
    <li>
        <span class="logo--mec--gray">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
         aria-labelledby="mec-logo-title" role="img">
                <title id="mec-logo-title">MEC</title>
                <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
            </svg>
            
        </span>
        <p>.logo--mec--gray</p>
    </li>
</ul>

MEC Logo With Trademark

English

French

This pattern contains: atoms-mec-logo-svg-as-span

HTML

									
										<h6>English</h6> <span class="logo--mec">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
 aria-labelledby="mec-logo-title" role="img">
        <title id="mec-logo-title">MEC</title>
        <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
    </svg>
    <span class='logo__symbol--trademark' aria-hidden='true'></span>
</span>


<div lang="fr">
    <h6>French</h6> <span class="logo--mec">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
 aria-labelledby="mec-logo-title" role="img">
        <title id="mec-logo-title">MEC</title>
        <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
    </svg>
    <span class='logo__symbol--trademark' aria-hidden='true'></span>
</span>

</div>

MEC Logo Minimum Size

This pattern contains: atoms-mec-logo-svg-as-span

HTML

									
										<span class="logo--mec">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="56" width="56"
 aria-labelledby="mec-logo-title" role="img">
        <title id="mec-logo-title">MEC</title>
        <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
    </svg>
    <span class='logo__symbol--trademark' aria-hidden='true'></span>
</span>

MEC Logo As Span Or Link

As a Span

As a Link

This pattern contains: atoms-mec-logo-svg-as-span atoms-mec-logo-svg-as-link

HTML

									
										<h6>As a Span</h6> <span class="logo--mec">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100"
 aria-labelledby="mec-logo-title" role="img">
        <title id="mec-logo-title">MEC</title>
        <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z"/>
    </svg>
    
</span>


<h6>As a Link</h6> <a href="#" class="logo--mec">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100" aria-labelledby="mec-logo-title" role="img">
        <title id="mec-logo-title">MEC</title>
        <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z" />
    </svg>
    
</a>

MEC Logo As A Link In Container

HTML

									
										<div class="sg-nav__header--large ">
    <a href="#" class="logo--mec no-bounce">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="100" width="100" aria-labelledby="mec-logo-title" role="img">
            <title id="mec-logo-title">MEC</title>
            <path d="M0 0v60h60V0H0z M24.6 40.8H21V24.7l-0.9 4.9l-2.3 11.2h-3.5l-2.2-11.3l-0.7-4.8v16.1H7.2V18.6h5.9 l2.3 11.3l0.7 4.1l0.7-4.1l2.3-11.3h5.5V40.8z M38.4 22.2h-6.6v5.4h5.4v3.6h-5.4v6h6.6v3.6H27.6V18.6h10.8V22.2z M52.8 26.4h-3.6 v-2.5c0-1.3-0.6-2.2-2.1-2.2S45 22.6 45 23.9v11.7c0 1.3 0.6 2.2 2.1 2.2s2.1-0.9 2.1-2.2V33h3.6v2.5c0 3.4-1.9 5.8-5.8 5.8 s-6.2-2.6-6.2-6.1v-11c0-3.4 2.2-6.1 6.2-6.1s5.8 2.5 5.8 5.8V26.4z" />
        </svg>
        <span class='logo__symbol--trademark' aria-hidden='true'></span>
    </a>
</div>