GDL - Global Design Language

Brand: Sprite 

<svg style="position: absolute; width: 0; height: 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="brand-logo">
        <path d="M29.7 4.6V1.4H.5v9.3h9.7v38H20v-38h5.9c1-2.5 2.2-4.5 3.8-6zm119 27.2l12-30.4h-10l-4.6 13-1.8 5.6h-.2l-1.8-5.7-4.4-13h-11.1l12.1 30.5v16.8h9.9V31.8zM27.3 24.9c0 18.2 6.6 24.6 17.4 24.6 11 0 17.4-6.6 17.4-24.4C62 7 55.5.5 44.6.5 33.7.5 27.2 7 27.2 24.9zm10.2 0c0-11.5 2.3-15 7.3-15 4.8 0 7.2 3.5 7.2 15.2 0 11.6-2.4 15-7.2 15-5 0-7.3-3.5-7.3-15.2zM66 1.4v47.2h15c12.1 0 17.2-8.7 17.2-23.4 0-15-5.4-23.8-17.6-23.8H66.1zm9.8 37.9V10.7h4c5.4 0 8.3 3.4 8.3 14.8 0 10.1-2.9 13.8-8.4 13.8h-3.9zm44.3 1l1.5 8.3H132L122 1.4h-14l-9.9 47.2h10l1.4-8.3h10.7zm-1.6-9H111l2.1-12 1.5-8.6h.3l1.5 8.8 2 11.7z" />
    </symbol>
    <symbol id="brand-citynews" viewBox="0 0 91 24">
        <path d="M35.21 7.82l.18.16 1.6 5.9 2.11-5.9.18-.16h2.85l.17.16-5.59 15.87-.15.13-3.03.02-.1-.17 1.91-5.35-3.93-10.5.18-.16h3.62zM11.64 0a11.59 11.59 0 015.78 1.55l.05.15C16.7 3 16.5 3.34 15.8 4.62l-.18.01-.31-.16a8.2 8.2 0 00-3.67-.89 8.08 8.08 0 103.99 15.14l.16.02c.7 1.28.9 1.61 1.67 2.92l-.05.15a11.85 11.85 0 01-5.77 1.54A11.66 11.66 0 010 11.67C0 5.23 5.21 0 11.64 0zm16.8 4.88l.17.17V7.8h1.94l.18.18v2.07l-.18.17h-1.94l-.01 2.7c-.02.82.01 1.96.04 2.5.03.37 0 1.2 1.02 1.2s1.15-.2 1.15-.2l.17.18v2l-.18.17c.01.01-1.09.31-2.32.31-3.23 0-3.28-2.06-3.28-3.97v-4.89h-.98l-.17-.17V7.97l.17-.18h.98V5.05l.18-.17h3.05zm59.14 2.65c1.16 0 2.23.3 3.36.9l.06.2c-.48 1.08-.43.87-.8 1.82l-.16.06a7 7 0 00-2.64-.74c-1.12.01-1.68.57-1.75 1.06-.08.62.68.89 1.18 1.14l.44.23c.83.46 2.3 1.1 2.04 2.95-.14.99-1.07 3.92-5.62 3.92-2.1 0-3.14-.64-3.74-1.04l-.04-.18.86-2 .2-.07c.42.3 1.82.96 2.79.96 1.6 0 1.9-.92 1.95-1.2.1-.72-.54-1.05-1.21-1.38l-.42-.23-.25-.14c-.92-.51-1.72-1.03-1.5-2.53.07-.51.7-3.73 5.25-3.73zm-26.31.04c.94 0 1.9.19 2.52.6 1.39.87 1.28 2.4 1.16 3.26-.14.97-.41 1.7-.68 2.38l-.17.17h-6.58c-.06.24-.11.5-.14.73-.18 1.23.56 1.94 2.23 1.94a6.9 6.9 0 003.58-1.13l.18.17-.86 2.42-.16.17c-.56.27-1.7.78-3.74.78-2.92 0-3.7-1.1-4-1.56-.64-.94-.67-1.97-.52-3.07.43-3.05 2.84-6.86 7.18-6.86zm8.4.25l.18.17-1.04 7.32 2.53-4.3L73.02 8l.18-.17h3.57l.18.17-1.18 7.46L80.05 8l.17-.17h2.55l.17.17-6.55 10.75-.18.17h-3.48l-.18-.17 1.01-7.44-4.32 7.44-.17.17h-3.39l-.17-.17.86-10.76.16-.16h3.14zm-47.3 2.04l.17.18v8.69l-.18.17h-3.08l-.18-.17v-8.7l.18-.17h3.08zm29.3-2.31c1.3 0 2.72.63 2.43 2.7-.13.94-.84 2.9-1.4 4.36l-.47 1.44-.9 2.67-.18.17h-3.27l-.18-.17 1.32-3.52.76-2.13c.14-.42.42-1.25.49-1.7.1-.75-.38-1.17-.96-1.17-.62 0-1.16.3-1.72.63l-2.82 7.9-.18.17h-3.25l-.18-.17 3.87-10.75.18-.18h3.23l.17.18-.26.75a5.9 5.9 0 013.33-1.18zM11.7 5.48c1.15 0 2.23.31 3.16.87l-.6 1.01a4.79 4.79 0 00-2.14-.68v-.52s-.19.07-.27.07a5.77 5.77 0 00-5.65 6.44h.53a4.9 4.9 0 004.96 4.19 5.1 5.1 0 002.58-.87l.6 1.01A6.19 6.19 0 1111.7 5.48zm.42 2.2a4.12 4.12 0 01-.42 8.2 3.97 3.97 0 01-3.95-3.21h1.73c-.07 0-.1-.6-.1-.83 0-1.3 1.06-2.49 2.33-2.49.14 0 .21.01.41.04zM60.9 9.62c-.35 0-.9.09-1.56.64-.65.54-.95 1.18-1.2 1.7l3.72-.03c.11-.31.2-.62.25-.94.1-.69-.22-1.37-1.2-1.37zM22.36 5.06l.17.18v2.74l-.17.18h-3.08l-.18-.18V5.24l.18-.18h3.08z" fill-rule="nonzero" />
    </symbol>
    <symbol id="brand-local">
        <path d="M20.1 48.6h11.1l-7.4-19.2c4.2-2.1 6.4-6.7 6.4-12.4 0-9.2-4.9-15.6-14.2-15.6H1.6v47.2h9.9v-17h2.7l6 17zm-8.6-25v-13h3.8c3.3 0 5 2.5 5 6.5 0 4.4-2 6.4-4.8 6.4h-4zm21.4 1.3c0 18.2 6.5 24.6 17.4 24.6 10.9 0 17.4-6.6 17.4-24.4C67.7 7 61 .5 50.3.5 39.3.5 32.9 7 32.9 24.9zM43 25c0-11.5 2.4-15 7.3-15 4.8 0 7.3 3.5 7.3 15.2 0 11.6-2.5 15-7.3 15-5 0-7.3-3.5-7.3-15.2zm56.8 23.7h9.8V1.4H98l-6.6 20.4h-.2l-7-20.4H71.7v47.2h9.5V35.3l-.1-18.1h.2l2.9 10.4 3 10.4h6.6l3-10.5c1.6-5.2 2.8-10.3 3-10.3h.1l-.1 18.1v13.3zm35.3-8.3l1.5 8.3H147L137 1.4h-14l-10 47.2h10l1.4-8.3h10.7zm-1.6-9h-7.4l2-12 1.5-8.6h.3l1.5 8.8 2.1 11.7z" class="c-brand__edition" />
        <path d="M176.7 4.6V1.4h-29.2v9.3h9.7v38h9.8v-38h5.9c1-2.5 2.2-4.5 3.8-6zm119 27.2l12-30.4h-10l-4.6 13-1.8 5.6h-.2l-1.8-5.7-4.4-13h-11.1l12.1 30.5v16.8h9.9V31.8zm-121.5-6.9c0 18.2 6.6 24.6 17.4 24.6 11 0 17.4-6.6 17.4-24.4C209 7 202.5.5 191.6.5c-10.9 0-17.4 6.5-17.4 24.4zm10.2 0c0-11.5 2.3-15 7.3-15 4.8 0 7.2 3.5 7.2 15.2 0 11.6-2.4 15-7.2 15-5 0-7.3-3.5-7.3-15.2zM213 1.4v47.2h15c12.1 0 17.2-8.7 17.2-23.4 0-15-5.4-23.8-17.6-23.8h-14.6zm9.8 37.9V10.7h4c5.4 0 8.3 3.4 8.3 14.8 0 10.1-2.9 13.8-8.4 13.8h-3.9zm44.3 1l1.5 8.3H279L269 1.4h-14l-9.9 47.2h10l1.4-8.3h10.7zm-1.6-9H258l2.1-12 1.5-8.6h.3l1.5 8.8 2 11.7z" class="c-brand__network" />
    </symbol>
