Front Page

WIP

HTML
View
Context
Info
Notes


        
        <header class="page-header" tabindex="-1" id="top">
    <div class="inner-row">
        <a href="#page-body" class="skip-link">Til hovedinnhold</a>
        <div class="header-top">
            <a href="" class="logo"><img src="/images/hivolda-logo.svg" alt="Forside høgskulen i Volda"></a>
            <a class="nav-toggle search" data-btn="search" href="#search" title="Åpne søk"></a>
            <a class="nav-toggle nav xlarge-down" data-btn="nav" href="#nav" title="Åpne meny"></a>
        </div>
        <nav class="page-navigation" role="navigation">
            <div class="nav-group" tabindex="-1" id="nav">
                <ul class="nav-primary">

                    <li class="nav-item"><a href="" class="nav-link">Studietilbod</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Studentliv</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Forsking</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Oppdrag og samarbeid</a></li>

                </ul>
                <ul class="nav-secondary">

                    <li class="nav-item"><a href="" class="nav-link">Studentsørvis</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Om Høgskulen i Volda</a></li>

                    <li class="nav-item"><a href="" class="nav-link">Bibliotek</a></li>

                    <li class="nav-item"><a href="" class="nav-link">English</a></li>

                </ul>
                <a href="#top" class="nav-toggle nav-close xlarge-down" title="Lukk meny" data-btn="nav-close"></a>
            </div>
        </nav>
    </div>
</header>
<div class="search-group" tabindex="-1" id="search">
    <div class="inner-row">
        <form method="post" action="">
            <label for="page-seach" class="visuallyhidden">Søk her</label>
            <div class="input-button-group input-underline">
                <input type="search" value="" placeholder="Søk på hivolda.no" id="">

                <input value title="Søk" type="submit" href="http://testlenke.no" class="btn-search input-btn-search"></input>

            </div>

        </form>
        <a href="#top" class="nav-toggle search-close" data-btn="search-close" title="Lukk søk"></a>
    </div>
</div>

