Filter

Webkomponent for filter aksjon

Filter Komponent

Denne komponenten er implementert som en webkomponent, og tar imot alle søkedetaljer som parametere, inkludert endepunkt for søkeforslag.

Grønn block

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Blå block

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Gul block

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Pink block

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Grønn block 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Blå block 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Gul block 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Pink block 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Grønn block 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Blå block 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Gul block 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

Pink block 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!

<lk-filter>
    <div class="filterable background--green padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Grønn block</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--light-blue padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Blå block</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--yellow padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Gul block</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--pink padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Pink block</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>

    <div class="filterable background--green padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Grønn block 2</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--light-blue padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Blå block 2</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--yellow padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Gul block 2</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--pink padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Pink block 2 </h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>

    <div class="filterable background--green padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Grønn block 3</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--light-blue padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Blå block 3</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--yellow padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Gul block 3</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
    <div class="filterable background--pink padding-y--medium padding-x--tiny margin-bottom--tiny">
        <h5 class="small-title">Pink block 3</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
            tempora minus esse, iure illum id!
        </p>
    </div>
</lk-filter>