<div class="site u-z-index-foreground" id="site">
    <div class="site__header" id="siteHeader">
        <div class="u-position-relative">
            <header class="o-header">
                <div class="wrapper">
                    <div class="row justify-content-between align-items-center flex-nowrap">
                        <div class="grid-auto">
                            <a href="/" class="o-header__logo-link">
                                <span class="o-header__logo">
                                    <svg class="logotype">
                                        <use xlink:href="#logotype-default"></use>
                                    </svg>
                                </span>
                                <span class="u-visuallyhidden">Till startsidan</span>
                            </a>
                        </div>
                        <div class="grid">
                            <nav class="a-main-menu" aria-label="Huvudmeny">
                                <ul class="a-main-menu__list">
                                    <li class="u-hidden-mobile">
                                        <a href="#" class="a-main-menu__list__link">
                                            <span class="a-main-menu__list__text">Kunskap</span>
                                        </a>
                                    </li>
                                    <li class="u-hidden-mobile">
                                        <a href="#" class="a-main-menu__list__link">
                                            <span class="a-main-menu__list__text">Innovation</span>
                                        </a>
                                    </li>
                                    <li class="u-hidden-mobile">
                                        <a href="#" class="a-main-menu__list__link">
                                            <span class="a-main-menu__list__text">Domäner</span>
                                        </a>
                                    </li>
                                    <li class="u-hidden-mobile">
                                        <a href="#" class="a-main-menu__list__link">
                                            <span class="a-main-menu__list__text">Om oss</span>
                                        </a>
                                    </li>
                                    <li class="u-hidden-mobile">
                                        <button type="button" class="a-main-menu__list__link js-toggle-domain-search" aria-expanded="false" data-a11y-toggle="domain-search">
                                            <span class="a-main-menu__list__text">Sök ledig domän</span>
                                            <div class="icon-arrow-down"></div>
                                        </button>
                                    </li>
                                    <li class="u-hidden-mobile">
                                        <span class="a-main-menu__list__button">
                                            <a href="/?s=" class="a-main-menu__list__link a-main-menu__list__search-link u-p-r-5">
                                                <span class="a-main-menu__list__text">Sök</span>
                                                <svg class="icon u-icon--medium a-button__icon">
                                                    <use xlink:href="#icon-search" fill="#1f2a36"></use>
                                                </svg>
                                            </a>
                                        </span>
                                    </li>
                                    <li>
                                        <button type="button" class="a-main-menu__list__link js-toggle-mega-menu" aria-expanded="false" data-toggle-target="menu-btn-text" data-toggle-text="Meny|Stäng">
                                            <span class="a-main-menu__list__text" id="menu-btn-text">Meny</span>
                                            <div class="icon-hamburger"></div>
                                        </button>
                                    </li>
                                </ul>
                            </nav>

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

            <div class="wrapper-fluid o-domain-search" id="true" aria-hidden="true">
                <div class="wrapper u-p-x-0">
                    <div class="grid">
                        <div class="display-flex align-items-center">
                            <div class="grid display-flex u-p-x-0">
                                <label for="" class="u-visuallyhidden">sök en .se- eller .nu-domän</label>
                                <input type="search" class="o-domain-search__input js-search-domain-input" autocomplete="off" placeholder="sök en .se- eller .nu-domän" id="">
                                <button id="o-domain-search-submit" type="submit" class="a-button a-button--secondary o-domain-search__submit">
                                    <span class="a-button__text">Sök domän</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="js-menu-toggles wrapper-fluid o-mega-menu color-jade-light" aria-hidden="true" id="megaMenu">
            <ul class="o-mega-menu__buttons-list js-search-toggles">
                <li class="o-mega-menu__buttons-list__item color-jade">
                    <button type="button" data-a11y-toggle="domain-search" class="o-mega-menu__buttons-list__link color-jade">
                        <svg class="icon">
                            <use xlink:href="#icon-search-domain"></use>
                        </svg>
                        <span class="color-cyberspace  u-display-inline-block u-p-x-1">Sök ledig domän</span>
                    </button>
                </li>
                <li class="o-mega-menu__buttons-list__item color-jade">
                    <button type="button" data-a11y-toggle="site-search" class="o-mega-menu__buttons-list__link color-jade">
                        <svg class="icon">
                            <use xlink:href="#icon-search"></use>
                        </svg>
                        <span class="color-cyberspace u-display-inline-block u-p-x-1">Sök information</span>
                    </button>
                </li>
            </ul>
            <div id="domain-search" class="o-mega-menu__search-container color-jade">
                <form action="">
                    <div class="wrapper">
                        <div class="display-flex align-items-center">
                            <div class="grid display-flex u-p-x-0">
                                <label for="domain-search-input" class="u-visuallyhidden">Sök ledig domän</label>
                                <input type="search" class="o-domain-search__input js-search-domain-input color-cyberspace" autocomplete="off" placeholder="Sök ledig domän" id="domain-search-input">
                                <button type="submit" class="a-button a-button--secondary u-p-x-2 u-flex-grow-1 u-flex-shrink-0" id="o-domain-search-submit">
                                    <span class="a-button__text u-nowrap">Sök domän</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="site-search" class="o-mega-menu__search-container color-jade">
                <form action="">
                    <div class="wrapper">
                        <div class="display-flex align-items-center">
                            <div class="grid display-flex u-p-x-0">
                                <label for="site-search-input" class="u-visuallyhidden">Sök info</label>
                                <input type="search" class="o-domain-search__input js-search-domain-input color-cyberspace" autocomplete="off" placeholder="Sök info" id="site-search-input">
                                <button type="submit" class="a-button a-button--secondary u-p-x-2 u-flex-grow-1 u-flex-shrink-0" id="o-domain-search-submit">
                                    <span class="a-button__text u-nowrap">Sök</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <nav class="wrapper o-mega-menu__wrapper color-jade" aria-label="Megameny">
                <div class="row align-items-start">
                    <div class="grid-18 grid-lg o-mega-menu__column">
                        <div class="o-mega-menu__topic color-jade">
                            <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Domäner</a>
                            <button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="domains" data-toggle-target="domains-text" data-toggle-text="Visa undermeny|Dölj undermeny">
                                <span class="a-button__text" id="domains-text">Visa undermeny för Domäner</span>
                                <svg class="icon a-button__icon">
                                    <use xlink:href="#icon-arrow-down"></use>
                                </svg>
                            </button>
                        </div>
                        <dl class="o-mega-menu__list color-jade" id="domains">

                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Är domänen ledig?</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Regler och beskrivning av whois</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Registrera en domän</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Villkor och regler</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">.se-/.nu-domäner som snart kan bli lediga</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Tips innan du registrerar en domän/Inspiration och tips</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Återförsäljare</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Kontakta din kundtjänst</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Så fungerar ett domännamn</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Oseriösa metoder</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Tvistlösning</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Domännamnsbranschen</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Tjänster</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Domänstatistik</a></dd>
                        </dl>
                    </div>
                    <div class="grid-18 grid-lg o-mega-menu__column">
                        <div class="o-mega-menu__topic color-jade">
                            <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Kunskap</a>
                            <button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="kunskap" data-toggle-target="kunskap-text" data-toggle-text="Visa undermeny|Dölj undermeny">
                                <span class="a-button__text" id="kunskap-text">Visa undermeny för Kunskap</span>
                                <svg class="icon a-button__icon">
                                    <use xlink:href="#icon-arrow-down"></use>
                                </svg>
                            </button>
                        </div>
                        <dl class="o-mega-menu__list color-jade" id="kunskap">
                            <dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">För skolan</a></dt>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Digitala lektioner</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Lärarfortbildning</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Fördjupning</a></dd>
                            <dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">För samhället</a></dt>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Svenskarna och internet</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Projekt internetaccess</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Federationers</a></dd>
                        </dl>
                    </div>
                    <div class="grid-18 grid-lg o-mega-menu__column">
                        <div class="o-mega-menu__topic color-jade">
                            <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Mötesplatser</a>
                            <button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="motesplatser" data-toggle-target="motesplatser-text" data-toggle-text="Visa undermeny|Dölj undermeny">
                                <span class="a-button__text" id="motesplatser-text">Visa undermeny för Mötesplatser</span>
                                <svg class="icon a-button__icon">
                                    <use xlink:href="#icon-arrow-down"></use>
                                </svg>
                            </button>
                        </div>
                        <dl class="o-mega-menu__list color-jade" id="motesplatser">

                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Internetdagarna<svg class="icon o-mega-menu__link__icon">
                                        <use xlink:href="#icon-external-link"></use>
                                    </svg>
                                </a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Goto 10<svg class="icon o-mega-menu__link__icon">
                                        <use xlink:href="#icon-external-link"></use>
                                    </svg>
                                </a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Forskningssamarbeten<svg class="icon o-mega-menu__link__icon">
                                        <use xlink:href="#icon-external-link"></use>
                                    </svg>
                                </a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Internetstiftelsen stöttar</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Investeringar<svg class="icon o-mega-menu__link__icon">
                                        <use xlink:href="#icon-external-link"></use>
                                    </svg>
                                </a></dd>
                        </dl>
                    </div>
                    <div class="grid-18 grid-lg o-mega-menu__column">
                        <div class="o-mega-menu__topic color-jade">
                            <a href="#" class="o-mega-menu__link o-mega-menu__link--large">Om oss</a>
                            <button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="om-oss" data-toggle-target="om-oss-text" data-toggle-text="Visa undermeny|Dölj undermeny">
                                <span class="a-button__text" id="om-oss-text">Visa undermeny för Om oss</span>
                                <svg class="icon a-button__icon">
                                    <use xlink:href="#icon-arrow-down"></use>
                                </svg>
                            </button>
                        </div>
                        <dl class="o-mega-menu__list color-jade" id="om-oss">
                            <dt class="o-mega-menu__list__topic color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Presentation</a></dt>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Jobba hos oss<svg class="icon o-mega-menu__link__icon">
                                        <use xlink:href="#icon-external-link"></use>
                                    </svg>
                                </a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Press</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Pressbilder och fotografier</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link o-mega-menu__link--sub-level">Kontakt</a></dd>
                        </dl>
                    </div>
                    <div class="grid-18 grid-lg o-mega-menu__column">
                        <div class="o-mega-menu__topic color-jade">
                            <a href="#" class="o-mega-menu__link o-mega-menu__link--large">English</a>
                            <button class="a-button a-button--standalone-icon o-mega-menu__topic-button color-jade" data-a11y-toggle="english" data-toggle-target="english-text" data-toggle-text="Visa undermeny|Dölj undermeny">
                                <span class="a-button__text" id="english-text">Visa undermeny för English</span>
                                <svg class="icon a-button__icon">
                                    <use xlink:href="#icon-arrow-down"></use>
                                </svg>
                            </button>
                        </div>
                        <dl class="o-mega-menu__list color-jade" id="english">

                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Lorem ipsum</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Dolor sit amet</a></dd>
                            <dd class="o-mega-menu__list__item color-jade-medium-dark"><a href="#" class="o-mega-menu__link">Aenean sodales vestibulum</a></dd>
                        </dl>
                    </div>
                </div>
            </nav>
            <ul class="o-mega-menu__buttons-list">
                <li class="o-mega-menu__buttons-list__item color-jade">
                    <a href="" class="o-mega-menu__buttons-list__link color-jade-light">
                        <svg class="icon">
                            <use xlink:href="#icon-speaker"></use>
                        </svg>
                        <span class="color-cyberspace">Lyssna</span>
                    </a>
                </li>
                <li class="o-mega-menu__buttons-list__item color-jade">
                    <a href="" class="o-mega-menu__buttons-list__link color-jade-light">
                        <svg class="icon">
                            <use xlink:href="#icon-headset"></use>
                        </svg>
                        <span class="color-cyberspace">Kontakta oss</span>
                    </a>
                </li>
            </ul>
        </div>
        <script>
            function collapse(toggle) {
                var id = toggle.getAttribute('data-a11y-toggle');
                var collapsibleBox = document.getElementById(id);
                collapsibleBox.setAttribute('aria-hidden', true);
                toggle.setAttribute('aria-expanded', false);
            }

            function collapseAll(event) {
                toggles
                    .filter(function(toggle) {
                        return toggle !== event.target;
                    })
                    .forEach(collapse);
            }
            var toggles = Array.prototype.slice.call(
                document.querySelectorAll('.js-menu-toggles [data-a11y-toggle]')
            );
            toggles.forEach(function(toggle) {
                toggle.addEventListener('click', collapseAll);
            });
        </script>

    </div>
    <div class="site__main" id="siteMain">
        <div class="background-snow u-position-relative">
            <div class="wrapper display-flex justify-content-between">
                <nav aria-label="Breadcrumb">
                    <ol class="m-breadcrumb">
                        <li class="m-breadcrumb__item">
                            <a href="/" class="m-breadcrumb__link">
                                Hem
                            </a>
                            <svg class="icon">
                                <use xlink:href="#icon-arrow-forwards"></use>
                            </svg>
                        </li>
                        <li class="m-breadcrumb__item">
                            <a href="/" class="m-breadcrumb__link">
                                Om oss
                            </a>
                            <svg class="icon">
                                <use xlink:href="#icon-arrow-forwards"></use>
                            </svg>
                        </li>
                        <li class="m-breadcrumb__item">
                            <a href="/" class="m-breadcrumb__link">
                                Organisation
                            </a>
                            <svg class="icon">
                                <use xlink:href="#icon-arrow-forwards"></use>
                            </svg>
                        </li>
                        <li class="m-breadcrumb__item">
                            <a href="/" class="m-breadcrumb__link" aria-current="page">
                                Urkund och stadgar
                            </a>
                            <svg class="icon">
                                <use xlink:href="#icon-arrow-forwards"></use>
                            </svg>
                        </li>
                    </ol>
                </nav>

            </div>
        </div>
        <div class="site">
            <section class="o-section">
                <div class="wrapper o-section__content ">

                    <h1>Section grey</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
                </div>
            </section>
            <section class="o-section o-section--white">
                <div class="wrapper o-section__content  o-section__content--rectangle-left">

                    <h1>Section white</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
                </div>
            </section>
            <section class="o-section">
                <div class="wrapper o-section__content ">

                    <h1>Section grey</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
                </div>
            </section>
            <section class="o-section o-section--white">
                <div class="wrapper o-section__content  o-section__content--rectangle-right">

                    <h1>Section white</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum enim ac facilisis vehicula. Ut consequat consequat velit vel tempus. Sed non massa purus. Donec iaculis justo tristique ultrices tempus. Sed erat lectus, malesuada non lectus a, accumsan aliquam libero. Nunc sed dolor turpis. Nunc efficitur malesuada enim non viverra. Vestibulum in mi suscipit, laoreet purus eu, elementum nunc. Aliquam mattis leo sit amet erat posuere fermentum. Nunc mollis tortor quis enim facilisis, nec porttitor metus volutpat. Ut eu augue porttitor, placerat quam in, molestie nunc. Nam lacinia dignissim justo, ac mollis lorem vulputate sit amet. Maecenas feugiat eget erat nec suscipit. Phasellus pretium tellus ut pellentesque fringilla. In sodales maximus lorem eget vulputate. Donec viverra massa vel urna efficitur rutrum.</p>
                </div>
            </section>
        </div>

        <section class="o-mailchimp o-mailchimp--static" data-mailchimp="iis-mailchimp-static-form" id="iis-mailchimp-static-form">
            <div class="wrapper">
                <div class="o-mailchimp__wrapper">
                    <div class="row flex-row-reverse o-mailchimp__close">
                        <button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup">
                            <span class="a-button__text">Stäng</span>
                            <svg class="icon a-button__icon">
                                <use xlink:href="#icon-close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="row flex-row-reverse o-mailchimp__row-bottom">
                        <div class="o-mailchimp__image-container grid-18 grid-lg-10">
                            <img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
                        </div>
                        <div class="o-mailchimp__content grid-18 grid-lg-8">
                            <h1 class="o-mailchimp__headline">Nyhetsbrev från Internetstiftelsen</h1>
                            <p class="o-mailchimp__preamble">Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!</p>
                            <form action="./" method="post">
                                <div class="m-form-control row">
                                    <div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
                                        <div class="field-group">
                                            <label for="email" class="a-label u-visuallyhidden">Din e-postadress</label>
                                            <input type="email" class="a-input js-mailchimp-email" name="email" placeholder="Din e-postadress" required />
                                        </div>
                                    </div>
                                    <div class="m-form__row grid-18 grid-lg-14 grid-md-10">
                                        <div class="o-mailchimp__policy">
                                            <fieldset class="field-group">
                                                <legend class="u-visuallyhidden">Integritetspolicy</legend>
                                                <div class="checkbox">
                                                    <input id="pa-iis-mailchimp-static-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
                                                    <label for="pa-iis-mailchimp-static-form" class="u-p-r-0"><span>Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a></span></label>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                                <input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
                                <input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
                                <input type="hidden" name="tags" value="" />
                                <button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
                                    <span class="a-button__text">Prenumerera</span>
                                </button>
                                <div data-mailchimp-result="1"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="o-mailchimp o-mailchimp--sliding" data-mailchimp="iis-mailchimp-sliding-form" id="iis-mailchimp-sliding-form" data-slider-delay="5000" aria-hidden="true">
            <div class="wrapper">
                <div class="o-mailchimp__wrapper">
                    <div class="row flex-row-reverse o-mailchimp__close">
                        <button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup" aria-controls="iis-mailchimp-sliding-form">
                            <span class="a-button__text">Stäng</span>
                            <svg class="icon a-button__icon">
                                <use xlink:href="#icon-close"></use>
                            </svg>
                        </button>
                    </div>
                    <div class="row flex-row-reverse o-mailchimp__row-bottom">
                        <div class="o-mailchimp__image-container grid-18 grid-lg-10">
                            <img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
                        </div>
                        <div class="o-mailchimp__content grid-18 grid-lg-8">
                            <h1 class="o-mailchimp__headline">Nyhetsbrev från Internetstiftelsen</h1>
                            <p class="o-mailchimp__preamble">Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!</p>
                            <form action="./" method="post">
                                <div class="m-form-control row">
                                    <div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
                                        <div class="field-group">
                                            <label for="email" class="a-label u-visuallyhidden">Din e-postadress</label>
                                            <input type="email" class="a-input js-mailchimp-email" name="email" placeholder="Din e-postadress" required />
                                        </div>
                                    </div>
                                    <div class="m-form__row grid-18 grid-lg-14 grid-md-10">
                                        <div class="o-mailchimp__policy">
                                            <fieldset class="field-group">
                                                <legend class="u-visuallyhidden">Integritetspolicy</legend>
                                                <div class="checkbox">
                                                    <input id="pa-iis-mailchimp-sliding-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
                                                    <label for="pa-iis-mailchimp-sliding-form" class="u-p-r-0">
                                                        <span>Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a></span>
                                                    </label>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                                <input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
                                <input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
                                <input type="hidden" name="tags" value="" />
                                <button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
                                    <span class="a-button__text">Prenumerera</span>
                                </button>
                                <div data-mailchimp-result="1"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
    <div class="site__footer">
        <div class="wrapper-fluid">
            <footer class="o-footer" id="siteFooter">
                <div class="row">
                    <div class="grid-18 o-footer__info">
                        <div class="row">
                            <div class="grid-18 grid-lg-9 o-footer__info__freetext">
                                <p class="o-footer__paragraph"><a href="https://internetstiftelsen.se">Internetstiftelsen</a> verkar för ett internet som bidrar positivt till människan och samhället. Vi är en oberoende organisation som säkerställer en stark och säker infrastruktur för internet i Sverige. Vårt mål är att alla ska våga och kunna använda internet. Vi finns i Sverige och ansvarar för den svenska toppdomänen .se och driften av toppdomänen .nu.</p>
                            </div>
                            <div class="grid-18 grid-lg-9 o-footer__info__contact">
                                <div class="row o-footer__info__contact__row-first">
                                    <div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address1">
                                        <ul class="u-list-clean o-footer__info__contact__address">
                                            <li class="o-footer__info__contact__address__li">Internetstiftelsen</li>
                                            <li class="o-footer__info__contact__address__li">Hammarby Kaj 10D</li>
                                            <li class="o-footer__info__contact__address__li">Box 92073</li>
                                            <li class="o-footer__info__contact__address__li">120 07 Stockholm</li>
                                        </ul>
                                    </div>
                                    <div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address2">
                                        <ul class="u-list-clean o-footer__info__contact__address">
                                            <li class="o-footer__info__contact__address__li">E-post: <a class="o-footer__link" href="mailto:info@internetstiftelsen.se">info@internetstiftelsen.se</a></li>
                                            <li class="o-footer__info__contact__address__li">Telefon: <a class="o-footer__link" href="tel:084523500">08-452 35 00</a></li>
                                            <li class="o-footer__info__contact__address__li">Organisationsnummer: 802405-0190</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="row o-footer__info__contact__row-second">
                                    <div class="grid-19 grid-md-9 o-footer__info__ISO">
                                        <a href="https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf" class="o-footer__link o-footer__external-link">
                                            <img src="https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
                                            <span>Certifierade enligt ISO/IEC<br>27001:2013</span>
                                        </a>
                                    </div>
                                    <div class="grid-19 grid-md-9 o-footer__info__CC">
                                        <a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
                                            <img class="o-footer__external-logo o-footer__external-logo--cc" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="Creative Commons licens&lt;br&gt;Erkännande 4.0 Internationell">
                                            <span>Creative Commons licens<br>Erkännande 4.0 Internationell</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="grid-18 o-footer__logotypes">
                        <div class="row">
                            <div class="o-footer__logotypes__item">
                                <a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
                                    <div class="o-footer__logotypes__item__inner">
                                        <div class="o-footer__logotypes__item__front">
                                            <img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
                                        </div>
                                        <div class="o-footer__logotypes__item__back">
                                            <h2>Svenskarna och internet</h2>
                                            <span>En årlig studie av svenska folkets internetvanor</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="o-footer__logotypes__item">
                                <a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
                                    <div class="o-footer__logotypes__item__inner">
                                        <div class="o-footer__logotypes__item__front">
                                            <img class="o-footer__logotype" alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
                                        </div>
                                        <div class="o-footer__logotypes__item__back">
                                            <h2>Internetdagarna</h2>
                                            <span>Internetdagarna är en konferens som arrangeras av Internetstiftelsen</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="o-footer__logotypes__item">
                                <a href="https://goto10.se" class="o-footer__logotypes__item__link">
                                    <div class="o-footer__logotypes__item__inner">
                                        <div class="o-footer__logotypes__item__front">
                                            <img class="o-footer__logotype" alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
                                        </div>
                                        <div class="o-footer__logotypes__item__back">
                                            <h2>Goto 10</h2>
                                            <span>Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!--<div class="o-footer__logotypes__item">
						<a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>Bredbandskollen</h2>
									<span>Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen</span>
								</div>
							</div>
						</a>
					</div>-->
                            <div class="o-footer__logotypes__item">
                                <a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
                                    <div class="o-footer__logotypes__item__inner">
                                        <div class="o-footer__logotypes__item__front">
                                            <img class="o-footer__logotype" alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
                                        </div>
                                        <div class="o-footer__logotypes__item__back">
                                            <h2>Internetmuseum</h2>
                                            <span>Ett digitalt museum som byggts, och kureras av Internetstiftelsen</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="o-footer__logotypes__item">
                                <a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
                                    <div class="o-footer__logotypes__item__inner">
                                        <div class="o-footer__logotypes__item__front">
                                            <img class="o-footer__logotype" alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
                                        </div>
                                        <div class="o-footer__logotypes__item__back">
                                            <h2>Digitala lektioner</h2>
                                            <span>Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="o-footer__logotypes__item">
                                <a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
                                    <div class="o-footer__logotypes__item__inner">
                                        <div class="o-footer__logotypes__item__front">
                                            <img class="o-footer__logotype" alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
                                        </div>
                                        <div class="o-footer__logotypes__item__back">
                                            <h2>Internetkunskap</h2>
                                            <span>Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!--<div class="o-footer__logotypes__item">
						<a href="https://internetstiftelsen.se" class="o-footer__logotypes__item__link">
							<div class="o-footer__logotypes__item__inner">
								<div class="o-footer__logotypes__item__front">
									<img class="o-footer__logotype"  alt="Internetstiftelsen" src="https://static.internetstiftelsen.se/images/logotypes/internetstiftelsen.svg">
								</div>
								<div class="o-footer__logotypes__item__back">
									<h2>Internetstiftelsen</h2>
									<span>Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället</span>
								</div>
							</div>
						</a>
					</div>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="u-p-y-1 o-footer__bottom-links">
                        <nav>
                            <ul class="u-list-clean display-flex">
                                <li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
                                <li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
                                <li class="u-p-x-1"><button id="ot-sdk-btn" class="o-footer__link o-footer__about-link ot-sdk-show-settings">Anpassa kakor</button></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </footer>
        </div>

    </div>
