Aeroporto di Bologna - Design System

Helpdesk 

<div class="c-helpdesk  " role="banner">

    <h3>Hai bisogno di aiuto?</h3>

    <div class="c-helpdesk__inner c-cards o-cards c-cards--helpdesk">

        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card c-card--help " aria-label="">

                <img src="../../images/svgs/stk_help_center.svg" class="o-card__img" alt="Assistenza clienti" aria-hidden="true">

                <a href="" class="c-card__text o-card__text">
                    Assistenza clienti <span aria-hidden="true">&#8594;</span>
                </a>

            </div>
        </div>
        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card c-card--help " aria-label="">

                <img src="../../images/svgs/stk_faq.svg" class="o-card__img" alt="Domande frequenti" aria-hidden="true">

                <a href="" class="c-card__text o-card__text">
                    Domande frequenti <span aria-hidden="true">&#8594;</span>
                </a>

            </div>
        </div>
        <div class="c-cards__item js-inverse-hover-item">
            <div class="c-card o-card c-card--help " aria-label="">

                <img src="../../images/svgs/stk_write_us.svg" class="o-card__img" alt="Info o reclami" aria-hidden="true">

                <a href="" class="c-card__text o-card__text">
                    Scrivici per info o reclami <span aria-hidden="true">&#8594;</span>
                </a>

            </div>
        </div>

    </div>

</div>
 
<div class="c-helpdesk {{ modifier }} " role="banner">
  
  <h3>{{ title }}</h3>

  <div class="c-helpdesk__inner c-cards o-cards c-cards--helpdesk">
    
    {{#each cards}}
      <div class="c-cards__item js-inverse-hover-item">
        {{> @card--help }}
      </div>
    {{/each}}

  </div>

</div>
 
{
  "title": "Hai bisogno di aiuto?",
  "cards": [
    {
      "id": "assistance",
      "img-path": "/images/svgs/stk_help_center.svg",
      "img-alt": "Assistenza clienti",
      "text": "Assistenza clienti <span aria-hidden=\"true\">&#8594;</span>"
    },
    {
      "id": "faq",
      "img-path": "/images/svgs/stk_faq.svg",
      "img-alt": "Domande frequenti",
      "text": "Domande frequenti <span aria-hidden=\"true\">&#8594;</span>"
    },
    {
      "id": "info-reclaim",
      "img-path": "/images/svgs/stk_write_us.svg",
      "img-alt": "Info o reclami",
      "text": "Scrivici per info o reclami <span aria-hidden=\"true\">&#8594;</span>"
    }
  ]
}
  • Content: 
    .c-helpdesk {
  background: #fff;
  padding: remify(24px) 0 remify(16px);
  margin-top: remify(48px);

  h3 {
    font-size: 150%;
    line-height: 1.333;
    text-align: center;
    color: primary(night, 100);
    margin-bottom: remify(16px);
  }

}

.c-helpdesk__inner {
  width: 100%;
  max-width: remify($base-page-width);
  margin: 0 auto;
}

/*------------------------------------*\
  Contacts modifier
\*------------------------------------*/

.c-helpdesk--contacts {
  padding: remify(56px) 0;

  main & {
    grid-column: full;
  }

  .c-helpdesk__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .c-helpdesk__inner > * {
    padding: remify(16px) remify(32px);
  }

}

/*------------------------------------*\
  Map detail view modifier
\*------------------------------------*/

.c-helpdesk--map-detail {
  display: none;
    
  @include min-screen (bp(tablet-p)) {
    display: block;
  }
}
  • URL: /components/raw/helpdesk/_helpdesk.scss
  • Filesystem Path: src/views/03-organisms/helpdesk/_helpdesk.scss
  • Size: 961 Bytes

No notes defined.