Aeroporto di Bologna - Design System

Feature Card 

<a href="#" class="c-feature-card">
    <div class="c-feature-card__img">
        <svg class="c-icon" role="presentation">
            <use xlink:href="#ic_directions_car_black_24px"></use>
        </svg>
    </div>
    <div class="c-feature-card__content">
        <div class="c-feature-card__title">
            <p>Noleggia un’auto.</p>
        </div>
        <div class="c-feature-card__body">
            <p>Scopri il noleggio auto all'Aeroporto di Bologna o al tuo Aeroporto di destinazione al miglior prezzo garantito.</p>
        </div>
    </div>
    <img src="../../images/rentalcars-logo.png" class="c-feature-card__brand-img" alt="">
    <div class="c-feature-card__cta">
        <svg class="c-icon c-icon--24" role="presentation">
            <use xlink:href="#ic_chevron_right_black_24px"></use>
        </svg>
    </div>
</a>
 
<a href="#" class="c-feature-card{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-feature-card__img">
    {{> @icon img-icon }}
  </div>
  <div class="c-feature-card__content">
    <div class="c-feature-card__title">{{{ title }}}</div>
    <div class="c-feature-card__body">{{{ body }}}</div>
  </div>
  {{#if brand-img}}
  <img src="{{path brand-img.src }}" class="c-feature-card__brand-img" alt="{{ brand-img.alt }}">
  {{/if}}
  <div class="c-feature-card__cta">
    {{> @icon cta-icon }}
  </div>
</a>
 
{
  "img-icon": {
    "symbol": "ic_directions_car_black_24px",
    "class": "c-icon"
  },
  "title": "<p>Noleggia un’auto.</p>",
  "body": "<p>Scopri il noleggio auto all'Aeroporto di Bologna o al tuo Aeroporto di destinazione al miglior prezzo garantito.</p>",
  "brand-img": {
    "src": "/images/rentalcars-logo.png",
    "alt": ""
  },
  "cta-icon": {
    "symbol": "ic_chevron_right_black_24px",
    "class": "c-icon c-icon--24"
  }
}
  • Content: 
    .c-feature-card {
  background-color: secondary(basic-white, 100);
  @include shadow(high);
  border-radius: remify(16px);
  padding: remify(16px);
  display: flex;
  align-items: center;
  gap: remify(16px);
  text-decoration: none;

  @include min-screen(bp(tablet)) {
    padding: remify(24px);
  }

}

.c-feature-card svg {
  fill: primary(sky, 120);
}

.c-feature-card__img {
  svg {
    width: remify(32px);
    height: remify(32px);

    @include min-screen(bp(tablet)) {
      width: remify(48px);
      height: remify(48px);
    }
  }
}

.c-feature-card__title {
  @include font-scale(level-2, bold);
  color: primary(night, 100);
  text-align: left;
}

.c-feature-card__body {
  @include font-scale(level-1-5);
  color: primary(night, 100);
  text-align: left;
}

.c-feature-card__brand-img {
  width: remify(86px);
}

.c-feature-card__cta {
  margin-left: auto;
}
  • URL: /components/raw/feature-card/_feature-card.scss
  • Filesystem Path: src/views/02-molecules/feature-card/_feature-card.scss
  • Size: 874 Bytes

No notes defined.