</div>
<div class="ribbon js-ribbon">
    stage
</div>

<script type="text/javascript">
    var ribbonElement = document.querySelector('.js-ribbon');
    ribbonElement.addEventListener('mouseover', () => {
        ribbonElement.classList.add('is-hidden');
        setTimeout(function() {
            ribbonElement.classList.remove('is-hidden');
        }, 4000);
    });
</script>

<style media="screen">
    .ribbon {
        position: fixed;
        z-index: 100000;
        /* Must be higher than WP's admin toolbar */
        bottom: 0;
        left: 0;
        padding: 0.5rem 0;
        -webkit-transform: translateX(-33.33%) rotate(45deg);
        transform: translateX(-33.33%) rotate(45deg);
        -webkit-transform-origin: bottom right;
        transform-origin: bottom right;
        background-color: #e0bff5;
        font-family: "HK Grotesk Semibold", sans-serif;
        font-family: sans-serif;
        font-size: 12px;
        text-align: center;
        text-transform: uppercase;
    }

    .ribbon.is-hidden {
        display: none;
    }

    .ribbon::before,
    .ribbon::after {
        content: '';
        position: absolute;
        top: 0;
        width: 200%;
        height: 100%;
        margin: 0 -1px;
        background-color: inherit;
    }

    .ribbon::before {
        right: 100%;
    }

    .ribbon::after {
        left: 100%;
    }

    @media (min-width: 576px) {
        .ribbon {
            font-size: 14px;
        }
    }

    @media (min-width: 1400px) {
        .ribbon {
            font-size: 18px;
        }
    }
