City of Ghent Style Guide

Logo

General

  • Clicking the logo takes you back to the homepage.
  • The logo is positioned in the most familiar placement: top left.
  • The default cyan logo is used for corporate communication, international communication and internal communication.
  • The styleguide dark gray logo can be used as an alternative. Third option is the black & white logo. 8 secondary styleguide colors can be used. These colors can’t be claimed.
  • A translated logo is available in English, Spanish and French. The German logo is the same as the Dutch

Logo 

<a href="#" title="Home" class="site-logo {{ type }}" rel="home">
  {{ site_name }}
</a>
 
<!-- Default -->
<a href="#" title="Home" class="site-logo " rel="home">
    Stad.gent
</a>


<!-- Subsite -->
<a href="#" title="Home" class="site-logo subsite" rel="home">
    ICT supplier District09
</a>


/* Default */
{
  "site_name": "Stad.gent"
}


/* Subsite */
{
  "site_name": "ICT supplier District09",
  "type": "subsite"
}
  • Content: 
    a.site-logo {
  @include reset-link-background;
  @include theme('color', 'color-tertiary', 'default-text-color');
  display: inline-flex;
  align-items: center;
  font-size: 0;

  &::before {
    @include spot-image('logo', 80px);
    width: 63.3px;
    height: 44px;
    margin-left: 0;

    .is-frontpage & {
      width: 63.3px;
      height: 44px;

      @include desktop {
        width: 92px;
        height: 64px;
      }
    }
  }

  &:hover,
  &:focus {
    background-color: transparent;
  }

  &.subsite {
    @include tablet {
      font-size: .9rem;
    }

    &::before {
      @include tablet {
        margin-right: 14px;
      }
    }
  }
}
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: components/21-atoms/logo/_logo.scss
  • Size: 659 Bytes