GDL - Global Design Language

Title: Title featured 

<h3 class="c-title c-title--featured u-relative">

    Cronaca

</h3>
 
<h3 class="c-title {% if modifier %}c-title--{{modifier}}{% endif %} u-relative">
  {% if dossier %}
  <svg xmlns="http://www.w3.org/2000/svg" class="c-dossier-logo" fill="none" viewBox="0 0 111 24">
    <path fill="currentColor" d="M85.4 4a.3.3 0 0 1-.3-.3V.3a.3.3 0 0 1 .3-.3h7.3a.3.3 0 0 1 .4.3v3.4a.3.3 0 0 1-.4.3h-7.3ZM.4 24a.3.3 0 0 1-.4-.4V.3A.3.3 0 0 1 .4 0H4a.3.3 0 0 1 .4.3v23.4a.3.3 0 0 1-.4.3H.4ZM12.6 1.7a5.5 5.5 0 0 1 2 4v12.5c0 3.2-3 5.8-6.6 5.8H6.6a.3.3 0 0 1-.3-.3v-3.4a.3.3 0 0 1 .3-.3H8a2 2 0 0 0 2-1.8V5.8A2 2 0 0 0 8 4H6.6a.3.3 0 0 1-.3-.3V.3a.3.3 0 0 1 .3-.3H8a7 7 0 0 1 4.6 1.7M24 .1a.3.3 0 0 1 .1.3v3.4a.3.3 0 0 1-.2.3A2 2 0 0 0 22.3 6v12a2 2 0 0 0 1.6 1.9.3.3 0 0 1 .2.3v3.4a.3.3 0 0 1 0 .2.4.4 0 0 1-.4.1c-3.3-.4-5.9-2.9-5.9-5.9V6c.1-3 2.6-5.6 6-6l.2.1ZM32.3 6v12c0 3-2.6 5.5-6 6a.4.4 0 0 1-.2-.2.3.3 0 0 1-.1-.2v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.6-1.9V6a2 2 0 0 0-1.6-2 .3.3 0 0 1-.2-.3V.4a.3.3 0 0 1 0-.3h.4C29.7.4 32.3 3 32.3 6Zm9.3 14.2v3.4a.3.3 0 0 1-.1.2l-.3.1c-3.4-.4-6-3-6-6v-1.8a.3.3 0 0 1 .2-.2h4.1a.3.3 0 0 1 .3.2v1.8a2.2 2.2 0 0 0 1.5 2 .3.3 0 0 1 .3.3M41.5.1a.3.3 0 0 1 0 .3v3.4a.3.3 0 0 1-.1.3 2 2 0 0 0-1.6 2v1.1a2.3 2.3 0 0 0 1.5 2.1l.1.1a.3.3 0 0 1 .2.3v3.8a.3.3 0 0 1-.2.3.4.4 0 0 1-.3 0l-2-1a6.3 6.3 0 0 1-3.8-5.6v-1c0-3 2.5-5.7 5.9-6.1h.3ZM49.7 6v1.7a.3.3 0 0 1-.2.3h-4a.3.3 0 0 1-.3-.3V6.1a2.2 2.2 0 0 0-1.6-2 .3.3 0 0 1-.2-.3V.4a.3.3 0 0 1 0-.3.4.4 0 0 1 .4 0c3.4.4 6 3 6 6m-.1 10.7v1c0 3-2.6 5.7-6 6.1a.4.4 0 0 1-.2 0 .3.3 0 0 1-.1-.3v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.6-2v-1.1a2.4 2.4 0 0 0-1.5-2.2h-.1a.3.3 0 0 1-.2-.3v-3.8a.3.3 0 0 1 .2-.3.4.4 0 0 1 .3 0l2 .9a6.3 6.3 0 0 1 3.9 5.7m8.9 3.4v3.4a.3.3 0 0 1 0 .2l-.4.1c-3.4-.4-6-3-6-6v-1.8a.3.3 0 0 1 .4-.3h4a.3.3 0 0 1 .2.3v1.8a2.2 2.2 0 0 0 1.6 2 .3.3 0 0 1 .2.3M58.6.1a.3.3 0 0 1 .1.3v3.4a.3.3 0 0 1-.2.3 2 2 0 0 0-1.6 2v1.1a2.4 2.4 0 0 0 1.5 2.1l.1.1a.3.3 0 0 1 .2.3v3.8a.3.3 0 0 1-.1.3.4.4 0 0 1-.4 0l-1.9-1a6.3 6.3 0 0 1-3.9-5.6v-1c0-3 2.6-5.7 6-6.1h.2ZM66.9 6v1.7a.3.3 0 0 1-.3.3h-4a.3.3 0 0 1-.3-.3V6.1a2.2 2.2 0 0 0-1.5-2 .3.3 0 0 1-.3-.3V.4a.3.3 0 0 1 .2-.3.4.4 0 0 1 .3 0c3.4.4 5.9 3 5.9 6m0 10.7v1c0 3-2.6 5.7-6 6.1a.4.4 0 0 1-.3 0 .3.3 0 0 1 0-.3v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.5-2v-1.1a2.4 2.4 0 0 0-1.4-2.2h-.2a.3.3 0 0 1-.2-.3v-3.8a.3.3 0 0 1 .2-.3.4.4 0 0 1 .4 0l1.9.9a6.3 6.3 0 0 1 3.9 5.7m3.7 7.2a.3.3 0 0 1-.4-.4V.3a.3.3 0 0 1 .4-.3h3.8a.3.3 0 0 1 .3.3v23.4a.3.3 0 0 1-.3.3h-3.8Zm8.5 0a.3.3 0 0 1-.3-.4V.3A.3.3 0 0 1 79 0h4a.3.3 0 0 1 .4.3v23.4a.3.3 0 0 1-.4.3h-3.8Zm6.3-10.2a.3.3 0 0 1-.3-.3v-3.3a.3.3 0 0 1 .3-.3h5.1a.3.3 0 0 1 .4.3v3.3a.3.3 0 0 1-.4.3h-5Zm0 10.2a.3.3 0 0 1-.3-.4v-3.3a.3.3 0 0 1 .3-.3h7.3a.3.3 0 0 1 .4.3v3.3a.3.3 0 0 1-.4.4h-7.3Zm15.1-24a.3.3 0 0 1 .1.3v23.4a.3.3 0 0 1-.3.2h-3.9a.3.3 0 0 1-.3-.2V.3a.3.3 0 0 1 .3-.3h4.1m10.1 23.8a.3.3 0 0 1-.3.2h-4.5a.3.3 0 0 1-.2-.2l-3.2-5v-4.6a.3.3 0 0 1 .3-.3h2a1.2 1.2 0 0 0 1.2-1.1V5a1.2 1.2 0 0 0-1.3-1.1h-1.8a.3.3 0 0 1-.4-.3V.3l.1-.2.3-.1h1.8c3.3 0 5.9 2.3 5.9 5.1v7.7a5.2 5.2 0 0 1-3.5 4.7.3.3 0 0 0 0 .3l3.6 5.8a.2.2 0 0 1 0 .2Z"/>
  </svg> 
  {% else %}
  {{title}}
  {% endif %}
  {% if link %}
  <a href="" class="u-absolute u-right u-bottom-xsmall u-label-05 u-no-underline o-link-text">
  {{link}} 
  <svg class="o-icon o-icon--sm">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use>
  </svg>
  </a>{% endif %}