</style>
<div class="site u-z-index-foreground" id="site">
	<div class="site__header" id="siteHeader">
		<div class="u-position-relative">
			<header class="o-header">
				<div class="wrapper">
					<div class="row justify-content-between align-items-center flex-nowrap">
						<div class="grid-auto">
							<a href="/" class="o-header__logo-link">
								<span class="o-header__logo">
									<svg class="logotype">
										<use xlink:href="#logotype-default"></use>
									</svg>
								</span>
								<span class="u-visuallyhidden">Till startsidan</span>
							</a>
						</div>
						<div class="grid">
							<nav class="a-main-menu" aria-label="Huvudmeny">
								<ul class="a-main-menu__list">
									<li class="u-hidden-mobile">
										<a href="#" class="a-main-menu__list__link">
											<span class="a-main-menu__list__text">Kunskap</span>
										</a>
									</li>
									<li class="u-hidden-mobile">
										<a href="#" class="a-main-menu__list__link">
											<span class="a-main-menu__list__text">Innovation</span>
										</a>
									</li>
									<li class="u-hidden-mobile">
										<a href="#" class="a-main-menu__list__link">
											<span class="a-main-menu__list__text">Domäner</span>
										</a>
									</li>
									<li class="u-hidden-mobile">
										<a href="#" class="a-main-menu__list__link">
											<span class="a-main-menu__list__text">Om oss</span>
										</a>
									</li>
									<li class="u-hidden-mobile">
										<button type="button" class="a-main-menu__list__link js-toggle-domain-search" aria-expanded="false" data-a11y-toggle="domain-search">
											<span class="a-main-menu__list__text">Sök ledig domän</span>
											<div class="icon-arrow-down"></div>
										</button>
									</li>
									<li class="u-hidden-mobile">
											<span class="a-main-menu__list__button">
												<a href="/?s=" class="a-main-menu__list__link a-main-menu__list__search-link u-p-r-5">
													<span class="a-main-menu__list__text">Sök</span>
													<svg class="icon u-icon--medium a-button__icon">
														<use xlink:href="#icon-search" fill="#1f2a36"></use>
													</svg>
												</a>
											</span>
									</li>
									<li>
										<button type="button" class="a-main-menu__list__link js-toggle-mega-menu" aria-expanded="false" data-toggle-target="menu-btn-text" data-toggle-text="Meny|Stäng">
											<span class="a-main-menu__list__text" id="menu-btn-text">Meny</span>
											<div class="icon-hamburger"></div>
										</button>
									</li>
								</ul>
							</nav>

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

			{{> @domain-search}}
		</div>

		{{render '@mega-menu--with-both-searches' id="megaMenu" search=true domain_search=true hidden=true}}
	</div>
	<div class="site__main" id="siteMain">
		<div class="background-snow u-position-relative">
			<div class="wrapper display-flex justify-content-between">
				{{render '@breadcrumb'}}
			</div>
		</div>
		{{render '@sections'}}
		{{render '@mailchimp'}}
	</div>
	<div class="site__footer">
		{{render '@footer'}}
	</div>
