For å finne fram i utlistingssider for f.eks. aktuelt og dokumenter kan man filtrere på avsender, tema, tidsperiode og innholdstype.

Valgte filter legger seg over filter-baren, disse kan fjernes ved å trykke på x.

Filter panel

Filter

<section class="filter">
    <div class="row">
       <div class="filter-panels xsmall-12 medium-12 column">
          <h2 class="filter__headline">Filter</h2>
          <ul class="filter__items list--reset-style-type " role="tablist">
             <li class="filter__item" role="presentation"><button id="enhetTab" aria-controls="enhetPanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="0"><span class="filter__item-label">Enhet</span><span class="filter__item-icon"></span></button></li>
             <li class="filter__item" role="presentation"><button id="temaTab" aria-controls="temaPanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="-1"><span class="filter__item-label">Tema</span><span class="filter__item-icon"></span></button></li>
             <li class="filter__item" role="presentation"><button id="innholdstypeTab" aria-controls="innholdstypePanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="-1"><span class="filter__item-label">Innholdstype</span><span class="filter__item-icon"></span></button></li>
             <li class="filter__item" role="presentation"><button id="datoTab" aria-controls="datoPanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="-1"><span class="filter__item-label">Dato</span><span class="filter__item-icon"></span></button></li>
          </ul>
          <div role="tablist">
             <button id="enhetTabMobile" aria-controls="enhetPanel" aria-selected="false" class="filter__item-button filter__item-button--mobile" role="tab"><span class="filter__item-label">Enhet</span><span class="filter__item-icon"></span></button>
             <div class="filter__panel filter__panel--hidden">
                <div class="xsmall-12 medium-12 column" id="enhetPanel" role="tabpanel" aria-labelledby="enhetTab enhetTabMobile" aria-hidden="true">
                   <ul class="filter__item-choices filter__item-choices--sectioned list--reset-style-type row">
                      <li class="xsmall-12 medium-4 column">
                         <label class="form__label">
                            <input type="checkbox" class="form__checkbox form__checkbox--filter" name="enhet" value="874" id="Filter-enhet-874">
                            <span class="form__label-text form__label--offset">
                               Møre og Romsdal politidistrikt (1)
                            </span>
                         </label>
                      </li>
                      <li class="xsmall-12 medium-4 column">
                         <label class="form__label">
                            <input type="checkbox" class="form__checkbox form__checkbox--filter" name="enhet" value="1573" id="Filter-enhet-1573" disabled="">
                            <span class="form__label-text form__label--offset">
                               Øst politidistrikt (0)
                            </span>
                         </label>
                      </li>
                   </ul>
                   <div class="filter__btn-container"><button class="btn btn--positive btn--small">Lukk</button></div>
                </div>
             </div>
          </div>
          <div role="tablist">
             <button id="temaTabMobile" aria-controls="temaPanel" aria-selected="false" class="filter__item-button filter__item-button--mobile" role="tab"><span class="filter__item-label">Tema</span><span class="filter__item-icon"></span></button>
             <div class="filter__panel filter__panel--hidden">
                <div class="xsmall-12 medium-12 column" id="temaPanel" role="tabpanel" aria-labelledby="temaTab temaTabMobile" aria-hidden="true">
                   <section class="filter__choices-section">
                      <h2 class="filter__item-choices-heading">V</h2>
                      <ul class="filter__item-choices list--reset-style-type row">
                         <li class="xsmall-12 medium-4 column">
                            <label class="form__label">
                               <input type="checkbox" class="form__checkbox form__checkbox--filter" name="tema" value="66" id="Filter-tema-66">
                               <span class="form__label-text form__label--offset">
                                  Vold (1)
                               </span>
                            </label>
                         </li>
                         <li class="xsmall-12 medium-4 column">
                            <label class="form__label">
                               <input type="checkbox" class="form__checkbox form__checkbox--filter" name="tema" value="10" id="Filter-tema-10">
                               <span class="form__label-text form__label--offset">
                                  Våpen (3)
                               </span>
                            </label>
                         </li>
                      </ul>
                   </section>
                   <div class="filter__btn-container"><button class="btn btn--positive btn--small right">Lukk</button></div>
                </div>
             </div>
          </div>
          <div role="tablist">
             <button id="innholdstypeTabMobile" aria-controls="innholdstypePanel" aria-selected="false" class="filter__item-button filter__item-button--mobile" role="tab"><span class="filter__item-label">Innholdstype</span><span class="filter__item-icon"></span></button>
             <div class="filter__panel filter__panel--hidden">
                <div class="xsmall-12 medium-12 column" id="innholdstypePanel" role="tabpanel" aria-labelledby="innholdstypeTab innholdstypeTabMobile" aria-hidden="true">
                   <section class="filter__choices-section">
                      <ul class="filter__item-choices list--reset-style-type row">
                         <li class="xsmall-12 medium-4 column">
                            <label class="form__label">
                               <input type="checkbox" class="form__checkbox form__checkbox--filter" name="innholdstype" value="7" id="Filter-innholdstype-7">
                               <span class="form__label-text form__label--offset">
                                  Kronikk (2)
                               </span>
                            </label>
                         </li>
                         <li class="xsmall-12 medium-4 column">
                            <label class="form__label">
                               <input type="checkbox" class="form__checkbox form__checkbox--filter" name="innholdstype" value="24" id="Filter-innholdstype-24">
                               <span class="form__label-text form__label--offset">
                                  Pressemelding (1)
                               </span>
                            </label>
                         </li>
                      </ul>
                   </section>
                   <div class="filter__btn-container"><button class="btn btn--positive btn--small right">Lukk</button></div>
                </div>
             </div>
          </div>
          <div role="tablist">
             <button id="datoTabMobile" aria-controls="datoPanel" aria-selected="false" class="filter__item-button filter__item-button--mobile" role="tab"><span class="filter__item-label">Dato</span><span class="filter__item-icon"></span></button>
             <div class="filter__panel filter__panel--hidden">
                <div class="xsmall-12 medium-12 column" id="datoPanel" role="tabpanel" aria-labelledby="datoTab datoTabMobile" aria-hidden="true">
                   <ul class="filter__item-choices filter__item-choices--sectioned list--reset-style-type row">
                      <li class="xsmall-12 medium-12 large-8 column">
                         <label class="form__label form__label--datetime-date" for="fradato">
                            <span class="form__label-text">
                               Fra dato:
                            </span>
                            <input type="text" class="form__date form__date--datetime" id="fradato" name="fradato" readonly="" placeholder="dd.mm.åååå" aria-label="Use the arrow keys to pick a date">
                         </label>
                         <label class="form__label form__label--datetime-date" for="tildato">
                            <span class="form__label-text">
                               Til dato:
                            </span>
                            <input type="text" class="form__date form__date--datetime" id="tildato" name="tildato" readonly="" placeholder="dd.mm.åååå" aria-label="Use the arrow keys to pick a date">
                         </label>
                      </li>
                   </ul>
                   <div class="filter__btn-container"><button class="btn btn--positive btn--small">Lukk</button></div>
                </div>
             </div>
          </div>
       </div>
    </div>

    <!-- Filter results -->

