Aeroporto di Bologna - Design System

Search listing 

<div class="c-search-listing ">
    <ul>
        <li>
            <div class="c-skyscreaper c-skyscreaper--extra">

                <div class="c-skyscreaper__content">
                    <div class="c-skyscreaper__date-tag">
                        <p class="c-skyscreaper__tag">Servizi</p>
                    </div>
                    <p class="c-skyscreaper__title">Safe Bag - Avvolgimento bagagli</p>

                    <p class="c-skyscreaper__description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!
                    </p>
                    <a class="c-skyscreaper__readmore" href="#">Leggi di più &#x2192;</a>
                </div>

            </div>
        </li>
        <li>
            <div class="c-skyscreaper c-skyscreaper--extra">

                <div class="c-skyscreaper__content">
                    <div class="c-skyscreaper__date-tag">
                        <p class="c-skyscreaper__tag">Partire da Bologna</p>
                    </div>
                    <p class="c-skyscreaper__title">Bagagli</p>

                    <p class="c-skyscreaper__description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!
                    </p>
                    <a class="c-skyscreaper__readmore" href="#">Leggi di più &#x2192;</a>
                </div>

            </div>
        </li>
        <li>
            <div class="c-skyscreaper c-skyscreaper--extra">

                <div class="c-skyscreaper__content">
                    <div class="c-skyscreaper__date-tag">
                        <p class="c-skyscreaper__tag">Servizi</p>
                    </div>
                    <p class="c-skyscreaper__title">Safe Bag - Avvolgimento bagagli</p>

                    <p class="c-skyscreaper__description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!
                    </p>
                    <a class="c-skyscreaper__readmore" href="#">Leggi di più &#x2192;</a>
                </div>

            </div>
        </li>
        <li>
            <div class="c-skyscreaper c-skyscreaper--extra">

                <div class="c-skyscreaper__content">
                    <div class="c-skyscreaper__date-tag">
                        <p class="c-skyscreaper__tag">Partire da Bologna</p>
                    </div>
                    <p class="c-skyscreaper__title">Bagagli</p>

                    <p class="c-skyscreaper__description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!
                    </p>
                    <a class="c-skyscreaper__readmore" href="#">Leggi di più &#x2192;</a>
                </div>

            </div>
        </li>
        <li>
            <div class="c-skyscreaper c-skyscreaper--extra">

                <div class="c-skyscreaper__content">
                    <div class="c-skyscreaper__date-tag">
                        <p class="c-skyscreaper__tag">Servizi</p>
                    </div>
                    <p class="c-skyscreaper__title">Safe Bag - Avvolgimento bagagli</p>

                    <p class="c-skyscreaper__description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!
                    </p>
                    <a class="c-skyscreaper__readmore" href="#">Leggi di più &#x2192;</a>
                </div>

            </div>
        </li>
        <li>
            <div class="c-skyscreaper c-skyscreaper--extra">

                <div class="c-skyscreaper__content">
                    <div class="c-skyscreaper__date-tag">
                        <p class="c-skyscreaper__tag">Partire da Bologna</p>
                    </div>
                    <p class="c-skyscreaper__title">Bagagli</p>

                    <p class="c-skyscreaper__description">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!
                    </p>
                    <a class="c-skyscreaper__readmore" href="#">Leggi di più &#x2192;</a>
                </div>

            </div>
        </li>
    </ul>
</div>
 
<div class="c-search-listing {{ modifier }}">
  <ul>
    {{#each items}}
    <li>
      {{> @skyscreaper--extra search-result }}
    </li>
    {{/each}}
  </ul>
</div>
 
{
  "items": [
    {
      "search-result": {
        "img-path": false,
        "tag": "Servizi",
        "title": "Safe Bag - Avvolgimento bagagli",
        "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!",
        "readmore": {
          "url": "#",
          "text": "Leggi di più &#x2192;"
        }
      }
    },
    {
      "search-result": {
        "img-path": false,
        "tag": "Partire da Bologna",
        "title": "Bagagli",
        "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!",
        "readmore": {
          "url": "#",
          "text": "Leggi di più &#x2192;"
        }
      }
    },
    {
      "search-result": {
        "img-path": false,
        "tag": "Servizi",
        "title": "Safe Bag - Avvolgimento bagagli",
        "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!",
        "readmore": {
          "url": "#",
          "text": "Leggi di più &#x2192;"
        }
      }
    },
    {
      "search-result": {
        "img-path": false,
        "tag": "Partire da Bologna",
        "title": "Bagagli",
        "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!",
        "readmore": {
          "url": "#",
          "text": "Leggi di più &#x2192;"
        }
      }
    },
    {
      "search-result": {
        "img-path": false,
        "tag": "Servizi",
        "title": "Safe Bag - Avvolgimento bagagli",
        "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!",
        "readmore": {
          "url": "#",
          "text": "Leggi di più &#x2192;"
        }
      }
    },
    {
      "search-result": {
        "img-path": false,
        "tag": "Partire da Bologna",
        "title": "Bagagli",
        "description": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus quaerat sunt vel incidunt nam natus? Doloremque quod aliquam ut, debitis atque dolorem saepe commodi repudiandae est excepturi, dolore quibusdam. Excepturi!",
        "readmore": {
          "url": "#",
          "text": "Leggi di più &#x2192;"
        }
      }
    }
  ]
}
  • Content: 
    .c-search-listing {
  max-width: remify(670px);
  margin: remify(32px) auto;
  width: 100%;

  @include min-screen(bp(tablet)) {
    margin: remify(40px) auto;
  }

  main & {
    grid-column: main;
  }

  li+li {
    margin-top: remify(16px);
  }

  .c-skyscreaper__title {
    color: primary(night, 100);
  }
}
  • URL: /components/raw/search-listing/_search-listing.scss
  • Filesystem Path: src/views/03-organisms/search-listing/_search-listing.scss
  • Size: 313 Bytes

No notes defined.