</svg>
 
<svg style="position: absolute; width: 0; height: 0" xmlns="http://www.w3.org/2000/svg">
  <symbol id="brand-logo">
    <path d="M29.7 4.6V1.4H.5v9.3h9.7v38H20v-38h5.9c1-2.5 2.2-4.5 3.8-6zm119 27.2l12-30.4h-10l-4.6 13-1.8 5.6h-.2l-1.8-5.7-4.4-13h-11.1l12.1 30.5v16.8h9.9V31.8zM27.3 24.9c0 18.2 6.6 24.6 17.4 24.6 11 0 17.4-6.6 17.4-24.4C62 7 55.5.5 44.6.5 33.7.5 27.2 7 27.2 24.9zm10.2 0c0-11.5 2.3-15 7.3-15 4.8 0 7.2 3.5 7.2 15.2 0 11.6-2.4 15-7.2 15-5 0-7.3-3.5-7.3-15.2zM66 1.4v47.2h15c12.1 0 17.2-8.7 17.2-23.4 0-15-5.4-23.8-17.6-23.8H66.1zm9.8 37.9V10.7h4c5.4 0 8.3 3.4 8.3 14.8 0 10.1-2.9 13.8-8.4 13.8h-3.9zm44.3 1l1.5 8.3H132L122 1.4h-14l-9.9 47.2h10l1.4-8.3h10.7zm-1.6-9H111l2.1-12 1.5-8.6h.3l1.5 8.8 2 11.7z"/>
  </symbol>
  <symbol id="brand-citynews" viewBox="0 0 91 24">
    <path d="M35.21 7.82l.18.16 1.6 5.9 2.11-5.9.18-.16h2.85l.17.16-5.59 15.87-.15.13-3.03.02-.1-.17 1.91-5.35-3.93-10.5.18-.16h3.62zM11.64 0a11.59 11.59 0 015.78 1.55l.05.15C16.7 3 16.5 3.34 15.8 4.62l-.18.01-.31-.16a8.2 8.2 0 00-3.67-.89 8.08 8.08 0 103.99 15.14l.16.02c.7 1.28.9 1.61 1.67 2.92l-.05.15a11.85 11.85 0 01-5.77 1.54A11.66 11.66 0 010 11.67C0 5.23 5.21 0 11.64 0zm16.8 4.88l.17.17V7.8h1.94l.18.18v2.07l-.18.17h-1.94l-.01 2.7c-.02.82.01 1.96.04 2.5.03.37 0 1.2 1.02 1.2s1.15-.2 1.15-.2l.17.18v2l-.18.17c.01.01-1.09.31-2.32.31-3.23 0-3.28-2.06-3.28-3.97v-4.89h-.98l-.17-.17V7.97l.17-.18h.98V5.05l.18-.17h3.05zm59.14 2.65c1.16 0 2.23.3 3.36.9l.06.2c-.48 1.08-.43.87-.8 1.82l-.16.06a7 7 0 00-2.64-.74c-1.12.01-1.68.57-1.75 1.06-.08.62.68.89 1.18 1.14l.44.23c.83.46 2.3 1.1 2.04 2.95-.14.99-1.07 3.92-5.62 3.92-2.1 0-3.14-.64-3.74-1.04l-.04-.18.86-2 .2-.07c.42.3 1.82.96 2.79.96 1.6 0 1.9-.92 1.95-1.2.1-.72-.54-1.05-1.21-1.38l-.42-.23-.25-.14c-.92-.51-1.72-1.03-1.5-2.53.07-.51.7-3.73 5.25-3.73zm-26.31.04c.94 0 1.9.19 2.52.6 1.39.87 1.28 2.4 1.16 3.26-.14.97-.41 1.7-.68 2.38l-.17.17h-6.58c-.06.24-.11.5-.14.73-.18 1.23.56 1.94 2.23 1.94a6.9 6.9 0 003.58-1.13l.18.17-.86 2.42-.16.17c-.56.27-1.7.78-3.74.78-2.92 0-3.7-1.1-4-1.56-.64-.94-.67-1.97-.52-3.07.43-3.05 2.84-6.86 7.18-6.86zm8.4.25l.18.17-1.04 7.32 2.53-4.3L73.02 8l.18-.17h3.57l.18.17-1.18 7.46L80.05 8l.17-.17h2.55l.17.17-6.55 10.75-.18.17h-3.48l-.18-.17 1.01-7.44-4.32 7.44-.17.17h-3.39l-.17-.17.86-10.76.16-.16h3.14zm-47.3 2.04l.17.18v8.69l-.18.17h-3.08l-.18-.17v-8.7l.18-.17h3.08zm29.3-2.31c1.3 0 2.72.63 2.43 2.7-.13.94-.84 2.9-1.4 4.36l-.47 1.44-.9 2.67-.18.17h-3.27l-.18-.17 1.32-3.52.76-2.13c.14-.42.42-1.25.49-1.7.1-.75-.38-1.17-.96-1.17-.62 0-1.16.3-1.72.63l-2.82 7.9-.18.17h-3.25l-.18-.17 3.87-10.75.18-.18h3.23l.17.18-.26.75a5.9 5.9 0 013.33-1.18zM11.7 5.48c1.15 0 2.23.31 3.16.87l-.6 1.01a4.79 4.79 0 00-2.14-.68v-.52s-.19.07-.27.07a5.77 5.77 0 00-5.65 6.44h.53a4.9 4.9 0 004.96 4.19 5.1 5.1 0 002.58-.87l.6 1.01A6.19 6.19 0 1111.7 5.48zm.42 2.2a4.12 4.12 0 01-.42 8.2 3.97 3.97 0 01-3.95-3.21h1.73c-.07 0-.1-.6-.1-.83 0-1.3 1.06-2.49 2.33-2.49.14 0 .21.01.41.04zM60.9 9.62c-.35 0-.9.09-1.56.64-.65.54-.95 1.18-1.2 1.7l3.72-.03c.11-.31.2-.62.25-.94.1-.69-.22-1.37-1.2-1.37zM22.36 5.06l.17.18v2.74l-.17.18h-3.08l-.18-.18V5.24l.18-.18h3.08z" fill-rule="nonzero"/>
  </symbol>
  <symbol id="brand-local">
    <path d="M20.1 48.6h11.1l-7.4-19.2c4.2-2.1 6.4-6.7 6.4-12.4 0-9.2-4.9-15.6-14.2-15.6H1.6v47.2h9.9v-17h2.7l6 17zm-8.6-25v-13h3.8c3.3 0 5 2.5 5 6.5 0 4.4-2 6.4-4.8 6.4h-4zm21.4 1.3c0 18.2 6.5 24.6 17.4 24.6 10.9 0 17.4-6.6 17.4-24.4C67.7 7 61 .5 50.3.5 39.3.5 32.9 7 32.9 24.9zM43 25c0-11.5 2.4-15 7.3-15 4.8 0 7.3 3.5 7.3 15.2 0 11.6-2.5 15-7.3 15-5 0-7.3-3.5-7.3-15.2zm56.8 23.7h9.8V1.4H98l-6.6 20.4h-.2l-7-20.4H71.7v47.2h9.5V35.3l-.1-18.1h.2l2.9 10.4 3 10.4h6.6l3-10.5c1.6-5.2 2.8-10.3 3-10.3h.1l-.1 18.1v13.3zm35.3-8.3l1.5 8.3H147L137 1.4h-14l-10 47.2h10l1.4-8.3h10.7zm-1.6-9h-7.4l2-12 1.5-8.6h.3l1.5 8.8 2.1 11.7z" class="c-brand__edition"/>
    <path d="M176.7 4.6V1.4h-29.2v9.3h9.7v38h9.8v-38h5.9c1-2.5 2.2-4.5 3.8-6zm119 27.2l12-30.4h-10l-4.6 13-1.8 5.6h-.2l-1.8-5.7-4.4-13h-11.1l12.1 30.5v16.8h9.9V31.8zm-121.5-6.9c0 18.2 6.6 24.6 17.4 24.6 11 0 17.4-6.6 17.4-24.4C209 7 202.5.5 191.6.5c-10.9 0-17.4 6.5-17.4 24.4zm10.2 0c0-11.5 2.3-15 7.3-15 4.8 0 7.2 3.5 7.2 15.2 0 11.6-2.4 15-7.2 15-5 0-7.3-3.5-7.3-15.2zM213 1.4v47.2h15c12.1 0 17.2-8.7 17.2-23.4 0-15-5.4-23.8-17.6-23.8h-14.6zm9.8 37.9V10.7h4c5.4 0 8.3 3.4 8.3 14.8 0 10.1-2.9 13.8-8.4 13.8h-3.9zm44.3 1l1.5 8.3H279L269 1.4h-14l-9.9 47.2h10l1.4-8.3h10.7zm-1.6-9H258l2.1-12 1.5-8.6h.3l1.5 8.8 2 11.7z" class="c-brand__network"/>
  </symbol>
</svg>
 
{
  "modifier": "resize-medium",
  "local": true,
  "logo": 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