</section>

Filter

Dine valg:

  • Tema
  • Innholdstype
...
<div class="filter-panels xsmall-12 medium-12 column">
    <h2 class="filter__headline">Filter</h2>
    <section class="filter__selected" aria-atomic="true" aria-live="assertive">
        <div class="row">
            <div class="column">
                <h2 class="filter__selected-headline">Dine valg:</h2>
                <ul class="filter__tag-list tag-list tag-list--inline tag-list--buttons tag-list--no-icon list--reset-style-type">
                    <li class="tag-list__group-label">Tema</li>
                    <li class="tag-list__tag"><button class="tag-list__link tag-list__link--removable">Narkotika</button></li>
                </ul>
                <ul class="filter__tag-list tag-list tag-list--inline tag-list--buttons tag-list--no-icon list--reset-style-type">
                    <li class="tag-list__group-label">Innholdstype</li>
                    <li class="tag-list__tag"><button class="tag-list__link tag-list__link--removable">Nyhet</button></li>
                </ul>
            </div>
            <div class="column shrink"><button class="filter__reset-btn">Nullstill</button></div>
        </div>
    </section>
    ...
To expand the filter panels the `.filter__item-button--active` modifier class must be added to the `.filter__item-button` element.
In addition, the `.filter__panel--hidden` modifier class must be removed from the `.filter__panel` element.

