<div class="c-showcase animate__animated animate__fadeIn">

    <div class="c-showcase__headings">
        <h1 class="c-showcase__title">App - Aeroporto di Bologna</h1>
        <h2 class="c-showcase__subtitle">L'esperienza di viaggio passa anche dall'app</h2>
    </div>

</div>
<div class="c-showcase{% if modifier is defined %} {{ modifier }}{% endif %} animate__animated animate__fadeIn">

  <div class="c-showcase__headings">
    <h1 class="c-showcase__title">{{ title }}</h1>
    <h2 class="c-showcase__subtitle">{{ subtitle }}</h2>
  </div>

  {# <img class="c-showcase__image"
        src="{{ showcaseImage.src }}"
        srcset="{{ showcaseImage.srcset }}"
        sizes="100vw"
        alt="{{ showcaseImage.alt }}" /> #}

</div>
{
  "showcaseImage": {
    "src": "https://picsum.photos/1000/920",
    "srcset": "",
    "alt": "alt text"
  },
  "title": "App - Aeroporto di Bologna",
  "subtitle": "L'esperienza di viaggio passa anche dall'app"
}
  • Content:
    .c-showcase {
      // display: flex;
      // flex-direction: column;
      // position: relative;
      // width: 100%;
      // max-width: var(--wrapper);
      // margin-left: auto;
      // margin-right: auto;
      // height: remify(480px);
      margin-top: spacing(space-48);
      margin-bottom: spacing(space-48);
    
      @include min-screen(bp(large)) {
        // padding-left: spacing(space-48);
        // padding-right: spacing(space-48);
        // height: remify(920px);
      }
    
    }
    
    .c-showcase__image {
      // position: absolute;
      // top: 0;
      // left: 0;
      // width: 100%;
      // height: 100%;
      // object-fit: cover;
      // object-position: center center;
      // z-index: -1;
    }
    
    // .c-showcase__header {
    //   @include shadow(level-800);
    
    //   @include min-screen(bp(large)) {
    //     margin-top: spacing(space-48);
    //   }
    
    // }
    
    // .c-showcase__inner {
    //   align-content: space-between;
    //   position: relative;
    // }
    
    .c-showcase__headings {
      // padding: spacing(space-48) 0;
      // background-color:useHSL(--base-100);
      // padding: $global-mobile-x-padding;
      // margin-top: auto;
      
      // @include min-screen(bp(medium)) {
      //   padding: $global-desk-x-padding;
      // }
    }
    
    .c-showcase__title {
      @include font-scale(level-8, $weight: 'extrabold');
      color:useHSL(--primary-100);
      display: inline-block;
    }
    
    .c-showcase__subtitle {
      @include font-scale(level-7, $weight: 'regular');
      color:useHSL(--primary-100);
      margin-top: spacing(space-8);
    }
  • URL: /components/raw/showcase/_showcase.scss
  • Filesystem Path: src/pattern-library/02-components/showcase/_showcase.scss
  • Size: 1.4 KB

No notes defined.