<main class="page-body" id="page-body" tabindex="0">

    <article class="content-wrapper">

        <div class="row widget-banner full-width center light-on-dark row-space-small overlay">
            <div class="inner-row">

                <div class="wg-body">

                    <div class="banner " style="background-image: url(/images/banner-study-start.jpg)">
                        <div class="inner-banner">
                            <h1>Husk søknadsfristen 15. april!</h1>
                            <div class="countdown">
                                <div class="time-block">
                                    <span class="value">12</span>
                                    <span class="definition">Dagar</span>
                                </div>
                                <div class="time-block">
                                    <span class="value">03</span>
                                    <span class="definition">Timar</span>
                                </div>
                                <div class="time-block">
                                    <span class="value">34</span>
                                    <span class="definition">Min</span>
                                </div>
                                <div class="time-block">
                                    <span class="value">08</span>
                                    <span class="definition">Sek</span>
                                </div>
                            </div>
                            <p class="button-group"><a href="http://testlenke.no" class="btn btn-primary">Finn studietilbodet ditt</a>
                                <a href="http://testlenke.no" class="btn btn-primary">Slik søkjer du</a>
                                <a href="http://testlenke.no" class="btn btn-primary">Møt våre tidlegare studentar</a>
                            </p>

                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="row row-space-large grid-two">
            <div class="inner-row">
                <div class="grid-item">
                    <h2 class="wg-title large-down">Finn studie</h2>
                    <div class="input-button-group input-button-group-search">
                        <input type="search" value="" placeholder="Søk på nett-/deltid-/heltidsstudie" id="">

                        <input value title="Søk" type="submit" href="http://testlenke.no" class="btn-search input-btn-search"></input>

                    </div>

                    <p><a href="http://testlenke.no">Sjå alle studietilbod</a></p>
                </div>
                <div class="grid-item">
                    <div class="button-group">
                        <a href="http://testlenke.no" class="btn">Fronter</a>

                        <a href="http://testlenke.no" class="btn">Canvas</a>

                    </div>
                </div>
            </div>
        </div>
        <div class="row row-space-large row-space-top-none">
            <div class="inner-row">
                <a class="promo" href="">
                    <picture>
                        <source media="(min-width: 800px)" srcset="/images/campaign-large.png 1x, /images/campaign-large@2x.png 2x ">
                        <source media="(min-width: 400px)" srcset="/images/campaign-medium.png 1x, /images/campaign-medium@2x.png 2x">
                        <source srcset="/images/campaign-small.png 1x, /images/campaign-small@2x.png 2x">
                        <img src="/images/campaign-medium.png" alt="Dokfilm 2017 26. - 30. april">
                    </picture>
                </a>

            </div>
        </div>
        <div class="row widget-content-list carousel-three row-space-large bg-grey">
            <div class="inner-row">
                <h2 class="wg-title">Nyhende og kommende hendelser</h2>
                <div class="wg-body">
                    <div class="grid-item">
                        <article class="content-teaser article ">
                            <a href="http://testlenke.no" class="link-block">
                                <div class="image"><img src="https://cldup.com/3EsQuKhX2a.png" alt="Image description"></div>
                                <time datetime="2017-01-09" class="published">09. januar 2017</time>
                                <h1 class="title"> Fekk eit fortrinn før det skal søke jobb</h1>
                                <div class="desc">
                                    <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                                </div>
                            </a>
                        </article>

                    </div>
                    <div class="grid-item">
                        <article class="content-teaser article ">
                            <a href="http://testlenke.no" class="link-block">
                                <div class="image"><img src="/images/article-teaser-1.jpg" alt="Image description"></div>
                                <time datetime="2017-01-09" class="published">09. januar 2017</time>
                                <h1 class="title"> Verdifull boksamling fra Volda</h1>
                                <div class="desc">
                                    <p>Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio</p>
                                </div>
                            </a>
                        </article>

                    </div>
                    <div class="grid-item">
                        <article class="content-teaser event ">
                            <a href="http://testlenke.no" class="link-block">
                                <time class="date-block" datetime="2017-01-09">
                                    <span class="day">22</span>
                                    <span class="month">mai</span>
                                </time>

                                <h1 class="title">Skrivekveld i bilioteket</h1>

                            </a>
                            <time datetime="" class="time icon-watch">10.00 - 12.00</time>
                            <a class="location icon-map-marker" href="">Høgskulen i Volda, BK</a>
                        </article>

                    </div>
                </div>

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

</main>
<footer class="page-footer">
    <div class="inner-row">
        <div class="grid-three">
            <nav class="grid-item">
                <h2 class="nav-title collapsable">For deg som skal søke</h2>
                <ul class="list-icons" role="navigation">

                    <li><a href="http://studietilbod.hivolda.no" class="">Studietilbod</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Slik søker du</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Studentsørvis</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Studentlivet</a>
                    </li>

                </ul>
            </nav>
            <nav class="grid-item">
                <h2 class="nav-title collapsable">Verktøy og tjenester</h2>
                <ul class="list-icons">

                    <li><a href="http://testlenke.no" class="">Fronter</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Studentweb</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">IT-tjenester</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Bibliotek</a>
                    </li>

                </ul>
            </nav>
            <nav class="grid-item">
                <h2 class="nav-title">Høgskulen i Volda</h2>
                <ul class="list-icons">

                    <li><a href="http://testlenke.no" class="icon-mail-box-light">PB 500, 6100 Volda</a>
                    </li>

                    <li><a href="tlf:70075000" class="icon-phone-light">70 07 50 00</a>
                    </li>

                    <li><a href="mailto:postmottak@hivolda.no" class="icon-envelope-light">postmottak@hivolda.no</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Vis HiVolda på kartet</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Ledige stillinger</a>
                    </li>

                    <li><a href="http://testlenke.no" class="">Personvern og villkår</a>
                    </li>

                </ul>
            </nav>
        </div>
        <ul class="social-links">

            <li><a href="http://testlenke.no" class="social-link facebook" title="Del på facebook"><span>facebook</span></a>
            </li>

            <li><a href="http://testlenke.no" class="social-link twitter" title="Del på facebook"><span>twitter</span></a>
            </li>

            <li><a href="http://testlenke.no" class="social-link instagram" title="Del på facebook"><span>instagram</span></a>
            </li>

            <li><a href="http://testlenke.no" class="social-link nernett" title="Del på facebook"><span>nærnett</span></a>
            </li>

            <li><a href="http://testlenke.no" class="social-link blog" title="Del på facebook"><span>blogg</span></a>
            </li>

        </ul>
        <div class="center">
            <a href="#" class="back-to-top btn">Tilbake til toppen</a>

        </div>
        <div class="logos">
            <ul class="list-block-inline">
                <li>
                    <a href="https://www.miljofyrtarn.no"><span class="icon-eco-lighthouse"></span></a>
                </li>
            </ul>
        </div>
    </div>
