Aeroporto di Bologna - Design System

Doorbell 

<div class="c-doorbell c-doorbell--result" style="border-color: #BC2026">
    <div class="c-doorbell__identifiers">
        <img src="../../images/svgs/check_in.gif" alt="Check in (Accettazione)">
        <strong>01</strong>
    </div>
    <div class="c-doorbell__text">
        <p class="c-doorbell__title">Check in (Accettazione)</p>
        <p class="c-doorbell__bodytext">Servizi aeroportuali</p>
        <div class="c-doorbell__anchors">
            <a href="#" class="">Scopri di più</a>
            <a href="#" class="is-desktop-hidden">Guarda sulla mappa</a>

            <div class="c-chip ">

                <svg class="c-icon c-icon--18">
                    <use xlink:href="#ic_directions_walk_black_24px"></use>
                </svg>
                <span>26 mt.</span>

            </div>
        </div>
    </div>
</div>
 
<div class="c-doorbell {{ modifier }}" style="border-color: {{ border-color }}">
  <div class="c-doorbell__identifiers">
    {{#if img}}
      <img src="{{ path img.src }}" alt="{{ img.alt }}">
    {{/if}}
    {{#if number}}
      <strong>{{ number }}</strong>
    {{/if}}
  </div>
  <div class="c-doorbell__text">
    <p class="c-doorbell__title">{{{ title }}}</p>
    <p class="c-doorbell__bodytext">{{{ body }}}</p>
    <div class="c-doorbell__anchors">
      {{#each anchors}}
        <a href="{{ this.url }}" class="{{ this.class }}">{{ this.text }}</a>
      {{/each}}

        {{> @chip doorbell-chip }}
    </div>
  </div>
</div>
 
{
  "modifier": "c-doorbell--result",
  "border-color": "#BC2026",
  "img": {
    "src": "/images/svgs/check_in.gif",
    "alt": "Check in (Accettazione)"
  },
  "number": "01",
  "title": "Check in (Accettazione)",
  "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."
  }
}
  • 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.