Filter

A–P

V

...
<ul class="filter__items list--reset-style-type filter__items--active" role="tablist">
    <li class="filter__item" role="presentation">
        <button id="enhetTab" aria-controls="enhetPanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="-1">
            <span class="filter__item-label">Enhet</span><span class="filter__item-icon"></span>
        </button>
    </li>
    <li class="filter__item" role="presentation">
        <button id="temaTab" aria-controls="temaPanel" aria-selected="true" class="filter__item-button filter__item-button--active" role="tab" tabindex="0">
            <span class="filter__item-label">Tema</span><span class="filter__item-icon"></span>
        </button>
        </li>
    <li class="filter__item" role="presentation">
        <button id="innholdstypeTab" aria-controls="innholdstypePanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="-1">
            <span class="filter__item-label">Innholdstype</span><span class="filter__item-icon"></span>
        </button></li>
    <li class="filter__item" role="presentation">
        <button id="datoTab" aria-controls="datoPanel" aria-selected="false" class="filter__item-button" role="tab" tabindex="-1">
            <span class="filter__item-label">Dato</span><span class="filter__item-icon"></span>
        </button>
    </li>
</ul>
<div role="tablist">
    <button id="enhetTabMobile" aria-controls="enhetPanel" aria-selected="false" class="filter__item-button filter__item-button--mobile" role="tab">
        <span class="filter__item-label">Enhet</span>
        <span class="filter__item-icon"></span>
    </button>
    <div class="filter__panel">
        ...

Filter results

5 resultater er tilgjengelig. Bruk tastatur eller swipe-bevegelser for å navigere.

Filtrering gav 5 treff

  1. Mer deafultnytt

    • Narkotika
    • Våpen
    • Pass
  2. Dette er en sak

    JADA

    • Narkotika
    • Barn og unge
    • Grensekontroll
  3. Nyhet med innholdstype

    Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven...

    • Narkotika
    • Pass
    • Doping
    • Drap
  4. kljkljdsf

    • Narkotika
  5. Nytt

    Grog chase hands grog blossom transom fire in the hole nipper fluke barque run a rig. Lad tack cog squiffy jury mast Privateer pressgang careen take a caulk Letter of Marque. Brigantine broadside haul...

    • Narkotika
    • Asyl
    • Drap
    • Europol
    • Frontex
Presenterer side 1 Av 1
  1. Forrige
  2. 1
  3. Neste
