<header class="page-header">
    <a href="#main-content" class="skip-link">Til hovedinnhold</a>
    <div class="container">
        <div class="logo-wrapper">
            <a href="" class="logo">
                <svg>
                    <use xlink:href="/svg/spritemap.svg#logo-tagline"></use>
                </svg>
                <span class="visually-hidden">
                    Karriereveiledning.no - Offentlig og gratis
                </span>
            </a>
            <button type="button" class="btn btn-icon-only md-down icon-bars toggle-main-menu" data-toggle-class="is-open" data-toggle-selector=".page-header">
                <span class="visually-hidden">Meny</span>
            </button>
        </div>

        <div class="nav-search-wrapper">
            <div class="region-menu">
                <nav role="navigation" aria-labelledby="block-karriereveiledning-main-menu-menu" id="block-karriereveiledning-main-menu" class="main-menu">
                    <h2 class="visually-hidden" id="block-karriereveiledning-main-menu-menu">
                        Hovedmeny
                    </h2>

                    <ul block="karriereveiledning_main_menu" class="menu">
                        <li><a href="">Kontakt veileder</a></li>
                        <li class="expanded">
                            <a href="">Utforsk selv</a>
                            <ul>
                                <li class="expanded">
                                    <a href="">Jobb</a>
                                    <ul>
                                        <li><a href="">Slik finner du ledige stillinger</a></li>
                                        <li><a href="">CV og søknad</a></li>
                                        <li><a href="">Tips til intervju</a></li>
                                    </ul>
                                </li>
                                <li><a href="">Utdanning</a></li>
                                <li><a href="">Etter- og videreutdanning</a></li>
                            </ul>
                        </li>

                        <li class="expanded active-trail">
                            <a href="">Vanlige spørsmål</a>
                            <ul>
                                <li><a href="">Før samtalen</a></li>
                                <li class="active-trail"><a href="">Vanlige spørsmål</a></li>
                                <li><a href="">Åpne nettprat</a></li>
                            </ul>
                        </li>

                    </ul>
                </nav>
                <div class="md-down" id="block-knk-site-search-mobile">
                    <form class="views-exposed-form search-form" data-drupal-selector="views-exposed-form-knk-site-search-knk-search-page" action="/sok" method="get" id="views-exposed-form-knk-site-search-knk-search-page" accept-charset="UTF-8">
                        <div class="js-form-item form-item js-form-type-textfield form-item-search js-form-item-search">
                            <label for="edit-search">Søk</label>
                            <input data-drupal-selector="edit-search" type="text" id="edit-search" name="search" value="" size="30" maxlength="128" class="form-text" />
                        </div>

                        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
                            <input data-drupal-selector="edit-submit-knk-site-search" type="submit" id="edit-submit-knk-site-search" value="Søk" class="button js-form-submit form-submit" />
                        </div>
                    </form>
                </div>

            </div>

            <div class="page-search md-up">
                <div class="" id="block-search-form-mini">
                    <form class="views-exposed-form search-form" data-drupal-selector="views-exposed-form-knk-site-search-knk-search-page" action="/sok" method="get" id="views-exposed-form-knk-site-search-knk-search-page" accept-charset="UTF-8">
                        <div class="js-form-item form-item js-form-type-textfield form-item-search js-form-item-search">
                            <label for="edit-search">Søk</label>
                            <input data-drupal-selector="edit-search" type="text" id="edit-search" name="search" value="" size="30" maxlength="128" class="form-text" />
                        </div>

                        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
                            <input data-drupal-selector="edit-submit-knk-site-search" type="submit" id="edit-submit-knk-site-search" value="Søk" class="button js-form-submit form-submit" />
                        </div>
                    </form>
                </div>

                <button type="button" class="btn btn-icon-only icon-search toggle-search" data-toggle-class="search-is-open" data-toggle-selector=".page-header">
                    <span class="visually-hidden">Åpne søk</span>
                </button>
            </div>
        </div>
    </div>
