store-list

Done

HTML
View
Context
Assets
Info
Notes


        
        <section class="store-list">
    <nav class="store-list__content">
        <ul class="store-list__list">
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
            <li class="store-list__item">
                <article class="snippet-d">
                    <header class="snippet-d__header">
                        <h3 class="snippet-d__heading">Store name</h3>

                        <span class="caption">5km</span>
                    </header>

                    <div class="snippet-d__main caption">Streetname lorem xx,<br>2000 Antwerpen</div>

                    <a href="#detail" class="snippet-d__link"></a>

                    <div class="snippet-d__actions actions actions--split actions--force caption">
                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#website" class="link link--underlined">
                                    <span class="link__label">Visit website</span>
                                </a>

                            </div>
                        </div>

                        <div class="actions__item">
                            <div class="snippet-d__action">
                                <a href="#more details" class="link link--underlined">
                                    <span class="link__label">More details</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </article>

            </li>
        </ul>
    </nav>
</section>


        <section class="store-list">
  <nav class="store-list__content">
    <ul class="store-list__list">
      {{#each items}}
        <li class="store-list__item">
          {{render '@snippet-d' this}}
        </li>
      {{/each}}
    </ul>
  </nav>
</section>


        
            
            items:
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined
  - heading: Store name
    distance: 5km
    description: Streetname lorem xx,<br>2000 Antwerpen
    url: '#detail'
    weblink:
      label: Visit website
      url: '#website'
      modifier: underlined
    directionslink:
      label: More details
      url: '#more details'
      modifier: underlined

File:

Content:


                                .store-list {
  position: relative;
  display: flex;
  flex: 1 1 auto;

  @media (min-width: bp('medium')) {
    overflow: auto;
  }
}

.store-list__content {
  display: flex;
  flex: 1 1 auto;
  overflow: auto;
}

.store-list__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-list__item {
  position: relative;
  transition: background-color 200ms;
  padding: calc(var(--gap) * 6) calc(var(--gap) * 4);
  background-color: var(--color--neutrals-0);

  &:hover,
  &.is-active {
    background-color: var(--color--neutrals-1);
  }
}

.store-list__item:before {
  position: absolute;
  bottom: 100%;
  left: calc(var(--gap) * 4);
  right: calc(var(--gap) * 4);
  display: block;
  height: 1px;
  content: '';
  background-color: var(--color--neutrals-2);
}

URL: /components/raw/store-list/store-list.scss
Filesystem Path: ../src/03_molecules/store-list/store-list.scss
Size: 788 Bytes

Handle: @store-list
Preview:
- With layout
- Component only
Filesystem Path: ../src/03_molecules/store-list/store-list.hbs
References (1): @snippet-d
Referenced by (1): @store-map

No notes defined.