GDL - Global Design Language

intro: Default 

<section class="c-intro u-mb-medium u-relative">
    <div class="o-container u-p-small u-p-medium@md">

        <div class="u-flex u-items-center@xl u-column u-row@md u-gap-medium ">
            <div class="u-flex u-row@xl u-column u-gap-medium u-size-full">

                <div class="u-flex u-column u-gap-small u-items-center ">
                    <figure class="c-avatar u-ratio-1   c-avatar--large u-relative u-radius-circle u-overflow-hidden ">
                        <a href="#">
                            <img decoding="async" referrerpolicy="no-referrer" class="c-avatar__thumb u-absolute u-left u-bottom u-size-full" src="https://admin.previewtoday.strategy.it/images/test/alagna_sveva.png" loading="lazy" alt="" />
                        </a>
                    </figure>

                </div>

                <div class="u-size-full">
                    <div class="u-flex u-column u-row@md u-justify-between u-gap-medium">
                        <div class="u-flex u-column u-items-center u-items-start@md">

                            <h1 class="u-title-02 u-m-none">
                                <a class="c-intro__title u-no-underline o-link-text" href="#"> Francesca Dermigian </a>
                            </h1>

                            <h4 class="u-label-07 u-color-secondary u-mb-none"> Collaboratore presso Romatoday </h4>

                        </div>

                        <div class="u-flex u-column u-items-center u-items-start@md">
                            <div class="c-share u-flex">

                                <a href="#" class="u-mr-xsmall">
                                    <div class="c-share__item c-share__item--facebook u-flex u-items-center u-justify-center">
                                        <svg class="o-icon--md  o-icon--fill-inverse ">
                                            <use xlink:href="#icon-facebook" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                        </svg>
                                    </div>
                                </a>

                                <a href="#" class="u-mr-xsmall">
                                    <div class="c-share__item c-share__item--twitter u-flex u-items-center u-justify-center">
                                        <svg class="o-icon--md  o-icon--fill-inverse ">
                                            <use xlink:href="#icon-twitter" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                        </svg>
                                    </div>
                                </a>

                                <a href="#" class="u-mr-xsmall">
                                    <div class="c-share__item c-share__item--whatsapp u-flex u-items-center u-justify-center">
                                        <svg class="o-icon--md  o-icon--fill-inverse ">
                                            <use xlink:href="#icon-whatsapp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                                        </svg>
                                    </div>
                                </a>

                            </div>

                        </div>

                    </div>

                    <div class="u-flex u-column u-row@md u-gap-medium u-mt-medium">

                        <div class="u-flex u-gap-medium  u-justify-center">
                            <div class="u-text-center">
                                <span class="u-title-06 u-block c-intro__rank">234k</span><small class="u-label-07 u-block">Articoli</small>
                            </div>
                            <div class="u-text-center">
                                <span class="u-title-06 u-block c-intro__rank">12k</span><small class="u-label-07 u-block">Commenti</small>
                            </div>
                            <div class="u-text-center">
                                <span class="u-title-06 u-block c-intro__rank">3M</span><small class="u-label-07 u-block">Follower</small>
                            </div>

                        </div>

                        <div class="c-intro__details u-flex-one">
                            <p>
                                Classe &#39;86, nata e cresciuta a Firenze, vivo a Roma dal 2007. Laureata in Filosofia all&#39;Università Roma Tre, iscritta all&#39;ordine dei giornalisti della Toscana dal 2013. Amo scrivere di questa città, descriverne pezzi di vita, far parlare chi la vive ogni giorno in tutta la sua follia. Lo faccio dal 2010 per Romatoday, quotidiano online del gruppo Citynews, occupandomi per lo più di temi di cronaca bianca: degrado urbano, opere pubbliche, disservizi, trasporti, rifiuti. Sempre a caccia di storie e denunce a cui dare voce.
                            </p>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="c-intro__tags u-flex u-items-center u-wrap u-relative u-mt-medium">
            <span class="u-label-05 u-color-secondary u-mr-base">Scrive di:</span>
            <ul class="u-flex u-wrap u-m-none u-list-none u-list-reset">

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Arresto </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Ostia </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Cronaca </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Parco </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Omicidio </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Green </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Politica </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Degrado </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Atac </a>
                </li>

                <li class="u-mr-xsmall">
                    <a class="o-link-text u-label-03 u-no-underline" href="#">Furto </a>
                </li>

            </ul>
        </div>

    </div>
