Local content

Local content is a block used on pages with localized content. It displays information to the end user of where the solution thinks the user is located, based on ip address or stored user input. It also lets the user override this location manually. Other components use the location stored to show location specific content to the user.

Du befinner deg i Moss kommune. Innholdet er tilpasset denne plasseringen.
Bytt lokasjon

  1. Din posisjon
resultater er tilgjengelig. Bruk tastatur eller swipe-bevegelser for å navigere.
<section class="notification notification--has-icon notification__icon--location local-content" data-geo="true">
	<div class="notification__message">
  	    <p>Du befinner deg i <b>Moss kommune</b>. Innholdet er tilpasset denne plasseringen.<br><a href="javascript:void(0)" class="local-content__btn">Bytt lokasjon</a></p>
    </div>        
	<form class="autocomplete autocomplete--hidden" data-flag="0">
        <div class="autocomplete__inputgroup">
            <div class="autocomplete__container">
                <label class="autocomplete__label" id="autocomplete_label" for="autocomplete__input">Når autocomplete resultater er tilgjengelig, bruk piltastene opp og ned for å navigere og enter for å velge gitt alternativ.</label>
                <input type="text" class="autocomplete__input" id="autocomplete__input" aria-autocomplete="both" aria-haspopup="true" autocomplete="off" aria-owns="autocomplete__results" aria-labelledby="autocomplete_label" placeholder="Skriv inn sted eller postnummer">
                <ol role="listbox" class="autocomplete__list list--reset-style" id="autocomplete__results">

                    <li role="option" class="autocomplete__list-item autocomplete__list-item--gps">
                        <a href="#gps" tabindex="-1" class="link--no-underline" data-id="Din posisjon">Din posisjon</a>
                    </li>
                </ol>
                <span class="autocomplete__live show-for-sr" aria-live="assertive">resultater er tilgjengelig. Bruk tastatur eller swipe-bevegelser for å navigere.</span>
            </div>
            <div class="autocomplete__btngroup">
                <button type="submit" class="btn btn--icon autocomplete__search-btn" aria-label="Submit button">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 24 24" class="autocomplete__search-icon">
                        <g>
                            <path d="M2.182 9.024a6.85 6.85 0 0 1 6.842-6.842 6.85 6.85 0 0 1 6.842 6.842 6.85 6.85 0 0 1-6.842 6.843 6.85 6.85 0 0 1-6.842-6.843zM23.767 22.23l-7.644-7.644a8.978 8.978 0 0 0 1.925-5.56 9.024 9.024 0 1 0-9.024 9.024 8.971 8.971 0 0 0 5.555-1.923l7.645 7.645 1.543-1.542z"></path>
                        </g>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 37 38" class="autocomplete__process-icon">
                        <defs>
                            <path id="a" d="M9.744 2.046V.223H.482v1.823h9.262z"></path>
                            <path id="c" d="M2.782.77H.955v9.25h1.827V.77z"></path>
                        </defs>
                        <g fill="none" fill-rule="evenodd">
                            <g transform="translate(27.038 17.73)">
                                <mask id="b" fill="#fff">
                                    <use xlink:href="#a"></use>
                                </mask>
                                <path fill="#E6E9F2" d="M1.394.223a.912.912 0 1 0 0 1.823h7.438a.913.913 0 0 0 .914-.912c0-.503-.41-.91-.914-.91H1.394z" mask="url(#b)"></path>
                            </g>
                            <path fill="#A1A8B5" d="M.913 17.954a.912.912 0 1 0 0 1.823H8.35a.913.913 0 0 0 .913-.912c0-.503-.41-.91-.913-.91H.913z"></path>
                            <path fill="#EAEDF4" d="M27.543 23.09a.912.912 0 1 0-.912 1.58l6.442 3.711a.912.912 0 1 0 .911-1.578l-6.44-3.714z"></path>
                            <path fill="#B0B6C2" d="M3.711 9.35a.91.91 0 1 0-.913 1.578L9.24 14.64a.912.912 0 1 0 .914-1.578L3.71 9.35z"></path>
                            <path fill="#F1F2F8" d="M24.203 27.093a.913.913 0 0 0-1.582.911l3.72 6.433a.914.914 0 0 0 1.581-.911l-3.719-6.433z"></path>
                            <path fill="#BFC4CE" d="M10.443 3.294a.912.912 0 1 0-1.582.912l3.72 6.432a.912.912 0 0 0 1.582-.912l-3.72-6.432z"></path>
                            <path fill="#F6F8FC" d="M19.305 28.892a.913.913 0 0 0-1.827 0v7.428a.913.913 0 0 0 1.827 0v-7.428z"></path>
                            <g transform="translate(16.524 -.269)">
                                <mask id="d" fill="#fff">
                                    <use xlink:href="#c"></use>
                                </mask>
                                <path fill="#C8CDD9" d="M2.782 1.68a.912.912 0 0 0-1.827 0v7.427a.913.913 0 0 0 1.827 0V1.681z" mask="url(#d)"></path>
                            </g>
                            <path fill="#FFF" d="M14.162 28.005a.913.913 0 0 0-1.582-.91l-3.718 6.431a.91.91 0 0 0 .334 1.245.915.915 0 0 0 1.247-.334l3.719-6.432z"></path>
                            <path fill="#D1D6E1" d="M27.922 4.206a.912.912 0 1 0-1.582-.912l-3.718 6.432a.913.913 0 0 0 1.58.912l3.72-6.432z"></path>
                            <path fill="#959DAE" d="M10.153 24.668a.911.911 0 1 0-.914-1.579L2.8 26.803a.912.912 0 0 0 .913 1.58l6.44-3.715z"></path>
                            <path fill="#DCDFE8" d="M33.984 10.928a.912.912 0 0 0-.912-1.578l-6.442 3.712a.911.911 0 1 0 .913 1.58l6.441-3.714z"></path>
                        </g>
                    </svg>
                </button>
            </div>
        </div>
        <div class="notification notification--error autocomplete__notification notification--hidden" aria-live="assertive" role="alert">
            <h2 class="notification__heading">Feil:</h2>
            <div class="notification__message">
                <p></p>
            </div>
        </div>
    </form>
</section>