</div>
{{> @ribbon text="stage"}}
{
  "hidden": "true",
  "id": true,
  "addidional_classes": false,
  "label": "sök en .se- eller .nu-domän",
  "columns": [
    {
      "headline": "Domäner",
      "list_id": "domains",
      "topics": [
        {
          "topic": "",
          "items": [
            {
              "item": "Är domänen ledig?"
            },
            {
              "item": "Regler och beskrivning av whois"
            },
            {
              "item": "Registrera en domän"
            },
            {
              "item": "Villkor och regler"
            },
            {
              "item": ".se-/.nu-domäner som snart kan bli lediga"
            },
            {
              "item": "Tips innan du registrerar en domän/Inspiration och tips"
            },
            {
              "item": "Återförsäljare"
            },
            {
              "item": "Kontakta din kundtjänst"
            },
            {
              "item": "Så fungerar ett domännamn"
            },
            {
              "item": "Oseriösa metoder"
            },
            {
              "item": "Tvistlösning"
            },
            {
              "item": "Domännamnsbranschen"
            },
            {
              "item": "Tjänster"
            },
            {
              "item": "Domänstatistik"
            }
          ]
        }
      ]
    },
    {
      "headline": "Kunskap",
      "list_id": "kunskap",
      "topics": [
        {
          "topic": "För skolan",
          "items": [
            {
              "item": "Digitala lektioner",
              "is_sub_level": true
            },
            {
              "item": "Lärarfortbildning",
              "is_sub_level": true
            },
            {
              "item": "Fördjupning",
              "is_sub_level": true
            }
          ]
        },
        {
          "topic": "För samhället",
          "items": [
            {
              "item": "Svenskarna och internet",
              "is_sub_level": true
            },
            {
              "item": "Projekt internetaccess",
              "is_sub_level": true
            },
            {
              "item": "Federationers",
              "is_sub_level": true
            }
          ]
        }
      ]
    },
    {
      "headline": "Mötesplatser",
      "list_id": "motesplatser",
      "topics": [
        {
          "topic": "",
          "items": [
            {
              "item": "Internetdagarna",
              "external": true
            },
            {
              "item": "Goto 10",
              "external": true
            },
            {
              "item": "Forskningssamarbeten",
              "external": true
            },
            {
              "item": "Internetstiftelsen stöttar"
            },
            {
              "item": "Investeringar",
              "external": true
            }
          ]
        }
      ]
    },
    {
      "headline": "Om oss",
      "list_id": "om-oss",
      "topics": [
        {
          "topic": "Presentation",
          "items": [
            {
              "item": "Jobba hos oss",
              "is_sub_level": true,
              "external": true
            },
            {
              "item": "Press",
              "is_sub_level": true
            },
            {
              "item": "Pressbilder och fotografier",
              "is_sub_level": true
            },
            {
              "item": "Kontakt",
              "is_sub_level": true
            }
          ]
        }
      ]
    },
    {
      "headline": "English",
      "list_id": "english",
      "topics": [
        {
          "topic": "",
          "items": [
            {
              "item": "Lorem ipsum"
            },
            {
              "item": "Dolor sit amet"
            },
            {
              "item": "Aenean sodales vestibulum"
            }
          ]
        }
      ]
    }
  ]
}

No notes defined.