GDL - Global Design Language

Brand: Inverse 

<svg class="c-brand 
  c-brand--large 
  c-brand--inverse 
   
  " viewBox="0 0 233 50" xmlns="http://www.w3.org/2000/svg">

    <path d="M0 50V0h105.4v50H0Z" fill="#fff" />
    <path d="M58.5 27.3h-3.9v9.3h4.1c2.8 0 4.1-1.7 4.1-4.6 0-3-1.7-4.7-4.3-4.7ZM85.5 13.2c-4 0-6 3-6 11.7 0 8.8 2 12 6 12s6.1-3 6.1-12c0-8.9-2-11.7-6-11.7ZM61.7 17.3c0-2.5-1.3-4-3.7-4h-3.4v8h3.5c2 0 3.6-1.4 3.6-4Z" fill="#E31D57" />
    <path d="M0 0v50h105.4V0H0Zm19.8 36.8c3.2 0 4.5-2.1 5.4-5.3l6.7 1.9c-1.6 6.2-4.7 10.4-12.2 10.4-8.2 0-13.5-5.2-13.5-19S11.3 6.2 19.7 6.2c6.5 0 11 3 12.3 11.1l-6.7 1.8c-.5-2.5-1.5-6-5.4-6-4.3 0-6 3.6-6 11.5 0 9.1 2 12.2 5.9 12.2ZM42.7 43h-7.4V7h7.4V43ZM59 43H47.4V7h11.2c6.3 0 10 3.5 10 9.5 0 4.4-2.7 7-5 7.4v.2c3 .7 6.5 3 6.5 8.9 0 6.5-3.3 10.1-11 10.1Zm26.5.8c-8.5 0-13.6-5.4-13.6-19 0-13.4 5.1-18.6 13.6-18.6 8.6 0 13.7 5 13.7 18.7 0 13.6-5.1 18.9-13.7 18.9Z" fill="#E31D57" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M144.7 6.3c8.3 0 13.3 5 13.3 18.8s-5 18.7-13.3 18.7-13.1-5-13.1-18.8c0-14 4.9-18.7 13.1-18.7Zm70.8.6 3.4 10 1.3 4.3h.2l1.4-4.3 3.4-10h7.7l-9 23.3v13h-7.6v-13L207.1 7h8.4Zm-82.1 0v2.5a12.9 12.9 0 0 0-2.9 4.7h-4.4v29h-7.5v-29h-7.3V7h22.1Zm38.8 0c9.2 0 13.3 6.9 13.3 18.3s-3.8 18-13 18H161V6.8h11.2Zm31.3 0 7.6 36.2h-7.9l-1-6.3H194l-1 6.3h-7.7L193 7h10.6Zm-58.7 6.6c-3.8 0-5.6 2.7-5.6 11.4 0 8.8 1.8 11.7 5.6 11.7 3.7 0 5.5-2.6 5.5-11.5 0-8.8-1.9-11.6-5.5-11.6Zm26.7.6h-3V36h3c4.1 0 6.4-2.7 6.4-10.5 0-8.7-2.3-11.3-6.4-11.3Zm26.7 0h-.3l-1 6.6-1.7 9.1h5.7l-1.6-9-1.1-6.7Z" class="c-brand__network" />

</svg>
 