</h3>
 
{
  "title": "Cronaca",
  "modifier": "featured"
}
  • Content: 
    // Name:            Title
// Description:     Introduce a new section or module
//
// Component:       `c-title`
//
//
// Modifiers:       `c-title--border`
//                  `c-title--bullet`
//                  `c-title--featured`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;

@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;

@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================

$title-background: var(--title-background);
$title-background-dark: var(--theme-color-darker);
$title-border: var(--title-border);
$title-divider-background: var(--background-color);
$title-divider-color: var(--divider-color);
$title-multiline-background: repeating-linear-gradient(to bottom, transparent, transparent 2px, $title-divider-color 2px, $title-divider-color 3px);

$title-height-logo: 40px;
$title-width-logo: 150px;
// ========================================================================

.c-title {

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

  --title-background: #{$ui-03};
  --title-border: #{$ui-02};
  --title-text: #{$text-01};

  // ========================================================================

  position: relative;
  margin-bottom: $margin-medium;
  border-bottom: 1px solid $title-divider-color;
  color: var(--title-text);

  @if $layout!=amp{

    @media (prefers-color-scheme: dark) {
      body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {
        --title-text: #{$inverse-01};
        --title-border: #{$inverse-01};
      }
    }
  }

  @each $category, $name in $categories {
    @if ($category!="notizie"){ 
      @if $layout!=amp{
        @media (prefers-color-scheme: dark) {
          [data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
            --title-text: #{grabcolor($categories, $category, base)};
            
            &.c-title--featured-multiline,
            &.c-title--featured {
              --title-border: #{$inverse-01};
              --title-text: #{$inverse-01};
            }
          }
        }
      
        [data-color-scheme*="dark"][data-theme="today"][data-channel^="/#{$category}/"] & {
          --title-border: #{grabcolor($categories, $category, dark)};
          --title-text: #{grabcolor($categories, $category, base)};
          
          &.c-title--featured-multiline,
          
          &.c-title--featured {
            --title-border: #{$inverse-01};
            --title-text: #{$inverse-01};
          }
        }
      }
  
      [data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
        --title-border: #{grabcolor($categories, $category, dark)};
        --title-text: #{grabcolor($categories, $category, darker)};
        
        &.c-title--featured-multiline,
        &.c-title--featured {
          --title-border: #{$inverse-01};
          --title-text: #{$inverse-01};
        } 
      }
    }
  }
  @include type(title-03);

  @if $layout!=amp {

    &--multiline-small {
      font-size: type-size('primer', base);
    }
  
    &--featured {
      margin-bottom: 0;
    }
  
    &--featured,
    &--featured-multiline {
      padding: $padding-small;
      border-bottom: 0;
      background-color: $title-background;
      @include type(title-06);
      
      @media (prefers-color-scheme: dark) {
        body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {
          background-color: $ui-01-10;  
        }
      }
    }
  
    &--featured-multiline {
      --title-multiline-position: 10px;
    }
  
    //
    // Divider and color variations
    //
  
    #{$global-background-primary} & {
      border-bottom-color: var(--theme-color-light);
      
      &::after {
        background-color: var(--theme-color-light);
      }
  
      &--featured {
        background-color: $title-background-dark;
      }
    }
  
    .o-bg-dark[data-section-key*="focus-channel-cover"] & {
      &--featured {
        background-color: $ui-01-10;
        
      }
    } 
  }

  // ======================================================================
  
  body[data-channel*="/foto/"] &,
  body[data-model*="video"] &,
  body[data-channel*="/video/"] & {
    --title-text: #{$inverse-01};
    --title-border: #{$inverse-01};
  }

  //
  // Default title color values
  //
  body[data-model="show"]:not([data-color-scheme="user-light"]) &,
  body[data-channel*="/foto/"]:not([data-color-scheme="user-light"]) &,
  body[data-channel*="/video/"]:not([data-color-scheme="user-light"]) &,
  body[data-color-scheme*="dark"]:not([data-model*="sponsor"]) &,
  #{$global-background-dark} &,
  #{$global-background-primary} &,
  &--featured,
  &--featured-multiline {
    --title-border: #{$inverse-01};
    --title-text: #{$inverse-01};
  }

  &__logo {
    max-height: $title-height-logo;
    width: $title-width-logo;
  }

  &--multiline-small,
  &--featured-multiline {
    &::after {
      display: block;
      position: absolute;
      bottom: calc(var(--title-multiline-position) * -1);
      left: 0;
      content: '';
      width: 100%;
      height: 10px;
      // background-color: $title-divider-background;
      background-image: $title-multiline-background;
      background-repeat: repeat-x;
      background-position: bottom;
    }
  }
  
  &--multiline,
  &--multiline-small {
    --title-multiline-position: 13px;
    border-bottom: 3px solid $title-border;

    // body[data-channel*="dossier"] & ,
    // body[data-model*="approfondimento"] & {
    //   border-bottom: 3px solid $approfondimento-gray-light;
    // }
  }

  body[data-channel*="dossier"] & {
    --title-background: #{$ui-02};
  }

}
  • URL: /components/raw/title/title.scss
  • Filesystem Path: src/lib/components/title/title.scss
  • Size: 6.9 KB

Title

Title component shows the title of an article

Variations

Possible variations:

  • Title line - title with a single underline
  • Title multiline - title with a multiple underline
  • Title multiline small - small text title with a multiple underline
  • Title featured - title highlighted
  • Title featured multiline - title highlighted with multiple underline

Usage

Render title

In order to display a title component use following syntax:

  1. for a title line:
  {% render "@title--simple" %}
  1. for a title multiline:
  {% render "@title--multiline" %}
  1. for a title multiline small:
  {% render "@title--multiline-small" %}
  1. for a title featured:
  {% render "@title--featured" %}
  1. for a title featured multiline:
  {% render "@title--featured-multiline" %}