Article List Page

Ready

HTML
View
Context
Info
Notes


        
        <section class="panel theme--grey 
    panel--compact 
    panel--no-padding-bottom ">
    <div class="panel__inner">
        <h2>Archive</h2>
        <div class="content-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis eu et integer elit. Magna nunc mauris fames neque, enim.</p>
        </div>
    </div>
</section>
<section class="panel theme--grey 
    panel--compact 
    panel--no-padding-top 
    panel--no-padding-bottom ">
    <div class="panel__inner">
        <div class="
        horizontal-scroller
 " data-show-scroll-icon="">
            <div class="horizontal-scroller__scroller">
                <div class="h-display-flex">
                    <div class="h-padding-right-1">
                        <a class="button button--rounded button--ghost  " href="#">
                            <span class="button__label">All</span>
                        </a>
                    </div>
                    <div class="h-padding-right-1">
                        <a class="button button--rounded  " href="#">
                            <span class="button__label">News</span>
                        </a>
                    </div>
                    <div class="h-padding-right-1">
                        <a class="button button--rounded button--ghost  " href="#">
                            <span class="button__label">Case studies</span>
                        </a>
                    </div>
                    <div class="h-padding-right-1">
                        <a class="button button--rounded button--ghost  " href="#">
                            <span class="button__label">Seminars</span>
                        </a>
                    </div>
                    <div class="h-padding-right-1">
                        <a class="button button--rounded button--ghost  " href="#">
                            <span class="button__label">Webinars</span>
                        </a>
                    </div>
                    <div class="h-padding-right-1">
                        <a class="button button--rounded button--ghost  " href="#">
                            <span class="button__label">Technical articles</span>
                        </a>
                    </div>
                    <div class="h-padding-right-1">
                        <a class="button button--rounded button--ghost  " href="#">
                            <span class="button__label">Research</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="panel theme--grey 
    panel--no-padding-top 
    panel--compact ">
    <div class="panel__inner">
        <div class="filters js-filters js-loader-overlay-holder" aria-controls="filter-documents-list">

            <div class="h-margin-bottom-2">
                <div class="row h-margin-bottom-1 js-dropdowns-holder ">
                </div>

                <div class="row row--justify-between h-margin-bottom-1">
                    <div class="col col--auto-width">
                        <div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
                            <div class="form-item">

                                <div class="checkbox__item ">
                                    <label class="checkbox__label js-filter" for="Produktblad">
                                        <input class="checkbox__input js-filter" type="checkbox" name="Produktblad" id="Produktblad" value="Produktblad" aria-controls="filter-cards-grid" data-type="checkbox" data-enable-history="true">
                                        <span class="checkbox__title">Produktblad</span>
                                    </label>
                                </div>

                            </div>

                        </div>
                        <div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
                            <div class="form-item">

                                <div class="checkbox__item ">
                                    <label class="checkbox__label js-filter" for="Manual">
                                        <input class="checkbox__input js-filter" type="checkbox" name="Manual" id="Manual" value="Manual" aria-controls="filter-cards-grid" data-type="checkbox" data-enable-history="true">
                                        <span class="checkbox__title">Manual</span>
                                    </label>
                                </div>

                            </div>

                        </div>
                        <div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
                            <div class="form-item">

                                <div class="checkbox__item ">
                                    <label class="checkbox__label js-filter" for="Broschyrer">
                                        <input class="checkbox__input js-filter" type="checkbox" name="Broschyrer" id="Broschyrer" value="Broschyrer" aria-controls="filter-cards-grid" data-type="checkbox" data-enable-history="true">
                                        <span class="checkbox__title">Broschyrer</span>
                                    </label>
                                </div>

                            </div>

                        </div>
                        <div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
                            <div class="form-item">

                                <div class="checkbox__item ">
                                    <label class="checkbox__label js-filter" for="Kvalitetsdokument">
                                        <input class="checkbox__input js-filter" type="checkbox" name="Kvalitetsdokument" id="Kvalitetsdokument" value="Kvalitetsdokument" aria-controls="filter-cards-grid" data-type="checkbox" data-enable-history="true">
                                        <span class="checkbox__title">Kvalitetsdokument</span>
                                    </label>
                                </div>

                            </div>

                        </div>
                        <div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
                            <div class="form-item">

                                <div class="checkbox__item ">
                                    <label class="checkbox__label js-filter" for="Ritning">
                                        <input class="checkbox__input js-filter" type="checkbox" name="Ritning" id="Ritning" value="Ritning" aria-controls="filter-cards-grid" data-type="checkbox" data-enable-history="true">
                                        <span class="checkbox__title">Ritning</span>
                                    </label>
                                </div>

                            </div>

                        </div>
                        <div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
                            <div class="form-item">

                                <div class="checkbox__item ">
                                    <label class="checkbox__label js-filter" for="Övrigt">
                                        <input class="checkbox__input js-filter" type="checkbox" name="Övrigt" id="Övrigt" value="Övrigt" checked aria-controls="filter-cards-grid" data-type="checkbox" data-enable-history="true">
                                        <span class="checkbox__title">Övrigt</span>
                                    </label>
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="col col--auto-width">
                    </div>
                </div>

                <div class="js-clear-filters-holder h-hidden-from-view row h-margin-top-1 h-margin-bottom-1 ">
                    <div class="col">
                        <a href="#" class="js-clear-filters">Clear filters</a>
                    </div>
                </div>
            </div>

            <div class="h-margin-top-3">
                <div class="row row--justify-between row--align-center">
                    <div class="col col--auto-width">
                        <p class="search-result-count">Visar 9 av 1000 träffar.</p>
                    </div>
                    <div class="col col--auto-width">
                        <div class="form-item form-item--select form-item--horizontal">
                            <label for="categorySelectSort" class="form-item__label">
                                Sortera:
                            </label>
                            <select id="categorySelectSort" class="select__select js-filter select__select--ghost" name="Sort" aria-controls="filter-documents-list" data-type="select">
                                <option class="select__option" value="" selected>Senaste</option>
                                <option class="select__option" value="a-z">A-Z</option>
                                <option class="select__option" value="z-a">Z-A</option>
                            </select>
                        </div>

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

            <div class="row" id="filter-cards-grid">
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Behovs&shy;styrda system
                                </h4>
                                <p class="card__date">18 juni 2021</p>
                                <p class="card__description">Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.</p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/skate.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    People spend less than 10% of their time outdoors!
                                </h4>
                                <p class="card__date">19 juni 2021</p>
                                <p class="card__description">In temperate and polar latitudes, people often spend less than 10% of their time outdoors.</p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Behovs&shy;styrda system
                                </h4>
                                <p class="card__date">18 juni 2021</p>
                                <p class="card__description">Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.</p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/skate.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    People spend less than 10% of their time outdoors!
                                </h4>
                                <p class="card__date">19 juni 2021</p>
                                <p class="card__description">In temperate and polar latitudes, people often spend less than 10% of their time outdoors. </p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/skate.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    People spend less than 10% of their time outdoors!
                                </h4>
                                <p class="card__date">18 juni 2021</p>
                                <p class="card__description">In temperate and polar latitudes, people often spend less than 10% of their time outdoors.</p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Behovs&shy;styrda system
                                </h4>
                                <p class="card__date">19 juni 2021</p>
                                <p class="card__description">Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.</p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/skate.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    People spend less than 10% of their time outdoors!
                                </h4>
                                <p class="card__date">18 juni 2021</p>
                                <p class="card__description">In temperate and polar latitudes, people often spend less than 10% of their time outdoors. </p>

                            </div>
                        </a>
                    </div>
                </div>
                <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
                    <div class="card card--fluid-layout">
                        <a href="#" class="card__cta">
                            <figure class="card__figure">
                                <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                            </figure>

                            <div class="card__body">

                                <h4 class="card__title">
                                    Behovs&shy;styrda system
                                </h4>
                                <p class="card__date">19 juni 2021</p>
                                <p class="card__description">Brett utbud av rumsprodukter för den perfekta lösningen för varje typ av lokal.</p>

                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <script type="text/template" id="card-data-tmpl">
                <% forEach(results, function(result) { %>
    <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-3">
        <div class="card card--fluid-layout">
            <a href="<%= result.url %>" class="card__cta">
                <figure class="card__figure">
                    <img src="<%= result.imageSrc %>" alt="<%= result.imageAlt %>" class="card__image">
                </figure>
                <div class="card__body">
                    <span class="card__follow-link">
                        <svg class="icon " focusable="false">
                            <use xlink:href="#icon-chevron-right"></use>
                        </svg>
                    </span>
                    <h4 class="card__title"><%= result.title %></h4>
                    <p class="card__date"><%= result.date %></p>
                    <p class="card__description"><%= result.description %></p>
                </div>
            </a>
        </div>
    </div>
    <% }); %>
