Aeroporto di Bologna - Design System

Retail 

<div class="c-retail ">
    <img src="https://picsum.photos/640/480" alt="" class="c-retail__image u-OF-cover">
    <div class="c-retail__body">
        <div class="c-retail__logo">
            <img src="http://via.placeholder.com/140x80?text&#x3D;Logo+negozio" alt="Ferrari" class="u-OF-contain">
        </div>
        <p class="c-retail__title">Deposito bagagli</p>
        <p class="c-retail__description"><strong>1° piano</strong> - Dopo la security</p>
        <a href="#">Scopri di più &#x2192;</a>
    </div>
</div>
 
<div class="c-retail {{ modifier }}">
  {{#if rounded-label}}
    {{> @rounded-label rounded-label }}
  {{/if}}
  <img src="{{ img.src }}" alt="{{ img.alt }}" class="c-retail__image u-OF-cover">
  <div class="c-retail__body">
    {{#if logo}}
      <div class="c-retail__logo">
        <img src="{{ logo.src }}" alt="{{ logo.alt }}" class="u-OF-contain">
      </div>
    {{/if}}
    {{#if title}}
      <p class="c-retail__title">{{{ title }}}</p>
    {{/if}}
    <p class="c-retail__description">{{{ description }}}</p>
    <a href="{{ anchor.url }}">{{{ anchor.text }}}</a>
  </div>
</div>
 
{
  "img": {
    "src": "https://picsum.photos/640/480",
    "alt": ""
  },
  "logo": {
    "src": "http://via.placeholder.com/140x80?text=Logo+negozio",
    "alt": "Ferrari"
  },
  "title": "Deposito bagagli",
  "description": "<strong>1° piano</strong> - Dopo la security",
  "anchor": {
    "url": "#",
    "text": "Scopri di più &#x2192;"
  }
}
  • Content: 
    .c-retail {
  @include shadow(small);
   background-color: secondary(soft, 100);
  border-radius: remify(16px);
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: hidden;

  &:hover {
    background-color: #fff;
    @include shadow(high);
  }

  .c-launches & {
    height: 100%;
  }

  .c-carousel & {
    @include shadow(small);
    height: 100%;
  }

  .o-adjacent__item & {
    width: 100%;
  }

}

.c-retail__image {
  height: remify(200px);
  width: 100%;
}

.c-retail__body {
  padding: 0 remify(16px) remify(16px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;

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

  a {
    display: block;
    font-weight: fw(bold);
    text-align: center;
  }

}

.c-retail__logo {
  z-index: 10;
  background-color: #fff;
  @include shadow(small);
  border-radius: remify(8px);
  width: remify(150px);
  height: remify(96px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 remify(8px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-67%);
  margin: 0 auto;

  img {
    width: remify(130px);
    height: remify(96px);
  }

}

.c-retail__title {
  @include font-scale(level-3);
  margin-bottom: remify(8px);
  margin-top: remify(48px);
}

.c-retail__description {
  @include font-scale(level-2, bold);
  margin-bottom: remify(16px);
}
  • URL: /components/raw/retail/_retail.scss
  • Filesystem Path: src/views/02-molecules/retail/_retail.scss
  • Size: 1.5 KB

No notes defined.