<section class="filter">

    <!-- Filter panels -->

    <div class="row">
       <div class="xsmall-12 medium-10 xlarge-8 column">
          <span class="show-for-sr" aria-atomic="true" aria-live="assertive">5 resultater er tilgjengelig. Bruk tastatur eller swipe-bevegelser for å navigere.</span>
          <div>
             <h2 class="filter__hits">Filtrering gav 5 treff</h2>
             <ol class="filter__results list--reset-style-type">
                <li class="page-listing__item">
                   <article class="filter__article">
                      <h2 class="h3 page-listing__title"><a class="page-listing__link" href="/nyheter-og-presse/nyheter/2017/08/30/mer-deafultnytt/">Mer deafultnytt</a></h2>
                      <ul class="metadata metadata--subtle list--reset-style">
                         <li class="metadata__item">
                            <span class="metadata__item-label">Oppdatert</span> 30.08.2017
                         </li>
                         <li class="metadata__item">
                            <span class="metadata__item-label">
                               Av:
                            </span>
                             Økokrim
                         </li>
                         <li class="metadata__item">Nyhet</li>
                      </ul>
                      <p class="page-listing__excerpt"></p>
                      <ul class="tag-list list--reset-style-type">
                         <li class="tag-list__tag tag-list__tag--accented">Narkotika</li>
                         <li class="tag-list__tag">Våpen</li>
                         <li class="tag-list__tag">Pass</li>
                      </ul>
                   </article>
                </li>
                <li class="page-listing__item">
                   <article class="filter__article">
                      <h2 class="h3 page-listing__title"><a class="page-listing__link" href="/nyheter-og-presse/nyheter/2017/08/28/gammelt-nytt/">Dette er en sak</a></h2>
                      <ul class="metadata metadata--subtle list--reset-style">
                         <li class="metadata__item"><span class="metadata__item-label">Oppdatert</span> 28.08.2017</li>
                         <li class="metadata__item"><span class="metadata__item-label">Av:</span> Espen Politidistrikt</li>
                         <li class="metadata__item">Nyhet</li>
                      </ul>
                      <p class="page-listing__excerpt">JADA</p>
                      <ul class="tag-list list--reset-style-type">
                         <li class="tag-list__tag tag-list__tag--accented">Narkotika</li>
                         <li class="tag-list__tag">Barn og unge</li>
                         <li class="tag-list__tag">Grensekontroll</li>
                      </ul>
                   </article>
                </li>
                <li class="page-listing__item">
                   <article class="filter__article">
                      <h2 class="h3 page-listing__title"><a class="page-listing__link" href="/nyheter-og-presse/nyheter/2017/08/22/nyhet-med-innholdstype/">Nyhet med innholdstype</a></h2>
                      <ul class="metadata metadata--subtle list--reset-style">
                         <li class="metadata__item"><span class="metadata__item-label">Oppdatert</span> 22.08.2017</li>
                         <li class="metadata__item"><span class="metadata__item-label">Av:</span> Økokrim</li>
                         <li class="metadata__item">Nyhet</li>
                      </ul>
                      <p class="page-listing__excerpt">Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven...</p>
                      <ul class="tag-list list--reset-style-type">
                         <li class="tag-list__tag tag-list__tag--accented">Narkotika</li>
                         <li class="tag-list__tag">Pass</li>
                         <li class="tag-list__tag">Doping</li>
                         <li class="tag-list__tag">Drap</li>
                      </ul>
                   </article>
                </li>
                <li class="page-listing__item">
                   <article class="filter__article">
                      <h2 class="h3 page-listing__title"><a class="page-listing__link" href="/nyheter-og-presse/nyheter/2017/06/15/kljkljdsf/">kljkljdsf</a></h2>
                      <ul class="metadata metadata--subtle list--reset-style">
                         <li class="metadata__item"><span class="metadata__item-label">Oppdatert</span> 23.06.2017</li>
                         <li class="metadata__item"><span class="metadata__item-label">Av:</span> Oslo politidistrikt</li>
                         <li class="metadata__item">Nyhet</li>
                      </ul>
                      <p class="page-listing__excerpt"></p>
                      <ul class="tag-list list--reset-style-type">
                         <li class="tag-list__tag tag-list__tag--accented">Narkotika</li>
                      </ul>
                   </article>
                </li>
                <li class="page-listing__item">
                   <article class="filter__article">
                      <h2 class="h3 page-listing__title"><a class="page-listing__link" href="/nyheter-og-presse/nyheter/2017/06/02/nytt/">Nytt</a></h2>
                      <ul class="metadata metadata--subtle list--reset-style">
                         <li class="metadata__item"><span class="metadata__item-label">Oppdatert</span> 02.06.2017</li>
                         <li class="metadata__item"><span class="metadata__item-label">Av:</span> Oslo politidistrikt</li>
                         <li class="metadata__item">Nyhet</li>
                      </ul>
                      <p class="page-listing__excerpt">Grog chase hands grog blossom transom fire in the hole nipper fluke barque run a rig. Lad tack cog squiffy jury mast Privateer pressgang careen take a caulk Letter of Marque. Brigantine broadside haul...</p>
                      <ul class="tag-list list--reset-style-type">
                         <li class="tag-list__tag tag-list__tag--accented">Narkotika</li>
                         <li class="tag-list__tag">Asyl</li>
                         <li class="tag-list__tag">Drap</li>
                         <li class="tag-list__tag">Europol</li>
                         <li class="tag-list__tag">Frontex</li>
                      </ul>
                   </article>
                </li>
             </ol>
          </div>
          <span class="show-for-sr" aria-atomic="true" aria-live="assertive">
             Presenterer side 1 Av 1
          </span>
          
          <!-- Paging -->

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