{% if logo %}
<svg class="c-brand 
  {% if modifier %}c-brand--{{modifier}}{% endif %} 
  {% if inverse %}c-brand--inverse{% endif %} 
  {% if alternate %}c-brand--alternate{% endif %} 
  {% if shadow %} u-svg-shadow{% endif %}"
  {% if local %}viewBox="0 0 500 50"{% elif europe %}viewBox="0 0 361 50"{% elif cibo %} viewBox="0 0 233 50" {% else %}viewBox="0 0 170 50"{% endif %} 
  xmlns="http://www.w3.org/2000/svg">
  
  {% if local %}
    <path d="M22.5 40.6l1.5 8.5h10.5L24.5.9H10L0 49.1h10.2l1.4-8.5h10.9zM278.3 0c11 0 17.7 6.6 17.7 25 0 18.3-6.6 25-17.7 25-11 0-17.7-6.5-17.7-25 0-18.3 6.6-25 17.7-25zM53.2 0c9.7 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.4-6.8-4.6 0-6.8 4-6.8 14.5 0 11.9 2.5 16.3 7.8 16.3 4 0 5.8-2.2 6.3-4.3v-4.8h-7v-9.5h16.4V49h-9.2v-3h-.2a11 11 0 01-8.6 3.6c-8.3 0-15.9-5.7-15.9-25C35.6 6.2 42.6 0 53.2 0zm86.7 0c9.8 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.3-6.8-4.7 0-7 4-7 14.5 0 11.9 2.6 16.3 8 16.3 3.9 0 5.7-2.2 6.3-4.3v-4.8h-7v-9.5h16.3V49h-9.1v-3h-.2a11 11 0 01-8.6 3.6c-8.4 0-16-5.7-16-25 0-18.6 7-24.7 17.6-24.7zM89.1.9c9.5 0 14.4 6.5 14.4 15.9 0 5.9-2.2 10.5-6.5 12.7l7.6 19.6H93.3l-6-17.4-1.4.1h-1.4v17.3h-10V.9zm29.1 0v48.2h-10V.9h10zm69.3 0v9.6h-16.3v9.3h12.2V29h-12.2v10.4H188V49h-26.7V.9h26.3zm15.2 0l12.9 28h.2V.9h9.6v48.2h-10.2l-12.9-27h-.2v27h-9.6V.9h10.2zm56.2 0v9.6h-9.8V49h-10V10.5h-9.8V.9h29.6zm19.4 8.7c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5zm-261.1.8l1.5 9 2.1 12h-7.5l2.1-12.1 1.5-8.9h.3zm71.2 0h-4v13h4.2c2.9 0 4.8-2 4.8-6.5 0-4-1.7-6.5-5-6.5z" class="c-brand__edition"></path>
    <path d="M356.8 0c11 0 17.8 6.6 17.8 25 0 18.3-6.6 25-17.8 25-11 0-17.8-6.5-17.8-25 0-18.3 6.7-25 17.8-25zm-44.6.9l13 28h.1V.9h9.6v48.2h-10.2l-12.9-27h-.2v27H302V.9h10.2zm93.8 0v9.6h-10V49h-10V10.5h-9.9V.9H406zm14 0v48.2h-10.1V.9h10zm33 0V11l-13.4 22.2-3.7 6 .1.3h17.2v9.6h-28.7v-9.7L438.8 16l3.3-5.4-.1-.2h-17V.9h28zm14.9 0v48.2h-10.1V.9h10zm31.8 0v9.6h-16.4v9.3h12.2V29h-12.2v10.4H500V49h-26.8V.9h26.5zM356.8 9.6c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5z" class="c-brand__network"></path>
  {% elif europe %}
    <path d="M224.6 10.5h-6V49h-9.8V10.5H199V.9h29.4v3.3a17 17 0 00-3.8 6.3zm1.4 14.4C226 6.7 232.5 0 243.5 0s17.7 6.6 17.7 25c0 18.3-6.6 25-17.7 25-10.9 0-17.5-6.5-17.5-25zm10.2 0c0 11.9 2.4 15.5 7.4 15.5 4.9 0 7.3-3.5 7.3-15.3 0-12-2.4-15.5-7.3-15.5-5 0-7.4 3.6-7.4 15.3zm29-24h14.9c12.3 0 17.8 9 17.8 24.3 0 15-5.2 23.9-17.4 23.9h-15.2V.9zm10 38.6h4c5.5 0 8.5-3.7 8.5-14 0-11.6-3-15-8.4-15h-4v29zm44.8 1.1h-10.8l-1.4 8.5h-10.1l10-48.2H322l10 48.2h-10.4l-1.5-8.5zm-1.6-9.3l-2.2-12-1.5-8.9h-.2l-1.5 8.9-2.2 12h7.6zm30.5.6V49h-10V31.9L326.6.9H338l4.4 13.2 1.8 5.8h.3l1.8-5.7L350.8.9H361l-12 31z" class="c-brand__network"/>
    <path d="M0 49h27.7v-9.5h-18V29.1h13v-9.3h-13v-9.5h17.6V1H0v48zM63.1.9h-9.4v31.8c0 5.3-1.9 8-6.4 8-4.7 0-6.4-2.7-6.4-8V1H31v31c0 12.3 5.6 18 16.4 18C57.5 50 63 44.3 63 32.1V1zm25.4 48L82 31.6h-4.5V49H68V.9h14.7C92.8.9 98 7 98 16.3c0 6.8-2.9 11.2-7.2 13l8 19.7H88.6zm-11-25.2H82c3.9 0 6-2.3 6-6.7 0-4.6-2-6.8-6.2-6.8h-4.3v13.5zm22.2 1.1C99.7 6.7 106.5 0 117.9 0c11.4 0 18.3 6.7 18.3 24.8 0 18-6.9 25.2-18.3 25.2s-18.2-7.2-18.2-25.2zm10.2.1c0 12 2.6 15.8 8 15.8s8.2-4 8.2-15.8c0-11.7-2.8-15.6-8.2-15.6-5.4 0-8 4-8 15.6zm29.7-24h14C162.8.9 169 6.4 169 17c0 10.2-6.1 15.9-15.4 15.9h-4.2v16h-9.8V.9zm9.8 23.7h4c4 0 6-2.5 6-7.3s-1.8-7.2-6-7.2h-4v14.5zm40.8 14.8h-12.8l-1.9 9.6H166L177 .9h14l11.1 48h-10l-1.8-9.5zm-1.7-8.5l-2-9.3-2.6-13.2h-.3l-2.7 13.3-1.8 9.2h9.4z" class="c-brand__edition"/>
  {% elif cibo %}
    <path d="M0 50V0h105.4v50H0Z" fill="#fff"/>
    <path d="M58.5 27.3h-3.9v9.3h4.1c2.8 0 4.1-1.7 4.1-4.6 0-3-1.7-4.7-4.3-4.7ZM85.5 13.2c-4 0-6 3-6 11.7 0 8.8 2 12 6 12s6.1-3 6.1-12c0-8.9-2-11.7-6-11.7ZM61.7 17.3c0-2.5-1.3-4-3.7-4h-3.4v8h3.5c2 0 3.6-1.4 3.6-4Z" fill="#E31D57"/>
    <path d="M0 0v50h105.4V0H0Zm19.8 36.8c3.2 0 4.5-2.1 5.4-5.3l6.7 1.9c-1.6 6.2-4.7 10.4-12.2 10.4-8.2 0-13.5-5.2-13.5-19S11.3 6.2 19.7 6.2c6.5 0 11 3 12.3 11.1l-6.7 1.8c-.5-2.5-1.5-6-5.4-6-4.3 0-6 3.6-6 11.5 0 9.1 2 12.2 5.9 12.2ZM42.7 43h-7.4V7h7.4V43ZM59 43H47.4V7h11.2c6.3 0 10 3.5 10 9.5 0 4.4-2.7 7-5 7.4v.2c3 .7 6.5 3 6.5 8.9 0 6.5-3.3 10.1-11 10.1Zm26.5.8c-8.5 0-13.6-5.4-13.6-19 0-13.4 5.1-18.6 13.6-18.6 8.6 0 13.7 5 13.7 18.7 0 13.6-5.1 18.9-13.7 18.9Z" fill="#E31D57"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M144.7 6.3c8.3 0 13.3 5 13.3 18.8s-5 18.7-13.3 18.7-13.1-5-13.1-18.8c0-14 4.9-18.7 13.1-18.7Zm70.8.6 3.4 10 1.3 4.3h.2l1.4-4.3 3.4-10h7.7l-9 23.3v13h-7.6v-13L207.1 7h8.4Zm-82.1 0v2.5a12.9 12.9 0 0 0-2.9 4.7h-4.4v29h-7.5v-29h-7.3V7h22.1Zm38.8 0c9.2 0 13.3 6.9 13.3 18.3s-3.8 18-13 18H161V6.8h11.2Zm31.3 0 7.6 36.2h-7.9l-1-6.3H194l-1 6.3h-7.7L193 7h10.6Zm-58.7 6.6c-3.8 0-5.6 2.7-5.6 11.4 0 8.8 1.8 11.7 5.6 11.7 3.7 0 5.5-2.6 5.5-11.5 0-8.8-1.9-11.6-5.5-11.6Zm26.7.6h-3V36h3c4.1 0 6.4-2.7 6.4-10.5 0-8.7-2.3-11.3-6.4-11.3Zm26.7 0h-.3l-1 6.6-1.7 9.1h5.7l-1.6-9-1.1-6.7Z" class="c-brand__network"/>
  {% else %}
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#brand-logo"></use>
  {% endif %}
