GDL - Global Design Language

Promo: Weekend 

<div class="c-promo u-relative" style="background-image: url('https://wips.plug.it/cips/initalia.virgilio.it/cms/2016/09/roma-capitale.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="c-promo__label u-label-02">Speciale weekend</p>
                <h2 class="u-heading-04">Weekend a Roma: cosa fare sabato 6 e domenica 7 marzo</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://wips.plug.it/cips/initalia.virgilio.it/cms/2016/09/roma-capitale.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="c-promo__label u-label-02">Speciale weekend</p>
        <h2 class="u-heading-04">Weekend a Roma: cosa fare sabato 6 e domenica 7 marzo</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.