</script>

            <div class="h-text-align-center">
                <p class="search-result-count"></p>
                <button class="button  js-load-more " href="/mocks/api/cards.json" aria-controls="filter-cards-grid" data-template-id="card-data-tmpl">
                    <span class="button__label">Ladda fler</span>
                </button>
            </div>
        </div>
    </div>
</section>
<script type="text/template" id="no-results-data-tmpl">
    <div class="row row--justify-around h-text-align-center-m">
    <div class="col col--span-12 col--span-s-8 h-text-align-center">No results message</div>
</div>

</script>


        {{#> @panel theme="grey" modifiers="compact,no-padding-bottom"}}
    <h2>Archive</h2>
    <div class="content-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis eu et integer elit. Magna nunc mauris fames neque, enim.</p>
    </div>
{{/@panel}}
{{#> @panel theme="grey" modifiers="compact,no-padding-top,no-padding-bottom"}}
    {{#> @horizontal-scroller}}
        <div class="h-display-flex">
            {{#each categorys}}
                <div class="h-padding-right-1">
                    {{>@button this}}
                </div>
            {{/each}}
        </div>
    {{/@horizontal-scroller}}
{{/@panel}}

{{render "@filters--with-cards" articleFilter merge=true}}


        
            
            {
  "marketSelectorModal": {
    "id": "market-selector",
    "closeLabel": "Stäng"
  },
  "categorys": [
    {
      "tag": "a",
      "href": "#",
      "label": "All",
      "modifiers": "rounded, ghost"
    },
    {
      "tag": "a",
      "href": "#",
      "label": "News",
      "modifiers": "rounded"
    },
    {
      "tag": "a",
      "href": "#",
      "label": "Case studies",
      "modifiers": "rounded, ghost"
    },
    {
      "tag": "a",
      "href": "#",
      "label": "Seminars",
      "modifiers": "rounded, ghost"
    },
    {
      "tag": "a",
      "href": "#",
      "label": "Webinars",
      "modifiers": "rounded, ghost"
    },
    {
      "tag": "a",
      "href": "#",
      "label": "Technical articles",
      "modifiers": "rounded, ghost"
    },
    {
      "tag": "a",
      "href": "#",
      "label": "Research",
      "modifiers": "rounded, ghost"
    }
  ],
  "articleFilter": {
    "filtersTitle": false,
    "panel": {
      "theme": "grey",
      "modifiers": "no-padding-top,compact"
    },
    "filters": {
      "switchers": null,
      "dropdowns": null
    }
  }
}

Handle: @article-list-page
Preview:
- With layout
- Component only
Filesystem Path: src/pages/articlelistpage/articlelistpage.hbs
References (4): @panel, @horizontal-scroller, @button, @filters--with-cards

No notes defined.