Brand: Inverse

Ready

HTML
View
Context
Assets
Info
Notes


        
        <svg class="c-brand 
            c-brand--large 
            c-brand--inverse 
             
            " 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": "large",
  "local": true,
  "logo": true,
  "inverse": true
}

File:

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

Handle: @brand--inverse
Variants (5): Default , Small , Large , Inverse , Europe
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/brand/brand.njk

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