City of Ghent Style Guide - Version 3.1.1

Logo: Subsite

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
<a href="#" title="Home" class="site-logo {{ type }}" rel="home">
  {{ site_name }}
</a>
 
<a href="#" title="Home" class="site-logo subsite" rel="home">
    ICT supplier Digipolis Gent
</a>
 
{
  "site_name": "ICT supplier Digipolis Gent",
  "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', 4rem);
    min-width: 4rem;
    height: 3rem;
  }

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

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

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