Aeroporto di Bologna - Design System

Instructions 

<div class="c-instructions ">

    <div class="c-instructions__main">

        <strong class="c-instructions__label">In aeroporto</strong>

        <p class="c-instructions__title">
            <svg class="c-icon c-icon--24">
                <use xlink:href="#ic-parking-sign-24px"></use>
            </svg>
            Parcheggi
        </p>

        <div class="c-instructions__body">
            <p>Devi parcheggiare per poco tempo? <a href="#">Scopri i parcheggi per la sosta breve</a>.</p>
            <p>Ti serve sostare per più tempo? <a href="#">Scopri i parcheggi ufficiali dell'aeroporto</a></p>
        </div>

    </div>

    <div class="c-instructions__media ">
        <img class="u-OF-cover" src="/images/teaser-breakfast.jpg" alt="">
    </div>

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

  <div class="c-instructions__main">
    
    {{#if label}}
      <strong class="c-instructions__label">{{ label }}</strong>
    {{/if}}

    <p class="c-instructions__title">
      {{#if icon}}{{> @icon icon }}{{/if}}
      {{ title }}
    </p>

    <div class="c-instructions__body">
      {{{ body }}}
    </div>

  </div>

  {{#if media}}
  <div class="c-instructions__media {{ media-modifier }}">
    {{{ media }}}
  </div>
  {{/if}}

</div>
 
{
  "label": "In aeroporto",
  "icon": {
    "class": "c-icon c-icon--24",
    "symbol": "ic-parking-sign-24px"
  },
  "title": "Parcheggi",
  "body": "<p>Devi parcheggiare per poco tempo? <a href=\"#\">Scopri i parcheggi per la sosta breve</a>.</p><p>Ti serve sostare per più tempo? <a href=\"#\">Scopri i parcheggi ufficiali dell'aeroporto</a></p>",
  "media": "<img class=\"u-OF-cover\" src=\"/images/teaser-breakfast.jpg\" alt=\"\">"
}
  • Content: 
    .c-instructions {
  color: primary(night, 100);

  @include min-screen(bp(tablet)) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}

.c-instructions strong {
  display: block;
}

.c-instructions__label {
  font-weight: fw(bold);
  margin-bottom: remify(16px);

  @include min-screen(bp(tablet)) {
    font-size: 150%;
  }

}

.c-instructions__title {
  font-weight: fw(bold);
  margin-bottom: remify(16px);

  @include min-screen(bp(tablet)) {
    font-size: 150%;
  }

  svg {
    vertical-align: sub;
    margin-right: remify(8px);
    * {
      fill: currentColor;
    }
  }

}

.c-instructions__body {
  color: secondary(text, 100);
  margin-bottom: remify(24px);

  ul > li {
    margin-bottom: remify(8px);
  }

  p + p {
    margin-top: remify(8px);
  }

  strong {
    display: inline;
  }

  .is-positive {
    color: status(positive);
  }

  .is-negative {
    color: status(negative);
  }

}

.c-instructions__title,
.c-instructions__body {
  @include min-screen(bp(tablet)) {
    padding-left: remify(0px);
  }
}

.c-instructions__main {
  padding: remify(16px);

  @include min-screen(bp(tablet)) {
    flex-basis: 70%;
    flex-grow: 1;
  }
}

.c-instructions__media {
  padding: remify(8px);
  text-align: center;

  @include min-screen(bp(tablet)) {
    flex-basis: 30%;
  }

  img {
    width: 100%;
    height: remify(200px);
    border-radius: remify(4px);
  }

  .meet-greet {
    display: flex;
    align-items: center;
    justify-content: space-around;

    li {
      padding: remify(4px);
    }

    img {
      height: remify(70px);
    }

    a {
      font-size: 75%;
      display: block;
      font-weight: fw(semibold);
      margin-top: remify(8px);
    }

  }

}
  • URL: /components/raw/instructions/_instructions.scss
  • Filesystem Path: src/views/02-molecules/instructions/_instructions.scss
  • Size: 1.7 KB

No notes defined.