</section>
 
<section class="c-intro u-mb-medium u-relative">
  <div class="o-container u-p-small u-p-medium@md">
    
      <div class="u-flex u-items-center@xl u-column u-row@md u-gap-medium ">        
        <div class="u-flex u-row@xl u-column u-gap-medium u-size-full">

          
          <div class="u-flex u-column u-gap-small u-items-center ">
            {% render "@avatar",{large:'true', thumb:'https://admin.previewtoday.strategy.it/images/test/alagna_sveva.png'}, false %}
          </div>
         
          <div class="u-size-full">
            <div class="u-flex u-column u-row@md u-justify-between u-gap-medium">
              <div class="u-flex u-column u-items-center u-items-start@md">
                {% if title %}
                  <h1 class="u-title-02 u-m-none">
                    <a class="c-intro__title u-no-underline o-link-text" href="#"> {{ title }} </a>
                  </h1>
                {% endif %}
      
                {% if byline %}
                  <h4 class="u-label-07 u-color-secondary u-mb-none"> {{ byline }} </h4>
                {% endif %}

              </div>
              
              {% if not hideShare %}
              <div class="u-flex u-column u-items-center u-items-start@md">
                {% render "@share" %}
              </div>
              {% endif %}
              
            </div>


            <div class="u-flex u-column u-row@md u-gap-medium u-mt-medium">

              <div class="u-flex u-gap-medium  u-justify-center">
                <div class="u-text-center">
                  <span class="u-title-06 u-block c-intro__rank">234k</span><small class="u-label-07 u-block">Articoli</small> 
                </div>
                <div class="u-text-center">
                  <span class="u-title-06 u-block c-intro__rank">12k</span><small class="u-label-07 u-block">Commenti</small>
                </div>
                <div class="u-text-center">
                  <span class="u-title-06 u-block c-intro__rank">3M</span><small class="u-label-07 u-block">Follower</small>
                </div>
      
              </div>

              {% if not hideDescription %}
              <div class="c-intro__details u-flex-one">
                <p>
                  {{ description }}
                </p>
              </div>
              {% endif %}
            </div>
          
          </div>
        </div>
      </div>
      
     
      {% if tags %}
      <div class="c-intro__tags u-flex u-items-center u-wrap u-relative u-mt-medium">
        <span class="u-label-05 u-color-secondary u-mr-base">Scrive di:</span>
        <ul class="u-flex u-wrap u-m-none u-list-none u-list-reset">
          {% for tag in tags %}
          <li class="u-mr-xsmall">
            <a class="o-link-text u-label-03 u-no-underline" href="#">{{ tag.item }} </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
     

  </div>
</section>
 
{
  "description": "Classe '86, nata e cresciuta a Firenze, vivo a Roma dal 2007. Laureata in Filosofia all'Università Roma Tre, iscritta all'ordine dei giornalisti della Toscana dal 2013. Amo scrivere di questa città, descriverne pezzi di vita, far parlare chi la vive ogni giorno in tutta la sua follia. Lo faccio dal 2010 per Romatoday, quotidiano online del gruppo Citynews, occupandomi per lo più di temi di cronaca bianca: degrado urbano, opere pubbliche, disservizi, trasporti, rifiuti. Sempre a caccia di storie e denunce a cui dare voce.",
  "title": "Francesca Dermigian",
  "byline": "Collaboratore presso Romatoday",
  "channel": "/notizie/",
  "share": [
    "facebook",
    "twitter",
    "email"
  ],
  "tags": [
    {
      "item": "Arresto"
    },
    {
      "item": "Ostia"
    },
    {
      "item": "Cronaca"
    },
    {
      "item": "Parco"
    },
    {
      "item": "Omicidio"
    },
    {
      "item": "Green"
    },
    {
      "item": "Politica"
    },
    {
      "item": "Degrado"
    },
    {
      "item": "Atac"
    },
    {
      "item": "Furto"
    }
  ]
}
  • Content: 
    // Name:            Intro
// Description:     Show editor bio, description and social links
//
// Component:       `c-intro`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================

@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/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;


