Aeroporto di Bologna - Design System

Prefooter 

<div class="c-prefooter  " role="banner">
    <div class="c-prefooter__inner">
        <div class="c-prefooter__col">
            <div class="c-prefooter__item">
                <h2>Hai bisogno di aiuto?</h2>
                <ul class="c-prefooter__list">
                    <li class="c-prefooter__faq">
                        <a href="#">Il presidio parcheggi è sempre aperto? <span aria-hidden="true">&#8594;</span></a>
                    </li>
                    <li class="c-prefooter__faq">
                        <a href="#">Ho smarrito il mio biglietto del parcheggio, cosa posso fare <span aria-hidden="true">&#8594;</span></a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="c-prefooter__col">
            <div class="c-media o-media ">
                <img class="c-media__figure o-media__figure" src="../../images/prefooter.png" alt="" height="" width="170">
                <div class="c-media__body o-media__body">

                </div>
            </div>
            <div class="c-prefooter__item">
                <h2>Ti potrebbero servire</h2>
                <ul class="c-prefooter__list">
                    <li class="c-prefooter__faq">
                        <a href="#">Assistenza Clienti <span aria-hidden="true">&#8594;</span></a>
                    </li>
                    <li class="c-prefooter__faq">
                        <a href="#">Info e reclami <span aria-hidden="true">&#8594;</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="c-prefooter {{ modifier }} " role="banner">
  <div class="c-prefooter__inner">
    <div class="c-prefooter__col">
      <div class="c-prefooter__item">
        <h2>{{ title_faq  }}</h2>
        <ul class="c-prefooter__list">
          {{#each faqs}}
            <li class="c-prefooter__faq">
              {{{ text }}}
            </li>
          {{/each}}
        </ul>
      </div>
    </div>

    <div class="c-prefooter__col">
      {{> @media--default needs_image }}
      <div class="c-prefooter__item">
        <h2>{{ title_needs  }}</h2>
        <ul class="c-prefooter__list">
          {{#each needs}}
            <li class="c-prefooter__faq">
              {{{ text }}}
            </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</div>
 
{
  "title_faq": "Hai bisogno di aiuto?",
  "faqs": [
    {
      "text": "<a href=\"#\">Il presidio parcheggi è sempre aperto? <span aria-hidden=\"true\">&#8594;</span></a>"
    },
    {
      "text": "<a href=\"#\">Ho smarrito il mio biglietto del parcheggio, cosa posso fare <span aria-hidden=\"true\">&#8594;</span></a>"
    }
  ],
  "title_needs": "Ti potrebbero servire",
  "needs_image": {
    "modifier": "",
    "img-src": "/images/prefooter.png",
    "img-alt": "",
    "img-width": "170",
    "body": ""
  },
  "needs": [
    {
      "text": "<a href=\"#\">Assistenza Clienti <span aria-hidden=\"true\">&#8594;</span></a>"
    },
    {
      "text": "<a href=\"#\">Info e reclami <span aria-hidden=\"true\">&#8594;</span></a>"
    }
  ]
}
  • Content: 
    .c-prefooter {
  background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
  margin-top: remify(48px);

  h2 {
    font-size: remify(20px);
    font-weight: fw(bold);
    color: primary(night, 100);
    margin-bottom: remify(24px);
  }

  .c-prefooter__item {
    &, & a {
      font-size: remify(16px);
      color: primary(night, 100);
      line-height: 1.6;
    }

    li {margin-bottom: remify(24px);}
  }

  .c-prefooter__inner {
    max-width: remify($base-page-width);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding: remify(48px) remify(24px) remify(24px);

    @include min-screen(bp(tablet-p)) { 
      flex-direction: row;
    }
  }

  .c-prefooter__col {
    text-align: left;
    
    @include min-screen(bp(tablet-p)) { 
      width: 50%;
      display: flex;
      justify-content: flex-start;
    }

    .c-media  {
      display: none;
      @include min-screen(bp(tablet-p)) { 
        display: block;
        position: relative;
        top: remify(-16px);
      }
    }
  }

}

.c-prefooter__list {
  padding-bottom: remify(24px);
}
  • URL: /components/raw/prefooter/_prefooter.scss
  • Filesystem Path: src/views/03-organisms/prefooter/_prefooter.scss
  • Size: 1.2 KB

No notes defined.