<div class="c-promo u-relative" style="background-image: url('https://www.giardango.it/wp-content/uploads/2016/03/mimosa-curiosita-storia-1024x682.jpg');">
    <a class="c-promo__link u-no-underline u-size-full u-absolute u-top u-left" href="#">
        <header class="c-promo__header u-flex u-justify-center u-items-center u-column">
            <div class="c-promo__content u-color-inverse u-text-center">
                <p class="u-label-02">Tutti gli eventi per</p>
                <h2 class="u-heading-04">Festa della donna</h2>
                <button class="c-btn c-btn--default c-btn--rounded u-label-04  u-cursor-pointer">
                    Mi interessa
                    <svg class="o-icon o-icon--animated  u-ml-xxsmall o-icon--md ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use>
                    </svg>
                </button>
            </div>
        </header>
    </a>
</div>
<div class="c-promo u-relative" style="background-image: url('https://www.giardango.it/wp-content/uploads/2016/03/mimosa-curiosita-storia-1024x682.jpg');">
  <a class="c-promo__link u-no-underline u-size-full u-absolute u-top u-left" href="#">
    <header class="c-promo__header u-flex u-justify-center u-items-center u-column">
      <div class="c-promo__content u-color-inverse u-text-center">
        <p class="u-label-02">Tutti gli eventi per</p>
        <h2 class="u-heading-04">Festa della donna</h2>
        <button class="c-btn c-btn--default c-btn--rounded u-label-04  u-cursor-pointer">
          Mi interessa
          <svg class="o-icon o-icon--animated  u-ml-xxsmall o-icon--md ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use>
          </svg>
        </button> 
      </div>
    </header>
  </a>
</div>
/* No context defined. */
  • Content:
    // Name:            Promo
    // Description:     Event promo card
    //
    // Component:       `c-promo`
    //
    // Dependencies:    `settings/v7/colors.tokens`
    //                  `settings/v7/global`
    //                  `themes/[theme-file]`
    //
    //
    // ========================================================================
    
    // Variables
    // ========================================================================
    $promo-height: 24rem;
    $promo-size-medium: 80%;
    $promo-size-full: 100%;
    
    // ========================================================================
    
    .c-promo {
    
      // Custom properties
      // ========================================================================
      --promo-bg-width: 80%;
      --promo-bg-height: 70%;
      
      // ========================================================================  
    
      min-height: $promo-height;
      background-size: cover;
      background-position: center;
      filter: saturate(70%);
    
      &__link {
        height: $promo-size-full;
        @include bp(lg) {
          &:hover {
            .c-promo__header:after {
              --promo-bg-width: 100%;
              --promo-bg-height: 100%;
            }
          }
        }
      }
    
      &__header {
        height: $promo-size-full;
    
        &:after {
          content: '';
          background-color: rgba($ui-02, .7);
          display: block;
          position: absolute;
          width: var(--promo-bg-width);
          height: var(--promo-bg-height);
          z-index: 1;
          transition: $global-interactive-transition;
        }
      }
      
      &__content {
        z-index: 2;
        padding: 0 1rem;
        width: $promo-size-medium;
      }
    
      .c-btn--default {
        --btn-label: $link-01;
        box-shadow: 0 0 0 1px $ui-01;
        @include bp(lg) {
          &:hover {
            --btn-label: var(--theme-color);
            box-shadow: 0 0 0 1px var(--theme-color);
          }
        }
      }
    
      &__label {
        color: var(--theme-color);
      }
    }
    
  • URL: /components/raw/promo/promo.scss
  • Filesystem Path: src/lib/components/promo/promo.scss
  • Size: 1.8 KB

No notes defined.