.c-intro {	

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

  --intro-avatar-size: 5rem;
  --intro-details-size: 55.5rem;
  --intro-bg-color: var(--background-color-contrast);
  --intro-border-color: var(--divider-color);
  --intro-text-decoration: var(--divider-color);
  --intro-text-decoration-hover: var(--link-color-dark);
  --intro-bg-social-icon: var(--link-color-dark);


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

  border-bottom-width: 1px;	
  border-bottom-style: solid;	
  border-bottom-color: var(--intro-border-color);
  border-top-width: 1px;	
  border-top-style: solid;	
  border-top-color: var(--intro-border-color);
  background-color: var(--intro-bg-color);
  @if $layout!=amp {
    @media (prefers-color-scheme: dark) {
      [data-theme="today"][data-channel*="opinioni"]:not([data-color-scheme*="light"]) &,
      body[data-theme="today"]:not([data-color-scheme*="light"]) &[data-channel*="opinioni"] {
        --intro-bg-color: #{$category-04-darker-alpha};
        --intro-border-color: #{$category-04-darker};
        --intro-title-text: #{$inverse-01};
        --intro-text-decoration: #{$category-04-darker};
        --intro-bg-social-icon: #{$category-04-darker};
      }
    }
    
    [data-theme="today"][data-color-scheme*="dark"][data-channel*="opinioni"] &,
    [data-theme="today"][data-color-scheme*="dark"] &[data-channel*="opinioni"] {
      --intro-bg-color: #{$category-04-darker-alpha};
      --intro-border-color: #{$category-04-darker};
      --intro-title-text: #{$inverse-01};
      --intro-text-decoration: #{$category-04-darker};
      --intro-bg-social-icon: #{$category-04-darker};
    }
  }

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

  body:not([data-color-scheme*="light"]) & {
    --intro-bg-social-icon: #{$ui-03};
  }

  //
  // Channel color variations
  //
  
  body[data-theme="today"] &[data-channel*="opinioni"],
  [data-theme="today"][data-channel*="opinioni"] & {
    --intro-bg-color: #{$category-04-lighter};
    --intro-border-color: #{$category-04};	    
    --intro-title-text: #{$category-04-darker}; 
    --intro-text-decoration: #{$category-04};	
    --intro-text-decoration-hover: #{$category-04-dark};
    --intro-bg-social-icon: #{$category-04-darker};  
  }	


  &::after {	
    position: absolute;	
    right: 0;	
    bottom: -5px;	
    content: '';	
    width: 100%;	
    height: 1px;	
    background-color: var(--intro-border-color);	
  }
  
  &__avatar {
    width: var(--intro-avatar-size);
    height: var(--intro-avatar-size);
		flex: 1 0 auto;
    margin-bottom: $margin-base;
    @if $responsive-breakpoints {

      @include bp(md) {
        margin-bottom: 0;
      }
    }
  }

  &__rank,
  &__title {
    color: var(--intro-title-text);
  }
  
  &__tags {
    padding-top: $padding-medium;
    border-top: 1px solid var(--divider-color);
  }

  // .c-share {
  //   display: none;
  //   @if $responsive-breakpoints {
  //     @include bp(md) {
  //       display: flex;
  //     }
  //   }
  // }

  .c-share__item {
    background-color: var(--intro-bg-social-icon);
  }

  &__details {
    // @if $responsive-breakpoints {
    //   @include bp(md) {
    //     max-width: var(--intro-details-size);
    //   }
    // }

    > p {
      margin: 0;

      > a,
      > strong > a {
        border-bottom: 1px solid var(--intro-text-decoration);	
        color: var(--link-color-dark);	
        text-decoration: none;	
        transition: border .2s ease-out;

        &:hover {
          border-bottom-color: var(--intro-text-decoration-hover);
        }	
      }
    }

    .c-intro__tags {
      .u-label-03 {
        border-bottom: none;
      }
    }
  }

  &[data-channel*="opinioni"] {
    --intro-bg-color: var(--background-color);
    --intro-avatar-size: 6rem;
  }
}
  • URL: /components/raw/intro/intro.scss
  • Filesystem Path: src/lib/components/intro/intro.scss
  • Size: 4.7 KB

Intro

Show editor bio, description and social links

Variations

Possible variations:

  • Default - name, social media button and a short intro are present
  • Blog - name and social media button are present
  • Local - only the name is present

Usage

Render intro

In order to display a intro component use following syntax:

  1. for a default intro:
  {% render "@intro--default" %}
  1. for a blog intro:
  {% render "@intro--blog" %}
  1. for a local intro:
  {% render "@intro--local" %}