Aeroporto di Bologna - Design System

Doorbell: Full 

<div class="c-doorbell c-doorbell--full" style="border-color: #232">
    <div class="c-doorbell__icon" style="border-color: #232; background: #232">
        <img src="../../images/svgs/icn-way-cassa-parcheggi_categoria.svg" alt="Check in (Accettazione)">
    </div>
    <div class="c-doorbell__text">
        <p class="c-doorbell__title">Servizi aeroportuali</p>
        <p class="c-doorbell__anchors">
            <a href="#" class="">Guarda tutti</a>
        </p>
    </div>
</div>
 
<div class="c-doorbell {{ modifier }}" style="border-color: {{ category-color }}">
  <div class="c-doorbell__icon" style="border-color: {{ category-color }}; background: {{ category-color }}">
    <img src="{{ path img.src }}" alt="{{ img.alt }}">
  </div>
  <div class="c-doorbell__text">
    <p class="c-doorbell__title">{{{ title }}}</p>
    <p class="c-doorbell__anchors">
      <a href="{{ link.url }}" class="{{ link.class }}">{{ link.text }}</a>
    </p>
  </div>
</div>
 
{
  "modifier": "c-doorbell--full",
  "border-color": "#BC2026",
  "img": {
    "src": "/images/svgs/icn-way-cassa-parcheggi_categoria.svg",
    "alt": "Check in (Accettazione)"
  },
  "number": "01",
  "title": "Servizi aeroportuali",
  "body": "Servizi aeroportuali",
  "anchors": [
    {
      "url": "#",
      "text": "Scopri di più"
    },
    {
      "url": "#",
      "text": "Guarda sulla mappa",
      "class": "is-desktop-hidden"
    }
  ],
  "doorbell-chip": {
    "chip-icon": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_directions_walk_black_24px"
    },
    "text": "26 mt."
  },
  "category-color": "#232",
  "link": {
    "url": "#",
    "text": "Guarda tutti"
  }
}
  • Content: 
    .c-doorbell {
  background-color: #fff;
  @include shadow(medium);
  padding: remify(16px);
  display: flex;
  align-items: center;
  border-left: remify(4px) solid;
  border-radius: remify(4px);
  color: secondary(text,100);

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

  .c-airport-map & {
    margin-bottom: remify(8px);

    &:last-child {
      margin-bottom: 0;
    }

  }

}

.c-doorbell__identifiers {

  & > * {
    display: block;
    text-align: center;
  }

  strong {
    margin-top: remify(8px);
    font-size: 125%;
  }

  img {
    max-width: remify(48px);
    max-height: remify(48px);
  }

}

.c-doorbell__text {
  padding-left: remify(24px);
  width: 100%;
}

.c-doorbell__title {
  font-weight: fw(semibold);
  font-size: 125%;
  line-height: 1.4;
}

.c-doorbell__bodytext {
  margin-bottom: remify(16px);
}

.c-doorbell__anchors {
  display: flex;
  justify-content: space-between;

  a.is-desktop-hidden {
    @include min-screen( bp(tablet-p) ) {
      display: none;
    }
  }
}

.c-doorbell__icon {
  width: remify(48px);
  min-width: remify(48px);
  height: remify(48px);
  border-radius: 50%;
  border: 3px solid;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  
  img {
    width: remify(24px);
    height: remify(24px);
  }
}

/*------------------------------------*\
  category modifier
\*------------------------------------*/

.c-doorbell--category {
  a {
    margin-top: remify(8px);
    font-weight: fw(bold);
  }
}

.c-doorbell--full {
  a {
    margin-top: remify(8px);
    font-weight: fw(bold);
  }
}
  • URL: /components/raw/doorbell/_doorbell.scss
  • Filesystem Path: src/views/02-molecules/doorbell/_doorbell.scss
  • Size: 1.6 KB

No notes defined.