Swegon Component Library

Product Search 

<div class="hero theme--consumer theme--dark" style="background-image: url('/mocks/img/hero.jpg');">
    <img class="hero__image" src=/mocks/img/hero.jpg alt=a fancy buidling />
    <div class="hero__primary theme--consumer theme--dark">
        <div class="hero__text">
            <h1 class="headline-2 ">Vill du snabbt få förslag på rätt ventilation?</h1>
        </div>
    </div>
    <div class="hero__secondary">
        <p class="hero__image-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin semper mauris ultricies elit suscipit porttitor.</p>
    </div>
</div>

<section class="panel theme--grey 
    panel--compact ">
    <div class="panel__inner">
        <div class="row row--justify-around">
            <div class="col col--span-12 col--span-s-8">
                <div data-react="search-widget" data-props="{&quot;endpoint&quot;:&quot;/mocks/api/search-results.json&quot;,&quot;language&quot;:&quot;en&quot;,&quot;searchQueryKey&quot;:&quot;q&quot;,&quot;searchPageUrl&quot;:&quot;/components/preview/product-search/&quot;,&quot;placeholderText&quot;:&quot;Sök produkter&quot;,&quot;form&quot;:{&quot;method&quot;:&quot;GET&quot;},&quot;className&quot;:&quot;search-field--big&quot;,&quot;seeMoreText&quot;:&quot;Visa alla&quot;,&quot;enableFocusTrap&quot;:false}"></div>

            </div>

            <div class="col col--span-12 col--bottom-gutter h-text-center">
                <p class="search-result-count">Your search resulted in 9 products</p>
            </div>
        </div>
    </div>
</section>
 
{{render "@hero--default"}}

{{#> @panel theme="grey" modifiers="compact"}}
    <div class="row row--justify-around">
        <div class="col col--span-12 col--span-s-8">
            {{render "@search-widget"}}
        </div>

        <div class="col col--span-12 col--bottom-gutter h-text-center">
            {{> @search-result-count this}}
        </div>
    </div>
{{/@panel}}
 
{
  "marketSelectorModal": {
    "id": "market-selector",
    "closeLabel": "Stäng"
  },
  "paginationInfo": {
    "text": "Your search resulted in 9 products"
  }
}

No notes defined.