Aeroporto di Bologna - Design System

Companies list 

<div class="c-companies-list">

    <ul>
        <li>
            <div class="c-contact-strip ">

                <div class="c-contact-strip__wrapper">
                    <div class="c-contact-strip__el">
                        <figure>
                            <img src="../../images/flight-companies/aegean-scheda-compagnia.png" alt="Aegean">
                        </figure>
                        <strong class="u-mr-space-16">Aegean Airlines</strong>
                        <span>Codice: A3</span>
                    </div>

                    <div class="c-contact-strip__el">
                        <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
                    </div>

                    <div class="c-contact-strip__el is-last">
                        <a href="pippo">Scopri le destinazioni &#8594;</a>
                    </div>
                </div>

            </div>
        </li>
        <li>
            <div class="c-contact-strip ">

                <div class="c-contact-strip__wrapper">
                    <div class="c-contact-strip__el">
                        <figure>
                            <img src="../../images/flight-companies/britishairways.gif" alt="British Airways">
                        </figure>
                        <strong class="u-mr-space-16">British Airways</strong>
                        <span>Codice: A4</span>
                    </div>

                    <div class="c-contact-strip__el">
                        <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
                    </div>

                    <div class="c-contact-strip__el is-last">
                        <a href="pippo">Scopri le destinazioni &#8594;</a>
                    </div>
                </div>

            </div>
        </li>
        <li>
            <div class="c-contact-strip ">

                <div class="c-contact-strip__wrapper">
                    <div class="c-contact-strip__el">
                        <figure>
                            <img src="../../images/flight-companies/easyJet.gif" alt="Easyjet">
                        </figure>
                        <strong class="u-mr-space-16">Easyjet</strong>
                        <span>Codice: A5</span>
                    </div>

                    <div class="c-contact-strip__el">
                        <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
                    </div>

                    <div class="c-contact-strip__el is-last">
                        <a href="pippo">Scopri le destinazioni &#8594;</a>
                    </div>
                </div>

            </div>
        </li>
        <li>
            <div class="c-contact-strip ">

                <div class="c-contact-strip__wrapper">
                    <div class="c-contact-strip__el">
                        <figure>
                            <img src="../../images/flight-companies/iberia_nuovo_logo.gif" alt="Iberia">
                        </figure>
                        <strong class="u-mr-space-16">Iberia</strong>
                        <span>Codice: A6</span>
                    </div>

                    <div class="c-contact-strip__el">
                        <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
                    </div>

                    <div class="c-contact-strip__el is-last">
                        <a href="pippo">Scopri le destinazioni &#8594;</a>
                    </div>
                </div>

            </div>
        </li>
        <li>
            <div class="c-contact-strip ">

                <div class="c-contact-strip__wrapper">
                    <div class="c-contact-strip__el">
                        <figure>
                            <img src="../../images/flight-companies/klm.gif" alt="KLM">
                        </figure>
                        <strong class="u-mr-space-16">KLM</strong>
                        <span>Codice: A7</span>
                    </div>

                    <div class="c-contact-strip__el">
                        <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
                    </div>

                    <div class="c-contact-strip__el is-last">
                        <a href="pippo">Scopri le destinazioni &#8594;</a>
                    </div>
                </div>

            </div>
        </li>
        <li>
            <div class="c-contact-strip ">

                <div class="c-contact-strip__wrapper">
                    <div class="c-contact-strip__el">
                        <figure>
                            <img src="../../images/flight-companies/logo-fr.png" alt="Ryanair">
                        </figure>
                        <strong class="u-mr-space-16">Ryanair</strong>
                        <span>Codice: A7</span>
                    </div>

                    <div class="c-contact-strip__el">
                        <p>Call center: 069 7150532-33 <a href="#">www.aegeanair.com</a></p>
                    </div>

                    <div class="c-contact-strip__el is-last">
                        <a href="pippo">Scopri le destinazioni &#8594;</a>
                    </div>
                </div>

            </div>
        </li>
    </ul>

</div>
 
