intro: Default

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 u-column u-row@md">

            <div class="u-mr-base@md">
                <figure class="c-avatar   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-flex u-size-full u-justify-between">

                <div class="u-size-full 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-mt-xsmall u-mb-none"> Collaboratore presso Romatoday </h4>

                </div>

                <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>

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

                </div>

            </div>

        </div>

        <div class="c-intro__details u-body-03 u-mt-medium">
            <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 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>

    </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 u-column u-row@md">

        <div class="u-mr-base@md">
          {% render "@avatar",{large:'true', thumb:'https://admin.previewtoday.strategy.it/images/test/alagna_sveva.png'}, false %}
        </div>

        <div class="u-flex u-size-full u-justify-between">
          
          <div class="u-size-full 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-mt-xsmall u-mb-none"> {{ byline }} </h4>
            {% endif %}
          </div>
          
          {% if not hideShare %}
          {% render "@share" %}
          {% endif %}

        </div>

      </div>

      {% if not hideDescription %}
      <div class="c-intro__details u-body-03 u-mt-medium">
        <p>
          {{ description }}
        </p>
        
        {% 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>
      {% 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"
    }
  ]
}

File:

Content:


                                // Name:            Intro
// Description:     Show editor bio, description and social links
//
// Component:       `c-intro`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================

.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);

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

  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};  
  }
  @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};
  }

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

  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);	


  &::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;
    @include bp(md) {
      margin-bottom: 0;
    }
  }

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

  .c-share {
    display: none;
    @include bp(md) {
      display: flex;
    }
  }

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

  &__details {
    @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(--bg-color);
    --intro-avatar-size: 8rem;
  }
}

URL: /components/raw/intro/intro.scss
Filesystem Path: src/lib/components/intro/intro.scss
Size: 3.9 KB

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

intro: Default

Vcard Infos

Usage

Render vcard