HiVolda Styleguide

Page Library 

<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>

<nav class="breadcrumb" role="navigation">
    <h2 class="visuallyhidden"></h2>
    <ol>

        <li><a href="">Framsida</a></li>

        <li>Biblioteket</li>
    </ol>
</nav>

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

    <article class="content-wrapper">
        <div class="row">
            <div class="inner-row">
                <h1 class="page-title">Biblioteket</h1>

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

                <div class="wg-body">

                    <div class="banner " style="background-image: url(/images/library.jpg)">
                        <div class="inner-banner">
                            <form method="post">
                                <label for="oria" class="visuallyhidden">Søk på oria</label>
                                <div class="input-button-group">
                                    <input type="search" value="" placeholder="Søk på Oria [bøker, artiklar, tidsskrift]" id="oria" attr="">
                                    <input type="submit" value="" title="Søk" href="http://testlenke.no" class="btn-search input-btn-search">
                                </div>
                            </form>

                        </div>
                    </div>

                </div>

            </div>
        </div>

        <section class="row grid-three widget-box-link row-space-medium">
            <div class="inner-row">

                <div class="wg-header">
                    <h2 class="wg-title visuallyhidden">Box links widget</h2>

                </div>

                <div class="wg-body">

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Søk og finn litteratur <span>Databasar, e-bøker, ordbøker, leksikon</span></a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Låne og bestille <span>Fornye, reservere, lånereglar</span></a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Skrive og referere <span>Oppgåveskriving, APA, EndNote</span></a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Fjernstudent <span>Tenester for fjern- og nettstudentar</span></a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Fag og forskning <span>Fagsider, Bravo, masteroppgave, Cristin</span></a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Om biblioteket <span>Lokale, grupperom, tilsette</span></a>

                    </div>

                </div>

            </div>
        </section>

        <section class="row row-narrow-one widget-text row-space-medium bg-grey">
            <div class="inner-row">

                <div class="wg-header">
                    <h1 class="wg-title visuallyhidden">Kontakt studentsørvis</h1>

                </div>

                <div class="wg-body">

                    <div class="copy">
                        <h2>Opningstider</h2>
                        <ul class="list-clean">
                            <li>måndag - onsdag: 08.30-20.00</li>
                            <li>torsdag: 10.00-20.00</li>
                            <li>fredag: 08.30-17.00</li>
                            <li>laurdag: 10.00-15.00</li>
                            <li>søndag: stengt</li>
                        </ul>
                        <p><a class="arrow-link" href="http://testlenke.no">Vis biblioteket på kartet</a></p>

                    </div>
                </div>

            </div>
        </section>

        <section class="row grid-two row-narrow-two widget-link row-space-medium">
            <div class="inner-row">

                <div class="wg-header">
                    <h2 class="wg-title">Snarvegar</h2>

                </div>

                <div class="wg-body">

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Innkjøpsframlegg</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Idunn</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Fjerntilgang</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Academic Search Elite</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Grupperom: Bestilling</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Ordnett</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">APA eksempelsamling</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Atekst, Retriever</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Google Scholar</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">SAGE Premier Taylor & Francis</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">BRAVO</a>

                    </div>

                    <div class="grid-item">
                        <a href="http://testlenke.no" class="">Taylor & Francis</a>

                    </div>

                </div>

            </div>
        </section>

        <section class="row row-narrow-one widget-text row-space-medium bg-grey">
            <div class="inner-row">

                <div class="wg-header">
                    <h1 class="wg-title visuallyhidden">Kontakt studentsørvis</h1>

                </div>

                <div class="wg-body">

                    <div class="copy">
                        <h2>Har du spørsmål?</h2>
                        <p>Kontakt oss på biblioteket:</p>
                        <ul class="list-icons">
                            <li><a class="icon-envelope" href="mailto:skranke@hivolda.no">skranke@hivolda.no</a></li>
                            <li><a class="icon-phone" href="tel:70075060">70 07 50 60</a></li>
                        </ul>

                    </div>
                </div>

            </div>
        </section>

        <section class="row widget-content-list event carousel-two no-overlay row-space-medium">
            <div class="inner-row">

                <div class="wg-header">
                    <h1 class="wg-title">Hendingar frå biblioteket</h1>

                </div>

                <div class="wg-body">

                    <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 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">Seminar om likestilling og karrierebygging i akademia</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 class="wg-footer">
                    <p><a href="http://testlenke" class="arrow-link">Sjå fleire hendingar fra biblioteket</a></p>

                </div>

            </div>
        </section>

    </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">
  <div class="row">
    <div class="inner-row">
      {% render "@element-text--page-title", page_title, true %}
    </div>
  </div>
  {% render "@widget-banner", banner, true %}
  {% render "@widget-links--box-links", service_links, true %}
  {% render "@widget-text", opening_hours, true %}
  {% render "@widget-links", shortcut_links, true %}
  {% render "@widget-text", contact, true %}
  {% render "@widget-content-list--event", events, true %}