<div class="c-companies-list">
  
  <ul>
    {{#each items}}
      <li>
        {{ render componentName componentInstance merge=true }}
      </li>
    {{/each}}
  </ul>

</div>
 
{
  "searching-list": {
    "modifier": "c-list-search--inline",
    "inputComponentName": "@select",
    "inputComponentInstance": {
      "name": "default",
      "label_id": "select-field",
      "label_message": "Label:",
      "label_class": null,
      "atom-select": {
        "id": "select-field",
        "class": null,
        "required": true,
        "hasNote": true,
        "describedby": "select-note",
        "placeholder": "Seleziona la compagnia",
        "options": [
          {
            "value": "option-1",
            "text": "Voli di linea"
          },
          {
            "value": "option-2",
            "text": "Voli charter"
          },
          {
            "value": "option-3",
            "text": "Aer Lingus"
          }
        ]
      },
      "note_id": "select-note",
      "note_message": "Seleziona una opzione dal menù a tendina",
      "note_class": "u-visuallyhidden"
    },
    "middle-text": "oppure consulta",
    "hasExtra": true,
    "componentName": "@media",
    "componentInstance": {
      "img-src": "/images/svgs/pdf.svg",
      "img-alt": "PDF orari voli estate 2018",
      "img-width": "32",
      "body": "<a href=\"#\"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb"
    }
  },
  "items": [
    {
      "componentName": "@contact-strip",
      "componentInstance": {
        "logo": {
          "path": "/images/flight-companies/aegean-scheda-compagnia.png",
          "alt": "Aegean"
        },
        "small-text": "Codice: A3",
        "strong-text": "Aegean Airlines",
        "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
        "link": {
          "url": "pippo",
          "text": "Scopri le destinazioni &#8594;"
        }
      }
    },
    {
      "componentName": "@contact-strip",
      "componentInstance": {
        "logo": {
          "path": "/images/flight-companies/britishairways.gif",
          "alt": "British Airways"
        },
        "small-text": "Codice: A4",
        "strong-text": "British Airways",
        "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
        "link": {
          "url": "pippo",
          "text": "Scopri le destinazioni &#8594;"
        }
      }
    },
    {
      "componentName": "@contact-strip",
      "componentInstance": {
        "logo": {
          "path": "/images/flight-companies/easyJet.gif",
          "alt": "Easyjet"
        },
        "small-text": "Codice: A5",
        "strong-text": "Easyjet",
        "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
        "link": {
          "url": "pippo",
          "text": "Scopri le destinazioni &#8594;"
        }
      }
    },
    {
      "componentName": "@contact-strip",
      "componentInstance": {
        "logo": {
          "path": "/images/flight-companies/iberia_nuovo_logo.gif",
          "alt": "Iberia"
        },
        "small-text": "Codice: A6",
        "strong-text": "Iberia",
        "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
        "link": {
          "url": "pippo",
          "text": "Scopri le destinazioni &#8594;"
        }
      }
    },
    {
      "componentName": "@contact-strip",
      "componentInstance": {
        "logo": {
          "path": "/images/flight-companies/klm.gif",
          "alt": "KLM"
        },
        "small-text": "Codice: A7",
        "strong-text": "KLM",
        "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
        "link": {
          "url": "pippo",
          "text": "Scopri le destinazioni &#8594;"
        }
      }
    },
    {
      "componentName": "@contact-strip",
      "componentInstance": {
        "logo": {
          "path": "/images/flight-companies/logo-fr.png",
          "alt": "Ryanair"
        },
        "small-text": "Codice: A7",
        "strong-text": "Ryanair",
        "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
        "link": {
          "url": "pippo",
          "text": "Scopri le destinazioni &#8594;"
        }
      }
    }
  ]
}
  • Content: 
    .c-companies-list {
  width: 100%;
  margin: 0 auto remify(80px);
  
  @include min-screen(bp(tablet)) {
    margin-bottom: remify(176px)
  }

  main & {
    grid-column: main;
  }

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

}
  • URL: /components/raw/companies-list/_companies-list.scss
  • Filesystem Path: src/views/03-organisms/companies-list/_companies-list.scss
  • Size: 245 Bytes

No notes defined.