Aeroporto di Bologna - Design System

Action Prompt 

<div class="c-action-prompt">
    <div class="c-action-prompt__content">
        <p class="c-action-prompt__title">Attenzione, non chiudere questa pagina!</p>
        <div class="c-action-prompt__text">
            <p>Per non perdere il tuo parcheggio, completa il pagamento.</p>
        </div>
    </div>
    <div class="c-action-prompt__action">
        <button type="button" class="c-button c-button--submit">

            Paga ora

        </button>
    </div>
</div>
 
<div class="c-action-prompt{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-action-prompt__content">
    {{#if title}}<p class="c-action-prompt__title">{{title}}</p>{{/if}}
    {{#if text}}<div class="c-action-prompt__text">{{{text}}}</div>{{/if}}
  </div>
  <div class="c-action-prompt__action">
    {{> @button cta }}
  </div>
</div>
 
{
  "title": "Attenzione, non chiudere questa pagina!",
  "text": "<p>Per non perdere il tuo parcheggio, completa il pagamento.</p>",
  "cta": {
    "type": "button",
    "text": "Paga ora",
    "modifier": "c-button--submit"
  }
}
  • Content: 
    .c-action-prompt {
  background-color: primary(sun, 10);
  padding: remify(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: remify(16px);

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

.c-action-prompt__content {
  color: primary(night, 120);
}

.c-action-prompt__title {
  @include font-scale(level-3, bold);
}

.c-action-prompt__text {
  @include font-scale(level-2);
}

.c-action-prompt__title + .c-action-prompt__text {
  margin-top: remify(8px);
}
  • URL: /components/raw/action-prompt/_action-prompt.scss
  • Filesystem Path: src/views/02-molecules/action-prompt/_action-prompt.scss
  • Size: 535 Bytes

No notes defined.