</article>
{% endblock %}
 
{
  "body_class": "template-page",
  "page_title": {
    "text": "Biblioteket"
  },
  "breadcrumb": {
    "text": "Biblioteket",
    "items": [
      {
        "text": "Framsida"
      }
    ]
  },
  "banner": {
    "wg_class": "widget-banner full-width center light-on-dark",
    "banner": {
      "img": "/images/library.jpg",
      "text": "<form method=\"post\">\n  <label for=\"oria\" class=\"visuallyhidden\">Søk på oria</label>\n  <div class=\"input-button-group\">\n    <input type=\"search\" value=\"\" placeholder=\"Søk på Oria [bøker, artiklar, tidsskrift]\" id=\"oria\" attr=\"\">\n    <input type=\"submit\" value=\"\" title=\"Søk\" href=\"http://testlenke.no\" class=\"btn-search input-btn-search\">\n  </div>\n</form>\n"
    }
  },
  "service_links": {
    "wg_class": "grid-three widget-box-link row-space-medium"
  },
  "opening_hours": {
    "wg_class": "row-narrow-one widget-text row-space-medium bg-grey",
    "wg_title": "Kontakt studentsørvis",
    "wg_title_element": "h1",
    "wg_title_visuallyhidden": true,
    "text": "<h2>Opningstider</h2>\n<ul class=\"list-clean\">\n  <li>måndag - onsdag: 08.30-20.00</li>\n  <li>torsdag: 10.00-20.00</li>\n  <li>fredag: 08.30-17.00</li>\n  <li>laurdag: 10.00-15.00</li>\n  <li>søndag: stengt</li>\n</ul>\n<p><a class=\"arrow-link\" href=\"http://testlenke.no\">Vis biblioteket på kartet</a></p>\n"
  },
  "shortcut_links": {
    "wg_class": "grid-two row-narrow-two widget-link row-space-medium",
    "items": [
      {
        "text": "Innkjøpsframlegg"
      },
      {
        "text": "Idunn"
      },
      {
        "text": "Fjerntilgang"
      },
      {
        "text": "Academic Search Elite"
      },
      {
        "text": "Grupperom: Bestilling"
      },
      {
        "text": "Ordnett"
      },
      {
        "text": "APA eksempelsamling"
      },
      {
        "text": "Atekst, Retriever"
      },
      {
        "text": "Google Scholar"
      },
      {
        "text": "SAGE Premier Taylor & Francis"
      },
      {
        "text": "BRAVO"
      },
      {
        "text": "Taylor & Francis"
      }
    ]
  },
  "contact": {
    "wg_class": "row-narrow-one widget-text row-space-medium bg-grey",
    "wg_title": "Kontakt studentsørvis",
    "wg_title_element": "h1",
    "wg_title_visuallyhidden": true,
    "text": "<h2>Har du spørsmål?</h2>\n<p>Kontakt oss på biblioteket:</p>\n<ul class=\"list-icons\">\n  <li><a class=\"icon-envelope\" href=\"mailto:skranke@hivolda.no\">skranke@hivolda.no</a></li>\n  <li><a class=\"icon-phone\" href=\"tel:70075060\">70 07 50 60</a></li>\n</ul>\n"
  }
}

No notes defined.