Search

<div class="wrapper">
    <div class="row justify-content-center u-p-t-4 u-p-b-1">
        <div class="grid-18 grid-lg-16">
            <div class="o-search o-search--tight">
                <div class="o-search__padded">
                    <div class="row display-flex align-items-center">
                        <div class="grid-auto u-p-r-0">
                            <span class="o-search__icon">
                                <svg class="icon">
                                    <use xlink:href="#icon-search"></use>
                                </svg>
                            </span>
                        </div>
                        <div class="grid u-p-l-0 display-flex">
                            <label for="" class="u-visuallyhidden">sök på internetstiftelsen.se</label>
                            <input type="search" class="o-search__input js-search-domain-input" placeholder="sök på internetstiftelsen.se" id="" aria-describedby="number-of-hits" value="internet">
                            <button id="o-search-result-submit" type="submit" class="a-button a-button--secondary o-search__submit">
                                <span class="a-button__text">Sök</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="o-search__filter o-search__border">
                    <div class="o-filter">
                        <div class="js-o-accordion o-accordion o-accordion--transparent">
                            <h3 class="o-filter__title js-accordion__header o-accordion__header--no-border o-accordion__header--inline">
                                Filtrera
                            </h3>
                            <div class="js-accordion__panel o-accordion__panel--ash u-border-radius">
                                <div class="o-accordion__panel__content">
                                    <div class="row">
                                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                                            <fieldset class="field-group">
                                                <legend class="label-legend">Innehållstyp</legend>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="film" name="" value="0" class="a-checkbox u-visuallyhidden">
                                                    <label for="film">Film</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="rapport" name="" value="1" class="a-checkbox u-visuallyhidden">
                                                    <label for="rapport">Rapport</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="internetguider" name="" value="2" class="a-checkbox u-visuallyhidden">
                                                    <label for="internetguider">Internetguider</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                                            <fieldset class="field-group">
                                                <legend class="label-legend">Ämne</legend>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="barnhack" name="" value="3" class="a-checkbox u-visuallyhidden">
                                                    <label for="barnhack">Barnhack</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="domämnnamn" name="" value="4" class="a-checkbox u-visuallyhidden">
                                                    <label for="domämnnamn">Domämnnamn</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="it-säkerhet" name="" value="5" class="a-checkbox u-visuallyhidden">
                                                    <label for="it-säkerhet">IT-säkerhet</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="statistik" name="" value="6" class="a-checkbox u-visuallyhidden">
                                                    <label for="statistik">Statistik</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="dns" name="" value="7" class="a-checkbox u-visuallyhidden">
                                                    <label for="dns">DNS</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="integritet" name="" value="8" class="a-checkbox u-visuallyhidden">
                                                    <label for="integritet">Integritet</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="skola" name="" value="9" class="a-checkbox u-visuallyhidden">
                                                    <label for="skola">Skola</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                                            <fieldset class="field-group">
                                                <legend class="label-legend">För vem?</legend>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="barn och unga" name="" value="10" class="a-checkbox u-visuallyhidden">
                                                    <label for="barn och unga">Barn coh unga</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="företagare" name="" value="11" class="a-checkbox u-visuallyhidden">
                                                    <label for="företagare">Företagare</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="pedagoger" name="" value="12" class="a-checkbox u-visuallyhidden">
                                                    <label for="pedagoger">Pedagoger</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="föräldrar" name="" value="13" class="a-checkbox u-visuallyhidden">
                                                    <label for="föräldrar">Föräldrar</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="journalister" name="" value="14" class="a-checkbox u-visuallyhidden">
                                                    <label for="journalister">Journalister</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="privatpersoner" name="" value="15" class="a-checkbox u-visuallyhidden">
                                                    <label for="privatpersoner">Privatpersoner</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                                            <fieldset class="field-group">
                                                <legend class="label-legend">Avsändare</legend>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="iis" name="" value="16" class="a-checkbox u-visuallyhidden">
                                                    <label for="iis">IIS</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="pts" name="" value="17" class="a-checkbox u-visuallyhidden">
                                                    <label for="pts">PTS</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="scb" name="" value="18" class="a-checkbox u-visuallyhidden">
                                                    <label for="scb">SCB</label>
                                                </div>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="statens medieråd" name="" value="19" class="a-checkbox u-visuallyhidden">
                                                    <label for="statens medieråd">Statens medieråd</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="grid-lg-auto grid-md-9 grid-18 o-filter__column">
                                            <fieldset class="field-group">
                                                <legend class="label-legend">Arkiv</legend>
                                                <div class="checkbox">
                                                    <input type="checkbox" id="visa arkiverat material" name="" value="20" class="a-checkbox u-visuallyhidden">
                                                    <label for="visa arkiverat material">Visa arkiverat material</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <button type="button" class="a-button a-button--ruby-light small o-filter__clear">
                                        <span class="a-button__text">Rensa</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="o-search__status o-search__padded" id="number-of-hits"><strong>Antal träffar:</strong> 54</div>
                <main role="main" class="article">
                    <div class="row">
                        <div class="grid-18">
                            <div class="o-search-result">
                                <ul class="o-search-result__list">
                                    <li class="o-search-result__item o-search-result__item--article">
                                        <article class="row">
                                            <div class="grid-18 grid-md-4">
                                                <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--article"></a>
                                            </div>
                                            <div class="grid-18 grid-md-14">
                                                <div class="o-search-result__item__content">
                                                    <header>
                                                        <div class="a-meta">September 27, 2018</div>
                                                        <div class="a-meta a-meta--lowercase"><svg class="icon">
                                                                <use xlink:href="#icon-time"></use>
                                                            </svg>
                                                            20 min <span class="u-hide-sm">läsning</span></div>

                                                    </header>
                                                    <h2>
                                                        <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                                                    </h2>
                                                    <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                                                </div>
                                            </div>
                                        </article>
                                    </li>
                                    <li class="o-search-result__item o-search-result__item--article">
                                        <article class="row">
                                            <div class="grid-18 grid-md-4">
                                                <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--article"></a>
                                            </div>
                                            <div class="grid-18 grid-md-14">
                                                <div class="o-search-result__item__content">
                                                    <header>
                                                        <div class="a-meta">September 27, 2018</div>
                                                        <div class="a-meta a-meta--lowercase"><svg class="icon">
                                                                <use xlink:href="#icon-time"></use>
                                                            </svg>
                                                            20 min <span class="u-hide-sm">läsning</span></div>

                                                    </header>
                                                    <h2>
                                                        <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                                                    </h2>
                                                    <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                                                </div>
                                            </div>
                                        </article>
                                    </li>
                                    <li class="o-search-result__item o-search-result__item--file">
                                        <article class="row">
                                            <div class="o-search-result__item__content">
                                                <header>
                                                    <div class="a-meta">September 27, 2018</div>
                                                </header>
                                                <h2>
                                                    <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                                                </h2>
                                                <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                                            </div>
                                            <div class="grid">
                                                <div class="m-download">
                                                    <div class="row align-items-center justify-content-center">
                                                        <div class="grid-auto">
                                                            <figure class="m-download__icon-file">
                                                                <svg class="icon">
                                                                    <use xlink:href="#icon-file"></use>
                                                                </svg>
                                                            </figure>
                                                        </div>
                                                        <div class="grid u-position-static">
                                                            <div class="row flex-column">
                                                                <div class="grid-18 u-position-static">
                                                                    <a href="https://www.iis.se/docs/Remiss_se_sv.pdf" class="beta m-download__link" download>
                                                                        Svenskarna och internet 2019
                                                                    </a>
                                                                </div>
                                                                <div class="grid-18  display-flex flex-column flex-sm-row justify-content-between align-items-start">
                                                                    <p class="u-m-b-0">Rapport om Svenskarnas internetanvändande i pdf-format</p>
                                                                    <div class="display-flex align-self-end flex-nowrap m-download__trigger">
                                                                        <strong class="m-download__text">Ladda ner</strong>
                                                                        <figure class="m-download__icon-download">
                                                                            <svg class="icon">
                                                                                <use xlink:href="#icon-download"></use>
                                                                            </svg>
                                                                        </figure>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </article>
                                    </li>
                                    <li class="o-search-result__item o-search-result__item--page">
                                        <article class="row flex-row-reverse">
                                            <div class="grid-18 grid-md-9">
                                                <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--page"></a>
                                            </div>
                                            <div class="grid-18 grid-md-9">
                                                <div class="o-search-result__item__content">
                                                    <header>
                                                        <div class="a-meta">September 27, 2018</div>
                                                    </header>
                                                    <h2>
                                                        <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                                                    </h2>
                                                    <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                                                </div>
                                            </div>
                                        </article>
                                    </li>
                                    <li class="o-search-result__item o-search-result__item--article">
                                        <article class="row">
                                            <div class="grid-18 grid-md-4">
                                                <a href="#"><img src="/assets/images/ALX_0876.jpg" alt="Hands typing on laptop" class="o-search-result__image o-search-result__image--article"></a>
                                            </div>
                                            <div class="grid-18 grid-md-14">
                                                <div class="o-search-result__item__content">
                                                    <header>
                                                        <div class="a-meta">September 27, 2018</div>
                                                        <div class="a-meta a-meta--lowercase"><svg class="icon">
                                                                <use xlink:href="#icon-time"></use>
                                                            </svg>
                                                            20 min <span class="u-hide-sm">läsning</span></div>

                                                    </header>
                                                    <h2>
                                                        <a href="#" class="o-search-result__item__link">Nätneutraliteten</a>
                                                    </h2>
                                                    <p>Praesent tempus metus in arcu mollis, non convallis odio faucibus. Nullam lectus nulla, rutrum nec odio ut, mollis interdum enim. Proin tincidunt odio at quam eleifend imperdiet. Mauris sagittis nulla ipsum, consectetur efficitur libero dignissim in.</p>
                                                </div>
                                            </div>
                                        </article>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </main>
                <div class="o-search__padded o-search__border">
                    <div class="a-paging-wrapper">
                        <a class="a-paging">
                            <span class="u-visuallyhidden">Bakåt</span>
                            <svg class="icon a-paging__icon">
                                <use xlink:href="#icon-arrow-backwards"></use>
                            </svg>
                        </a>
                        <span class="a-paging-wrapper__text">Sida 1 av 10</span>
                        <a class="a-paging">
                            <span class="u-visuallyhidden">Framåt</span>
                            <svg class="icon a-paging__icon">
                                <use xlink:href="#icon-arrow-forwards"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="wrapper">
	<div class="row justify-content-center u-p-t-4 u-p-b-1">
		<div class="grid-18 grid-lg-16">
			<div class="o-search o-search--tight">
				<div class="o-search__padded">
					<div class="row display-flex align-items-center">
						<div class="grid-auto u-p-r-0">
							<span class="o-search__icon">
								{{> @icon id="search"}}
							</span>
						</div>
						<div class="grid u-p-l-0 display-flex">
							<label for="{{input_id}}" class="u-visuallyhidden">{{label}}</label>
							<input type="search" class="o-search__input js-search-domain-input" placeholder="{{label}}" id="{{input_id}}" aria-describedby="number-of-hits" value="internet">
							{{> @button el="button" button_type="submit" text="Sök" modifiers="secondary o-search__submit" id="o-search-result-submit"}}
						</div>
					</div>
				</div>
				<div class="o-search__filter o-search__border">
					{{render '@filter'}}
				</div>
				<div class="o-search__status o-search__padded" id="number-of-hits"><strong>Antal träffar:</strong> 54</div>
				<main role="main" class="article">
					<div class="row">
						<div class="grid-18">
							{{render '@search-result'}}
						</div>
					</div>
				</main>
				<div class="o-search__padded o-search__border">
					<div class="a-paging-wrapper">
						{{> @paging icon="arrow-backwards" text="Bakåt"}}
						<span class="a-paging-wrapper__text">Sida 1 av 10</span>
						{{> @paging icon="arrow-forwards" text="Framåt"}}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{
  "label": "sök på internetstiftelsen.se"
}

No notes defined.