Aeroporto di Bologna - Design System

Contact strip 

<div class="c-contact-strip ">

    <div class="c-contact-strip__wrapper">
        <div class="c-contact-strip__el">
            <figure>
                <img src="../../images/flight-companies/aegean-scheda-compagnia.png" alt="Aegean">
            </figure>
            <strong class="u-mr-space-16">Aegean Airlines</strong>
            <span>Codice: A3</span>
        </div>

        <div class="c-contact-strip__el">
            <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
        </div>

        <div class="c-contact-strip__el is-last">
            <a href="#">Scopri le destinazioni <span aria-hidden="true">&#8594;</span></a>
        </div>
    </div>

</div>
 
<div class="c-contact-strip {{ modifier }}">

  {{#if rounded-label}}
  {{> @rounded-label rounded-label }}
  {{/if}}
  <div class="c-contact-strip__wrapper">
    <div class="c-contact-strip__el">
      <figure>
        <img src="{{ path logo.path }}" alt="{{ logo.alt }}">
      </figure>
      <strong class="u-mr-space-16">{{ strong-text }}</strong>
      <span>{{ small-text }}</span>
    </div>

    <div class="c-contact-strip__el">
      {{{ body-contact-info }}}
    </div>

    <div class="c-contact-strip__el is-last">
      <a href="{{ link.url }}">{{{ link.text }}}</a>
    </div>
  </div>
  
</div>
 
{
  "logo": {
    "path": "/images/flight-companies/aegean-scheda-compagnia.png",
    "alt": "Aegean"
  },
  "small-text": "Codice: A3",
  "strong-text": "Aegean Airlines",
  "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
  "link": {
    "url": "#",
    "text": "Scopri le destinazioni <span aria-hidden=\"true\">&#8594;</span>"
  }
}
  • Content: 
    .c-contact-strip {
  padding: remify(16px);
  background-color: secondary(soft, 100);
  border: 1px solid primary(night, 20);
  border-radius: remify(16px);
  @include shadow(medium);
  text-align: center;

   @include min-screen(bp(tablet)) {
    text-align: left;
  }

  .c-contact-strip__wrapper {
    @include min-screen(bp(tablet)) {
      display: flex;
      flex: 1;
      justify-content: space-between;
    }
  }

  main & {
    grid-column: main;
  }

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

  .c-rounded-label {
    margin: 0 auto remify(8px);
    line-height: 1;

    @include min-screen(bp(tablet)) {
      margin-bottom: remify(4px);
    }

    .icon {
      font-size: remify(24px);
      transform: rotate(-90deg);
      vertical-align: middle;
      margin-right: remify(4px);
    }
    strong {
      @include font-scale(level-1, bold);
    }
  }
  .c-contact-strip__el {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: remify(16px);

    @include min-screen(bp(tablet)) {
      margin-bottom: 0;
      flex: 1;
      flex-direction: row;
      justify-content: flex-start;
      padding: 0 remify(8px);

      &.is-last {
        justify-content: flex-end;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
    
    a {
      color: primary(night, 120);
    }

  }

  figure {
    margin-right: remify(16px);
  }

  figcaption {
    font-size: 75%;
    text-align: center;
    margin-top: remify(4px);
  }

}

.c-contact-strip + .c-contact-strip {
  margin-top: remify(16px);
}
  • URL: /components/raw/contact-strip/_contact-strip.scss
  • Filesystem Path: src/views/02-molecules/contact-strip/_contact-strip.scss
  • Size: 1.6 KB

No notes defined.