Aeroporto di Bologna - Design System

Myblq Banner 

<div class="c-myblq-banner">

    <div grid="grid" class="c-myblq-banner__grid">

        <div grid="4@lg" class="c-myblq-banner__title">
            <p>Registrati per avere accesso alla tua <strong>area personale MyBLQ</strong> e ottieni i seguenti benefici:</p>
        </div>

        <div grid="6@md 4@lg" class="c-myblq-banner__content">
            <ul class="c-myblq-banner__list">
                <li>Accedi all’area riservata MyBLQ</li>
                <li>Gestisci le tue prenotazioni</li>
                <li>Gestisci la targa della tua auto</li>
                <li>Richiedi il rimborso</li>
            </ul>
        </div>

        <div grid="6@md 4@lg" class="c-myblq-banner__action">
            <a href="#" class="c-link c-link--submit">
                <span>Registrati alla MyBLQ</span>
            </a>
        </div>
    </div>

</div>
 
<div class="c-myblq-banner{{#if modifier}} {{modifier}}{{/if}}">
  
  <div grid="grid" class="c-myblq-banner__grid">
    
    <div grid="4@lg" class="c-myblq-banner__title">
      {{{ title }}}
    </div>
    
    <div grid="6@md 4@lg" class="c-myblq-banner__content">
      <ul class="c-myblq-banner__list">
        {{#each signup-list-items}}
        <li>{{ text }}</li>
        {{/each}}
      </ul>
    </div>

    <div grid="6@md 4@lg" class="c-myblq-banner__action">
      {{> @link--submit cta }}
    </div>
  </div>

</div>
 
{
  "title": "<p>Registrati per avere accesso alla tua <strong>area personale MyBLQ</strong> e ottieni i seguenti benefici:</p>",
  "signup-list-items": [
    {
      "text": "Accedi all’area riservata MyBLQ"
    },
    {
      "text": "Gestisci le tue prenotazioni"
    },
    {
      "text": "Gestisci la targa della tua auto"
    },
    {
      "text": "Richiedi il rimborso"
    }
  ],
  "cta": {
    "name": "default",
    "text": "Registrati alla MyBLQ",
    "url": "#",
    "modifier": "c-link--submit"
  }
}
  • Content: 
    .c-myblq-banner {
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);
  padding: remify(24px) remify(32px);
  border-radius: remify(16px);
}

.c-myblq-banner__list li {
  position: relative;
  padding-left: remify(30px);
  color: primary(night, 120);

  &:before {
    content: "";
    position: absolute;
    left: 0;
    width: remify(24px); 
    height: remify(24px);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNSAxNi4xN0w1LjMzIDEyTDMuOTEgMTMuNDFMOS41IDE5TDIxLjUgNy4wMDAwM0wyMC4wOSA1LjU5MDAzTDkuNSAxNi4xN1oiIGZpbGw9IiMwRjJGNEQiLz4KPC9zdmc+Cg==");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

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

}

.c-myblq-banner__grid {
  row-gap: remify(24px);
}

.c-myblq-banner__title {
  @include font-scale(level-5);
  color: primary(night, 100);
  align-self: center;
}

.c-myblq-banner__content {
  @include min-screen(bp(tablet)) {
    place-self: center;
  }
}

.c-myblq-banner__action {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: remify(1px) solid primary(night, 20);
  padding-top: remify(24px);

  @include min-screen(bp(tablet)) {
    padding-top: 0;
    border-top: 0;
    border-left: remify(1px) solid primary(night, 20);
  }
}
  • URL: /components/raw/myblq-banner/_myblq-banner.scss
  • Filesystem Path: src/views/03-organisms/myblq-banner/_myblq-banner.scss
  • Size: 1.5 KB

No notes defined.