</footer>


        {% extends "@page" %}
{% block main %}
<article class="content-wrapper">
  {# {% render "@widget-banner", banner, true %} #}
  {% render "@widget-banner--countdown" %}
  <div class="row row-space-large grid-two">
    <div class="inner-row">
      <div class="grid-item">
        <h2 class="wg-title large-down">Finn studie</h2>
        {% render "@component-input-button-group", form_study, true %}
        <p><a href="http://testlenke.no">Sjå alle studietilbod</a></p>
      </div>
      <div class="grid-item">
        <div class="button-group">
          {% render "@element-button", btn_1, true %}
          {% render "@element-button", btn_2, true %}
        </div>
      </div>
    </div>
  </div>
  <div class="row row-space-large row-space-top-none">
    <div class="inner-row">
      {% render "@component-promo", promo, true %}
    </div>
  </div>
  <div class="row widget-content-list carousel-three row-space-large bg-grey">
    <div class="inner-row">
      <h2 class="wg-title">Nyhende og kommende hendelser</h2>
      <div class="wg-body">
        <div class="grid-item">
          {% render "@module-content-teaser--article", article_1, true %}
        </div>
        <div class="grid-item">
          {% render "@module-content-teaser--article", article_2, true %}
        </div>
        <div class="grid-item">
          {% render "@module-content-teaser--event", event, true %}
        </div>
      </div>

    </div>
  </div>
</article>
{% endblock %}


        
            
            {
  "body_class": "template-front-page",
  "page_title": {
    "text": "Kunnskap for framtida"
  },
  "banner": {
    "wg_class": "widget-banner full-width center light-on-dark",
    "banner": {
      "img": "/images/front-page-darken.jpg",
      "text": "# Kunnskap for framtida\n\n<br>\n\n[Sjå nettstudiene](http://testlenke.no){.btn .btn-invert .btn-outline}\n[Sjå heiltid- og deltidsstudiene](http://testlenke.no){.btn .btn-invert .btn-outline}\n{.button-group}\n"
    }
  },
  "form_study": {
    "class": "input-button-group-search",
    "input": {
      "placeholder": "Søk på nett-/deltid-/heltidsstudie",
      "type": "search"
    }
  },
  "btn_1": {
    "text": "Fronter"
  },
  "btn_2": {
    "text": "Canvas"
  },
  "article_1": {
    "title": "Fekk eit fortrinn før det skal søke jobb"
  },
  "article_2": {
    "src": "/images/article-teaser-1.jpg"
  }
}

Handle: @template-front-page
Preview:
- With layout
- Component only
Filesystem Path: source/patterns/05-templates/front-page.twig
References (8): @page, @widget-banner, @widget-banner--countdown, @component-input-button-group, @element-button, @component-promo, @module-content-teaser--article, @module-content-teaser--event

No notes defined.