Aeroporto di Bologna - Design System

Auth Gate 

<div class="c-auth-gate">

    <div class="c-auth-gate__block c-auth-gate__block--guest">
        <div class="c-auth-gate__cta">
            <button type="button" class="c-button c-button--submit">

                Continua come ospite

            </button>
        </div>
        <div class="c-auth-gate__content">
            <ul class="c-auth-gate__content-list">
                <li>Valido solo per utenti privati</li>
            </ul>
        </div>
    </div>

    <div class="c-auth-gate__separator">
        <span>Oppure</span>
    </div>

    <div class="c-auth-gate__block c-auth-gate__block--signup">
        <div class="c-auth-gate__cta">
            <button type="button" class="c-button c-button">

                Registrati con la tua email

            </button>
        </div>
        <div class="c-auth-gate__content">
            <p class="c-auth-gate__content-title">Ottieni i seguenti benefici:</p>
            <ul class="c-auth-gate__content-list">
                <li>Accedi all’area riservata MyBLQ</li>
                <li>Gestisci le tue prenotazioni</li>
                <li>Gestisci la targa della tua auto</li>
                <li>Acquista come azienda</li>
                <li>Richiedi il rimborso</li>
            </ul>
        </div>
    </div>

</div>
 
<div class="c-auth-gate{{#if modifier}} {{modifier}}{{/if}}">
  
  <div class="c-auth-gate__block c-auth-gate__block--guest">
    <div class="c-auth-gate__cta">
      {{> @button cta-guest }}
    </div>
    <div class="c-auth-gate__content">
      <ul class="c-auth-gate__content-list">
        {{#each guest-list-items}}
        <li>{{ text }}</li>
        {{/each}}
      </ul>
    </div>
  </div>

  <div class="c-auth-gate__separator">
    <span>Oppure</span>
  </div>

  <div class="c-auth-gate__block c-auth-gate__block--signup">
    <div class="c-auth-gate__cta">
      {{> @button cta-signup }}
    </div>
    <div class="c-auth-gate__content">
      <p class="c-auth-gate__content-title">Ottieni i seguenti benefici:</p>
      <ul class="c-auth-gate__content-list">
        {{#each signup-list-items}}
        <li>{{ text }}</li>
        {{/each}}
      </ul>
    </div>
  </div>

</div>
 
{
  "cta-guest": {
    "type": "button",
    "text": "Continua come ospite",
    "modifier": "c-button--submit"
  },
  "guest-list-items": [
    {
      "text": "Valido solo per utenti privati"
    }
  ],
  "cta-signup": {
    "type": "button",
    "text": "Registrati con la tua email",
    "modifier": "c-button"
  },
  "signup-list-items": [
    {
      "text": "Accedi all’area riservata MyBLQ"
    },
    {
      "text": "Gestisci le tue prenotazioni"
    },
    {
      "text": "Gestisci la targa della tua auto"
    },
    {
      "text": "Acquista come azienda"
    },
    {
      "text": "Richiedi il rimborso"
    }
  ]
}
  • Content: 
    .c-auth-gate__block {
  padding: remify(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: remify(16px);

  @include min-screen(bp(phablet)) {
    padding: remify(24px) remify(32px);
    flex-direction: row;
    justify-content: space-between;
  }
}

.c-auth-gate__content {
  @include min-screen(bp(phablet)) {
    flex-basis: remify(300px);
  }
}

.c-auth-gate__content-title {
  @include font-scale(level-3);
  color: secondary(text, 100);
  font-weight: fw(semibold);
  margin-bottom: remify(16px);
}

.c-auth-gate__content-list li {
  position: relative;
  padding-left: remify(30px);

  &: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-auth-gate__block--guest {
  padding-inline: 0;

  @include min-screen(bp(phablet)) {
    padding-inline: remify(32px);
  }
}

.c-auth-gate__block--signup {
  flex-direction: column-reverse;
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);
  border-radius: remify(16px);
  position: relative;
  gap: remify(32px);

  @include min-screen(bp(phablet)) {
    flex-direction: row;
    gap: remify(16px);
  }

  @include min-screen(bp(tablet)) {
    &:before {
      content: "";
      width: 1px;
      height: calc(100% - 48px);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-24px, -50%);
      background-color: primary(night, 20);
    }
  }
}

.c-auth-gate__separator {
  text-align: center;
  margin-block: remify(16px) remify(32px);
  position: relative;
  
  span {
    background-color: #fff;
    padding-inline: remify(32px);
    position: relative;
    color: secondary(text, 100);
    @include font-scale(level-2);
    font-weight: fw(bold);
  }

  &:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: primary(night, 40);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    position: absolute;
  }
}
  • URL: /components/raw/auth-gate/_auth-gate.scss
  • Filesystem Path: src/views/03-organisms/auth-gate/_auth-gate.scss
  • Size: 2.5 KB

No notes defined.