</header>

<main id="main-content" class="page-body">
    <div class="container grid-base grid-row-gap-lg">
        <div class="grid-item-wide">
            <div class="banner" style="background-image: url(/img/banner-male-2.jpg)">
                <div class="banner-inner">
                    <h1>Kontakt karriereveileder</h1>
                    <p class="text-lg">
                        Snakk med en profesjonell karriereveileder på nett eller telefon.
                    </p>
                    <div>
                        <p>
                            <strong class="pulse-online mr-sm">
                                Vi er pålogget nå
                            </strong>
                            <a class="btn" href="http://testlenke.no">Ta kontakt</a>
                        </p>
                    </div>

                </div>
            </div>

            <div class="grid-item-full text-center">
                <div id="block-yoursituation" class="block-persona">
                    <h2 class="block-persona-title">Your Situation</h2>
                    <h5 class="block-persona-subtitle">Subtitle text</h5>
                    <div class="block-persona-personas">
                        <a href="/react-app?situation=ikke-jeg-vil" class="persona--ikke-jeg-vil">Jeg aner ikke hva jeg vil</a>
                        <a href="/react-app?situation=jobb-etter-studiet" class="persona--jobb-etter-studiet">Det aller viktigste er a fa en jobb etter studiet</a>
                        <a href="/react-app?situation=ikke-inn-studiet" class="persona--ikke-inn-studiet">Jeg kommer ikke inn pa studiet jeg onsker med</a>
                        <a href="/react-app?situation=jobb-tjener-mye" class="persona--jobb-tjener-mye">Jeg vil ha en jobb der jeg tjener mye</a>
                        <a href="/react-app?situation=vil-studere-ikke-hva" class="persona--vil-studere-ikke-hva">Jeg vet hvor jeg vil studere, men ikke hva</a>
                    </div>
                    <a href="#" class="block-persona-tooltip-toggle tooltip">
                        Hvar er dette?
                        <span class="tooltiptext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </span>
                    </a>
                </div>

            </div>

            <p class="text-center mt-md">
                <strong>Utforsk selv</strong>: Les mer om <a href="#">opplæring</a>, <a href="#">
                    utdanning
                </a> og <a href="#">jobbsøk</a>
            </p>
        </div>

        <div class="spacer grid-item-full"></div>

        <div class="grid-item-full text-center">
            <h2 class="header-group">
                <span class="left small">Ofte stilte</span>
                spørsmål og svar
                <span class="center small">- om våre tjenester.</span>
            </h2>

        </div>

        <div class="grid-item-full">
            <div class="accordion">

                <article class="accordion-item">
                    <header class="accordion-header">
                        <h3 class="title">
                            <a href="#" data-toggle-class="is-open" data-toggle-closest-selector=".accordion-item">
                                Hva skjer hvis jeg ikke svarer innen fristen?
                            </a>
                        </h3>
                    </header>
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar <a href="http://testlenke.no">odio lorem non turpis</a>. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volut</p>

                    </div>
                </article>

                <article class="accordion-item">
                    <header class="accordion-header">
                        <h3 class="title">
                            <a href="#" data-toggle-class="is-open" data-toggle-closest-selector=".accordion-item">
                                Hvordan svarer jeg ja til en studieplass?
                            </a>
                        </h3>
                    </header>
                    <div class="accordion-body">
                        <p>Så lenge det er innenfor svarfristen, kan du endre svar så mange ganger du ønsker.</p>

                    </div>
                </article>

                <article class="accordion-item">
                    <header class="accordion-header">
                        <h3 class="title">
                            <a href="#" data-toggle-class="is-open" data-toggle-closest-selector=".accordion-item">
                                Jeg har allerede registrert svar, men nå har jeg ombestemt meg. Kan jeg forandre svaret?
                            </a>
                        </h3>
                    </header>
                    <div class="accordion-body">
                        <p>Så lenge det er innenfor svarfristen, kan du endre svar så mange ganger du ønsker.</p>

                    </div>
                </article>

            </div>

        </div>

        <div class="grid-item-full text-center">
            <a href="http://testlenke.no" class="btn-secondary">Se flere Spørsmål og Svar</a>

        </div>

        <div class="spacer grid-item-full"></div>

        <div class="grid-item-narrow text-center">
            <h2>
                Hva er karriereveiledning?
            </h2>
            <p class="text-lg">
                Les mer om hva karriereveiledning er og hva du kan bruke det til.
            </p>
            <a href="http://testlenke.no" class="btn-secondary">Lær mer om karriereveiledning</a>

            <div class="modal text-center">
                <div class="modal-window">
                    <button class="modal-close icon-close icon-white" type="button">
                        <span class="visually-hidden">Lukk</span>
                    </button>
                    <div class="modal-content">
                        <h2>Hjelp oss å bli bedre!</h2>
                        <p class="text-lg">Delta i en annonym brukerundersøkelse. Det tar ca 2 minutter.</p>
                        <a class="btn mr-sm" href="">Ja, jeg vil delta</a>
                        <a class="btn-secondary modal-close" href="">Nei takk</a>

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

        </div>
    </div>
