intro: Blog

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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="#"> Nome e Cognome </a>
                            </h1>

                            <h4 class="u-label-07 u-color-secondary u-mb-none"> Giornalista Romatoday.it </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>
                                Descrizione del blog
                            </p>
                        </div>

                    </div>

                </div>
            </div>
        </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": "Descrizione del blog",
  "title": "Nome e Cognome",
  "byline": "Giornalista Romatoday.it",
  "channel": "/notizie/",
  "share": [
    "facebook",
    "twitter",
    "email"
  ],
  "tags": false
}

File:

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

Handle: @intro--blog
Variants (3): Default , Blog , Local
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/intro/intro.njk
References (2): @avatar, @share

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:

for a default intro:

  {% render "@intro--default" %}

for a blog intro:

  {% render "@intro--blog" %}

for a local intro:

  {% render "@intro--local" %}