<div class="o-logo o-logo--sm">
      <a href="/" class="o-logo__link">
          <svg xmlns="http://www.w3.org/2000/svg" width="174" height="184" viewBox="0 0 174 184">
              <path d="M120.71,174.84c-3.74.87-7.48,1.75-11.22,2.59-9.31,2.11-18.63,4.19-27.94,6.29-.07.02-.15,0-.32,0v-18.86c-1.47-.34-2.42,0-3.38,1.22-6.17,7.86-13.85,13.67-23.58,16.39-16.82,4.69-34.08-1.6-44.28-16.04-5.46-7.73-8.53-16.36-9.56-25.72-1.61-14.71,1.23-28.51,9.27-40.98,10-15.5,24.25-24.74,42.49-27.57,9.78-1.52,19.35-.44,28.55,3.35.13.05.27.09.5.16V10.75c13.29-3.59,26.51-7.15,39.85-10.75v105.78c0,.45,0,.9.01,1.35-.05.01-.07.04-.07.09-5.36,2.38-9.86,5.93-13.44,10.53-7.34,9.43-9.81,20.08-7.28,31.76,1.72,7.93,5.74,14.64,12.03,19.79,2.57,2.11,5.56,3.71,8.35,5.55h0ZM81.22,160.02v-1.29c0-20.26-.03-40.53.04-60.79,0-2.23-.53-4.14-1.61-6.03-7-12.19-19.59-11.77-27.58-5.71-4.32,3.28-7.25,7.62-9.17,12.61-4.79,12.42-4.95,25.07-1.4,37.79,1.8,6.45,5.05,12.12,10.07,16.64,6.47,5.84,14.2,8.28,22.82,8.18,2.33-.03,4.6-.41,6.85-1.41h0Z" fill="var(--ds-color-gray-106)" />
              <path d="M121.04,107.22c0-.05.02-.08.07-.09,3.09-.94,6.14-2.15,9.3-2.76,19.27-3.69,38.38,8.87,42.54,28.04,2.9,13.38-.08,25.36-9.83,35.17-8.21,8.25-18.39,11.48-29.94,10.48-4.2-.36-8.22-1.43-12.04-3.23,0-22.2,0-44.41,0-66.61,0-.33-.06-.67-.1-1h0Z" fill="var(--ds-color-red-204)" />
              <path d="M121.04,107.22c.03.33.1.67.1,1,0,22.2,0,44.41,0,66.61-.14,0-.28.01-.42.02-2.8-1.83-5.78-3.44-8.35-5.55-6.29-5.16-10.31-11.85-12.03-19.79-2.54-11.68-.06-22.33,7.28-31.76,3.58-4.6,8.07-8.15,13.44-10.53h0Z" fill="#ad080f" />
          </svg>
      </a>
  </div>
{% set base_class = logo.base_class|default("o-logo") %}
{% if logo %}
  <div class="{{ bem(base_class, logo.element, logo.modifiers, logo.extra) }}" {{ attributes(logo.attributes) }}>
    {% if logo.link %}
      <a href="{{ logo.link }}" class="{{ bem(base_class, 'link') }}" {{ attributes(logo.link.attributes) }}>
    {% endif %}
      {% if not logo.image.src %}
        {% if "sm" in logo.modifiers %}
          <svg xmlns="http://www.w3.org/2000/svg" width="174" height="184" viewBox="0 0 174 184"><path d="M120.71,174.84c-3.74.87-7.48,1.75-11.22,2.59-9.31,2.11-18.63,4.19-27.94,6.29-.07.02-.15,0-.32,0v-18.86c-1.47-.34-2.42,0-3.38,1.22-6.17,7.86-13.85,13.67-23.58,16.39-16.82,4.69-34.08-1.6-44.28-16.04-5.46-7.73-8.53-16.36-9.56-25.72-1.61-14.71,1.23-28.51,9.27-40.98,10-15.5,24.25-24.74,42.49-27.57,9.78-1.52,19.35-.44,28.55,3.35.13.05.27.09.5.16V10.75c13.29-3.59,26.51-7.15,39.85-10.75v105.78c0,.45,0,.9.01,1.35-.05.01-.07.04-.07.09-5.36,2.38-9.86,5.93-13.44,10.53-7.34,9.43-9.81,20.08-7.28,31.76,1.72,7.93,5.74,14.64,12.03,19.79,2.57,2.11,5.56,3.71,8.35,5.55h0ZM81.22,160.02v-1.29c0-20.26-.03-40.53.04-60.79,0-2.23-.53-4.14-1.61-6.03-7-12.19-19.59-11.77-27.58-5.71-4.32,3.28-7.25,7.62-9.17,12.61-4.79,12.42-4.95,25.07-1.4,37.79,1.8,6.45,5.05,12.12,10.07,16.64,6.47,5.84,14.2,8.28,22.82,8.18,2.33-.03,4.6-.41,6.85-1.41h0Z" fill="var(--ds-color-gray-106)"/><path d="M121.04,107.22c0-.05.02-.08.07-.09,3.09-.94,6.14-2.15,9.3-2.76,19.27-3.69,38.38,8.87,42.54,28.04,2.9,13.38-.08,25.36-9.83,35.17-8.21,8.25-18.39,11.48-29.94,10.48-4.2-.36-8.22-1.43-12.04-3.23,0-22.2,0-44.41,0-66.61,0-.33-.06-.67-.1-1h0Z" fill="var(--ds-color-red-204)"/><path d="M121.04,107.22c.03.33.1.67.1,1,0,22.2,0,44.41,0,66.61-.14,0-.28.01-.42.02-2.8-1.83-5.78-3.44-8.35-5.55-6.29-5.16-10.31-11.85-12.03-19.79-2.54-11.68-.06-22.33,7.28-31.76,3.58-4.6,8.07-8.15,13.44-10.53h0Z" fill="#ad080f"/></svg>
        {% else %}
          <svg xmlns="http://www.w3.org/2000/svg" width="110.49" height="50" viewBox="0 0 110.49 50"><path d="M91.9,13.21c1.38,0,2.54-1.11,2.54-2.51s-1.16-2.51-2.54-2.51-2.54,1.11-2.54,2.51,1.16,2.51,2.54,2.51ZM25.93,44.62c-1.49,0-2.65,1.14-2.65,2.62s1.16,2.65,2.65,2.65,2.65-1.14,2.65-2.65-1.16-2.62-2.65-2.62Z" fill="var(--ds-color-red-204)"/><path d="M15.07,15.73c0-7.35-9.66-4.94-9.66-8.51,0-1.35,1.03-2.19,2.35-2.19,1.43,0,2.33,1,2.71,2.16l4-1.49c-.89-2.65-3.35-4.35-6.55-4.35C3.87,1.35,1.17,4.19,1.17,7.51c0,7.13,9.58,4.54,9.58,8.43,0,1.68-1.3,2.73-3.03,2.73-1.84,0-3.19-1.27-3.65-3.22l-4.06,1.3c.76,3.4,3.79,5.62,7.57,5.62,4.14,0,7.49-2.81,7.49-6.65ZM24.84,8.49h-2.73v-4.41h-4.11v4.41h-2.06v3.54h2.06v10.03h4.11v-10.03h2.73v-3.54ZM36.74,10.11c-.81-1.05-2.35-1.95-4.22-1.95-3.71,0-6.71,3.05-6.71,7.11s3,7.11,6.71,7.11c1.87,0,3.41-.89,4.22-1.95v1.62h4.11v-13.57h-4.11v1.62ZM33.39,18.84c-2,0-3.49-1.54-3.49-3.57s1.49-3.57,3.49-3.57,3.46,1.54,3.46,3.57-1.49,3.57-3.46,3.57ZM56.41,22.05v-8.92c0-2.95-1.87-4.97-4.87-4.97-1.79,0-3.14.84-3.95,1.89v-1.57h-4.11v13.57h4.11v-7.46c0-1.59.92-2.76,2.44-2.76s2.27,1.03,2.27,2.43v7.78h4.11ZM60.14,5.19v3.3h-1.98v3.54h1.98v10.03h4.11v-10.03h3.03v-3.54h-3.03v-3.05c0-1.24.76-1.86,1.89-1.86.49,0,.87.08,1.27.27V.32c-.51-.22-1.19-.32-2.03-.32-3.19,0-5.25,2.03-5.25,5.19ZM75.43,22.38c3.95,0,7.3-3.03,7.3-7.11s-3.35-7.11-7.3-7.11-7.33,3.03-7.33,7.11,3.38,7.11,7.33,7.11ZM75.43,11.7c1.97,0,3.46,1.54,3.46,3.57s-1.49,3.57-3.46,3.57-3.49-1.54-3.49-3.57,1.49-3.57,3.49-3.57ZM88.6,8.49h-4.11v13.57h4.11v-13.57ZM106.38.27v9.84c-.78-1.05-2.33-1.95-4.19-1.95-3.71,0-6.71,3.05-6.71,7.11s3,7.11,6.71,7.11c1.87,0,3.41-.89,4.19-1.95v1.62h4.11V.27h-4.11ZM103.02,18.84c-1.97,0-3.46-1.54-3.46-3.57s1.49-3.57,3.46-3.57,3.49,1.54,3.49,3.57-1.49,3.57-3.49,3.57ZM17.95,37.73c-.78-1.05-2.33-1.95-4.19-1.95-3.71,0-6.71,3.05-6.71,7.11s3,7.11,6.71,7.11c1.87,0,3.41-.89,4.19-1.95v1.62h4.11v-21.78h-4.11v9.84ZM14.6,46.46c-1.98,0-3.46-1.54-3.46-3.57s1.49-3.57,3.46-3.57,3.49,1.54,3.49,3.57-1.49,3.57-3.49,3.57ZM34.32,39.95c0-.65.54-1.11,1.22-1.11.78,0,1.3.46,1.51,1.3l3.54-.89c-.62-2.11-2.52-3.46-5-3.46-3,0-5.03,2.05-5.03,4.4,0,4.97,6.41,3.35,6.41,5.46,0,.84-.68,1.27-1.49,1.27-.97,0-1.81-.62-2.14-1.76l-3.49,1.05c.6,2.41,3.06,3.78,5.57,3.78,2.73,0,5.36-1.78,5.36-4.57,0-5.08-6.47-3.49-6.47-5.49h0ZM45.95,42.89c0-2.11,1.65-3.49,3.52-3.49,1.14,0,1.92.35,2.6.92v-4c-.84-.35-1.73-.54-2.81-.54-3.9,0-7.25,3-7.25,7.11s3.35,7.11,7.25,7.11c1.08,0,1.97-.19,2.84-.54v-4c-.7.54-1.49.92-2.62.92-1.87,0-3.52-1.38-3.52-3.49h0ZM62.19,35.79c-1.79,0-3.14.84-3.95,1.89v-9.78h-4.11v21.78h4.11v-7.46c0-1.59.92-2.76,2.44-2.76s2.27,1.03,2.27,2.43v7.78h4.11v-8.92c0-2.95-1.87-4.97-4.87-4.97h0ZM76.06,35.79c-3.95,0-7.33,3.03-7.33,7.11s3.38,7.11,7.33,7.11,7.3-3.03,7.3-7.11-3.35-7.11-7.3-7.11ZM76.06,46.46c-2,0-3.49-1.54-3.49-3.57s1.49-3.57,3.49-3.57,3.46,1.54,3.46,3.57-1.49,3.57-3.46,3.57ZM92.11,35.79c-3.95,0-7.33,3.03-7.33,7.11s3.38,7.11,7.33,7.11,7.3-3.03,7.3-7.11-3.35-7.11-7.3-7.11ZM92.11,46.46c-2,0-3.49-1.54-3.49-3.57s1.49-3.57,3.49-3.57,3.46,1.54,3.46,3.57-1.49,3.57-3.46,3.57ZM105.28,27.89h-4.11v21.78h4.11v-21.78Z" fill="var(--ds-color-gray-106)"/></svg>
        {% endif %}
      {% else %}
        <img src="{{ logo.image.src }}" alt="{{ logo.image.alt }}" />
      {% endif %}
    {% if logo.link %}
      </a>
    {% endif %}
  </div>
{% endif %}
{
  "logo": {
    "link": "/",
    "modifiers": "sm"
  }
}
  • Content:
    /* ------------------------------------ *\
      $LOGO
    \* ------------------------------------ */
    
    .o-logo {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    
      img,
      svg {
        width: 100%;
        height: auto;
        min-width: 100%;
        min-height: 45px;
        max-height: 45px;
    
        @include media(">xlarge") {
          min-height: 50px;
          max-height: 50px;
        }
    
        @include media(">xxlarge") {
          min-height: 60px;
          max-height: 60px;
        }
      }
    
      &__link {
        display: block;
      }
    
      &--sm {
        img,
        svg {
          min-height: 100px;
          max-height: 100px;
    
          @include media(">xxlarge") {
            min-height: 130px;
            max-height: 130px;
          }
        }
      }
    
      &--inverted {
        --ds-color-gray-106: white;
      }
    }
    
  • URL: /components/raw/logo/_logo.scss
  • Filesystem Path: components/01-atoms/logo/_logo.scss
  • Size: 751 Bytes

No notes defined.