</main>
<footer class="page-footer">
    <div class="container">
        <a href="https://hkdir.no/" class="logo">
            <img src="/img/hkdir-logo.png" alt="HKDir.no logo" />
            <span class="visually-hidden">HKDir.no</span>
        </a>
        <nav role="navigation" class="footer-menu">
            <h2 class="visually-hidden">
                Bunntekst-meny
            </h2>
            <ul block="karriereveiledning_footer">
                <li><a href="">Nytt menypunkt 1</a></li>
                <li><a href="">Nytt menypunkt 2</a></li>
                <li><a href="">Nytt menypunkt 3</a></li>
            </ul>
        </nav>
        <nav role="navigation" class="footer-menu">
            <h2 class="visually-hidden">
                Bunntekst-meny
            </h2>
            <ul block="karriereveiledning_footer">
                <li><a href="">Karrieresenter i ditt fylke</a></li>
                <li><a class="is-active" href="">Om Karriereveiledning.no</a></li>
                <li><a href="">Personvernerklæring</a></li>
            </ul>
        </nav>
    </div>
</footer>
{% include '@page-header' %}
<main id="main-content" class="page-body">
  <div class="container grid-base grid-row-gap-lg">
    <div class="grid-item-wide">
      {% include '@banner' with banner %}

      <div class="grid-item-full text-center">
        {% include '@persona' %}
      </div>

      <p class="text-center mt-md">
        <strong>Utforsk selv</strong>: Les mer om <a href="#">opplæring</a>, <a href="#">
          utdanning
        </a> og <a href="#">jobbsøk</a>
      </p>
    </div>

    {% include '@spacer' with {
      class: 'grid-item-full'
    } %}

    <div class="grid-item-full text-center">
      {% include '@header-group' %}
    </div>

    <div class="grid-item-full">
      {% include '@accordion' %}
    </div>

    <div class="grid-item-full text-center">
      {% include '@button--secondary' with {
        text: 'Se flere Spørsmål og Svar'
      } %}
    </div>

    {% include '@spacer' with {
      class: 'grid-item-full'
    } %}

    <div class="grid-item-narrow text-center">
      <h2>
        Hva er karriereveiledning?
      </h2>
      <p class="text-lg">
        Les mer om hva karriereveiledning er og hva du kan bruke det til.
      </p>
      {% include '@button--secondary' with {
        text: 'Lær mer om karriereveiledning'
      } %}
      {% include '@modal' %}
    </div>
  </div>
</main>
{% include '@page-footer' %}
{
  "body_class": "page-front modal-is-open"
}

No notes defined.