Logo

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>
<!-- 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', 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