Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Logo: Default 

<a class=" logo " href="#">
    <img class="logo__image" src="../../images/rehau-logo.svg" alt="">
</a>
 
<a class="{{mixes}} logo {{modifiers}}" href="{{href}}">
  {{#if src}}
    <img class="logo__image" src="{{path src}}" alt="{{alt}}">
  {{else}}
    <span class="logo__image -default-logo"></span>
  {{/if}}
  {{#if signet}}
    <span class="logo__signet">{{signet}}</span>
  {{/if}}
</a>
 
{
  "href": "#",
  "src": "/images/rehau-logo.svg"
}
  • Content: 
    /* Logo */
$root: '.logo';
$logo-width-desktop: 140px;
$logo-width-mobile: 120px;

#{$root} {
  display: inline-block;
  width: 100%;

  &__image {
    display: block;

    &.-default-logo {
      padding-top: percentage($header-logo-ratio);
      background: url($default-logo) no-repeat 50% 50%;
    }
  }

  &.-signet {
    display: inline-flex;
    width: auto;
    height: $header-logo-ratio * $logo-width-mobile;

    &:hover {
      text-decoration: none;
    }

    #{$root}__image {
      width: $logo-width-mobile;
    }

    #{$root}__signet {
      flex-grow: 1;
      padding: 12px 0 0 12px;
      font-style: $font-style-italic;
      font-weight: $font-weight-bold;
      font-size: 35px;
      color: $secondary;
    }

    // stylelint-disable-next-line order/order
    @include breakpoint(pre-large) {
      height: $header-logo-ratio * $logo-width-desktop;

      #{$root}__image {
        width: $logo-width-desktop;
      }

      #{$root}__signet {
        padding: 15px 0 0 15px;
        font-size: 42px;
      }
    }
  }
}
  • URL: /components/raw/atoms-logo/_logo.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/01-logo/_logo.scss
  • Size: 1 KB

There are no notes for this item.