<svg class="c-brand 
            c-brand--resize-medium 
             
             
            " viewBox="0 0 500 50" xmlns="http://www.w3.org/2000/svg">

    <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>

</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"{% 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"/>
  {% 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": "resize-medium",
  "local": true,
  "logo": true,
  "europe": 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]`
    //
    // ========================================================================
    
    .c-brand {
    
      // Custom properties
      // ======================================================================
    
      --brand-color: var(--theme-color); 
      --brand-color-alternate: var(--theme-color);
      --brand-network: #{$ui-02}; 
      --brand-height: 1.5rem;
      
      // ======================================================================
    
      body:not([data-color-scheme*="light"]) & { 
        --brand-color-alternate: #{$inverse-01};
      }
      @media (prefers-color-scheme: dark) {
        body:not([data-color-scheme*="light"]) & { 
          --brand-color-alternate: #{$inverse-01};
        }
      }
    
      height: var(--brand-height);
      display: block;
      width: auto;
      
      //
      // Sizes
      //
    
      &--small {
        --brand-height: 1.5rem;
        max-width: 64vw;
        &.c-brand__text {
          font-size: 3.08rem;
        }
      }
    
      &--large {
        --brand-height: 3.5rem;
        &.c-brand__text {
          font-size: 4.85rem;
        }
      }
      
      &--resize-small {
        --brand-height: 1.5rem;
        &.c-brand__text {
          font-size: 2.06rem;
        }
        @include bp(xs) {
          --brand-height: 2rem;
          &.c-brand__text {
            font-size: 2.77rem;
          }
        }
      }
    
      &--resize-medium {
        --brand-height: 1.4rem;
        &.c-brand__text {
          font-size: 2.08rem;
        }
        @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;
          }
        }
      }
      
      //
      // 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);
        .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};
          @include bp(md) {
            --brand-color: var(--theme-color);
          }
        }
    
        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);
        .c-brand__text & {
          color: var(--brand-network);
        }
    
        body[data-edition*="europatoday"] & {
          --brand-network: #{$ui-01};
        }
        
        [data-color-scheme*="dark"] &,
        .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*="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};
          @include bp(md) {
            --brand-network: #{$ui-01};
          }
        }
      }
    
      &__text {
        font-family: 'NovecentoNarrow';
        font-weight: 900;
        line-height: .7;
      }
    }
    
    .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: 4 KB

Widget: - Template: v7_brand_logo Link: https://admin.previewtoday.strategy.it/widget_block/edit/id/857