</svg>
{% else %}
<style>
  @font-face {
    font-family: 'NovecentoNarrow';
    src:  url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"), 
          url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
    font-style: normal;
    font-display: swap; 
  }
</style>

<div class="c-brand c-brand__text u-uppercase u-no-underline {% if modifier %}c-brand--{{modifier}}{% endif %} {% if inverse %}c-brand--inverse{% endif %} {% if alternate %}c-brand--alternate{% endif %}">
  <span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
</div>
{% endif %}
 
{
  "modifier": "large",
  "cibo": true,
  "logo": true,
  "inverse": true
}
  • Content: 
    // Name:            Brand 
// Description:     Brand logo used across website
//
// Component:       `c-brand`
//
// Variants:        `c-brand--small`
//                  `c-brand--large`
//                  `c-brand--resize-small`
//                  `c-brand--resize-medium`
//                  `c-brand--inverse`
//                  `c-brand--alternate`
//
// Dependencies:    `settings/color.tokens`
// 									`themes/[theme-file]`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;

.c-brand {

  // Custom properties
  // ======================================================================

  --brand-color: var(--theme-color); 
  --brand-color-alternate: var(--theme-color);
  --brand-network: #{$ui-02}; 
  --brand-height: 1.5rem;
  display: block;

  height: var(--brand-height);
  width: auto;
  @media (prefers-color-scheme: dark) {
    body:not([data-color-scheme*="light"]) & { 
      --brand-color-alternate: #{$inverse-01};
    }
  }

  @if $layout!=amp{
    &--large {
      --brand-height: 3.5rem;
      &.c-brand__text {
        font-size: 4.85rem;
      }
    }
  
    &--resize-small {
      --brand-height: 1.5rem;
      
      @include bp(xs) {
        --brand-height: 2rem;
        &.c-brand__text {
          font-size: 2.77rem;
        }
      }

      &.c-brand__text {
        font-size: 2.06rem;
      }
    }  

    &--resize-medium {
      --brand-height: 1.4rem;
        @include bp(xs) {
          --brand-height: 2rem;
          &.c-brand__text {
            font-size: 2.76rem;
          }
        }
        @include bp(md) {
          --brand-height: 3.25rem;
          &.c-brand__text {
            font-size: 4.5rem;
          }
        }
        &.c-brand__text {
          font-size: 2.08rem;
        }
      
    }
  }
  
  @if $layout!=amp{
    &__text {
      font-family: 'NovecentoNarrow';
      font-weight: 900;
      line-height: .7;
    }
  }
  
  // ======================================================================

  body:not([data-color-scheme*="light"]) & { 
    --brand-color-alternate: #{$inverse-01};
  }
  
  body:not([data-homepage]) .c-menu & {
    display: none;
  }
  //
  // Sizes
  //

  &--small {
    --brand-height: 1.5rem;
    max-width: 64vw;
    @if $layout!=amp{
      &.c-brand__text {
        font-size: 3.08rem;
      }
    }
  }
  
  //
  // Styles
  //

  &--inverse {
    fill: $ui-01;
    color: $ui-01;
  }

  &--alternate {
    fill: var(--brand-color-alternate);
    color: var(--brand-color-alternate);;
  }

  // Set default style for locals logo edtion

  &__edition {
    fill: var(--brand-color);
    
    @if $layout!=amp{
      .c-brand__text & {
        color: var(--brand-color);
      }
    }
    // Set brand-color to white with brand--inverse modifier

    .c-brand--inverse & {
      --brand-color: #{$ui-01};
    }

    // Assign theme-color variable from tablet and up devices

    .c-header:not(.c-header--inverse) & {
      --brand-color: #{$ui-01};
      @if $responsive-breakpoints {
        @include bp(md) {
          --brand-color: var(--theme-color);
        }
      }
    }


    body[data-edition*="europatoday"] .c-menu__brand &,
    body[data-edition*="europatoday"] .c-footer &,
    body[data-edition*="europatoday"] .c-header:not(.c-header--inverse) & {
      --brand-color: #{$color-europe};
    }
  }

  &__network {
    fill: var(--brand-network);
    @if $layout!=amp{
      .c-brand__text & {
        color: var(--brand-network);
      }
    }

    body[data-edition*="europatoday"] & {
      --brand-network: #{$ui-01};
    }
    
    .c-menu &,
    [data-color-scheme*="dark"] &,
    .c-header--wide-transparent &,
    .c-footer & {
      --brand-network: #{$ui-01};
    }

    // [data-channel*="/speciale/"] &,
    [data-model*="sponsor"] &,
    [data-color-scheme*="dark"][data-channel="/speciale/"][data-model*="sponsor"] & {
      --brand-network: #{$ui-01};
      fill: #{$ui-01};
    }

    body[data-model="show"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-model*="video"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-channel*="/foto/"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-channel*="/video/"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-color-scheme*="dark"]:not(body[data-edition*="europatoday"]) .c-header:not(.c-header--inverse) & {
      --brand-network: #{$ui-02};
      @if $responsive-breakpoints {
        @include bp(md) {
          --brand-network: #{$ui-01};
        }
      }
    }
  }
}

.c-brand-cn {
  fill: var(--background-color-muted-alpha);
  
  .c-menu & {
    fill: #{rgba($ui-01, .5)};
  }
}
  • URL: /components/raw/brand/brand.scss
  • Filesystem Path: src/lib/components/brand/brand.scss
  • Size: 5 KB

Brand

Brand component is used to display brand logo used across website.

Variations

Possible variations:

  • Default - for a default brand
  • Small - for a small size brand
  • Large - for a large size brand
  • Inverse - for a inverse brand
  • Europe - for a Europa brand

Template

v7_brand_logo

Link: https://admin.previewtoday.strategy.it/widget_block/edit/id/857

Usage

Render brand

In order to display a brand component use following syntax:

  1. for a default brand:
  {% render "@brand--default" %}
  1. for a small brand:
  {% render "@brand--small" %}
  1. for a large brand:
  {% render "@brand--large" %}
  1. for a inverse brand:
  {% render "@brand--inverse" %}
  1. for a europe brand:
  {% render "@brand--europe" %}