HiVolda Styleguide

Employee 

<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><a href="">Tilsette</a></li>

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

        <li>Johann Roppen</li>
    </ol>
</nav>

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

    <article class="content-wrapper">
        <div class="row">
            <div class="inner-row">
                <div class="l-indent">
                    <div class="l-pull-aside">
                        <div class="profile-img">
                            <img src="/images/employee.jpg" alt="">
                        </div>
                    </div>
                    <h1 class="page-title">Johann Roppen</h1>

                    <p class="position">Rektor</p>

                    <p class="department">Avdeling Leiing</p>

                    <div class="l-pull-aside">
                        <ul class="list-icons contact-info">

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

                            <li><a href="tel:70075018" class="icon-phone">70 07 50 18</a></li>

                            <li><a href="tel:95289240" class="icon-mobile-phone">952 89 240</a></li>

                            <li><a href="" class="icon-map-marker">Kontor 321</a></li>

                            <li><a href="" class="icon-twitter">@RoppenJ_media</a></li>

                            <li><a href="" class="icon-linkedin">LinkedIn</a></li>

                        </ul>

                        <a href="http://testlenke.no" class="arrow-link contact-download">Last ned kontaktinfo</a>

                    </div>
                    <div class="copy">
                        <p>Fritekst lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, <a href="http://testlenke.no">eksempel link</a> neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
                    </div>
                    <h2 class="label">Utdanning</h2>
                    <h3 class="label">Akademisk grad</h3>
                    <p>Dr.polit</p>
                    <h3 class="label">Doktorgrad</h3>
                    <p>Universitetet i Bergen</p>
                    <ul class="list-fields">
                        <li>
                            <h3 class="label">Tittel</h3>
                            <p>Professor</p>
                        </li>
                        <li>
                            <h3 class="label">Årstall og tittel på avhandling</h3>
                            <p>2003 Orklas lange revolusjon. konsern,
                                redaktørar og journalistikk i Orkla medias
                                norske aviser 1985-2000.</p>
                        </li>
                    </ul>
                    <h3 class="label">Hovedfag</h3>
                    <p>Cand.polit., Universitetet i Bergen</p>
                    <h3 class="label">Pågående doktorgradsprogram:</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                    <h2 class="label">Forskning</h2>
                    <h3 class="label">CHRIStin:</h3>
                    <div class="accordion large">

                        <div class="accordion-item ">
                            <h2 class="title" id="">
                                <a href="http://testlenke.no" class="link block"><span>Vitenskaplig arbeid</span> </a>

                            </h2>
                            <div class="copy">
                                <p>Roppen, Johann. Journalistikk og ålmenn samtale: eit perspektiv på norske bygdeblad. = Journalism and public conversation: a perspective on Norwegian rural newspapers. : [Mangler utgivernavn] 1992 147 s. Hovudfagsoppgåve, samfunnsvitskapleg seksjon</p>
                                <p>Roppen, Johann. Kronikøren og kronikken i Aftenposten og Dagbladet 1960 og 1988. = The commentator and the commentaries in two Norwegian newspapers 1960 and 1988. : [Mangler utgivernavn] 1992 15 s. Hovedfagsessay, samfunnsvitskapleg seksjon</p>
                                <p>Amdam, Jørgen; Barstad, Johan; Dyrhol, Inge; Roppen, Johann; Tangen, Geir. Stategisk analyse av kommunestrukturen på Søre Sunnmøre. Volda: Møreforsking Volda 2004 (ISBN 8276922198) 96 s. Forskingsrapport - Høgskulen i Volda/Research Report - Volda University College(57)</p>
                                <p><a href="http://testlenke.no">Sjå meir på CHRIStin</a></p>

                            </div>
                        </div>

                        <div class="accordion-item ">
                            <h2 class="title" id="">
                                <a href="http://testlenke.no" class="link block"><span>Bøker</span> </a>

                            </h2>
                            <div class="copy">
                                <p>Roppen, Johann. Journalistikk og ålmenn samtale: eit perspektiv på norske bygdeblad. = Journalism and public conversation: a perspective on Norwegian rural newspapers. : [Mangler utgivernavn] 1992 147 s. Hovudfagsoppgåve, samfunnsvitskapleg seksjon</p>
                                <p>Roppen, Johann. Kronikøren og kronikken i Aftenposten og Dagbladet 1960 og 1988. = The commentator and the commentaries in two Norwegian newspapers 1960 and 1988. : [Mangler utgivernavn] 1992 15 s. Hovedfagsessay, samfunnsvitskapleg seksjon</p>
                                <p>Amdam, Jørgen; Barstad, Johan; Dyrhol, Inge; Roppen, Johann; Tangen, Geir. Stategisk analyse av kommunestrukturen på Søre Sunnmøre. Volda: Møreforsking Volda 2004 (ISBN 8276922198) 96 s. Forskingsrapport - Høgskulen i Volda/Research Report - Volda University College(57)</p>
                                <p><a href="http://testlenke.no">Sjå meir på CHRIStin</a></p>

                            </div>
                        </div>

                        <div class="accordion-item ">
                            <h2 class="title" id="">
                                <a href="http://testlenke.no" class="link block"><span>Andre</span> </a>

                            </h2>
                            <div class="copy">
                                <p>Roppen, Johann. Journalistikk og ålmenn samtale: eit perspektiv på norske bygdeblad. = Journalism and public conversation: a perspective on Norwegian rural newspapers. : [Mangler utgivernavn] 1992 147 s. Hovudfagsoppgåve, samfunnsvitskapleg seksjon</p>
                                <p>Roppen, Johann. Kronikøren og kronikken i Aftenposten og Dagbladet 1960 og 1988. = The commentator and the commentaries in two Norwegian newspapers 1960 and 1988. : [Mangler utgivernavn] 1992 15 s. Hovedfagsessay, samfunnsvitskapleg seksjon</p>
                                <p>Amdam, Jørgen; Barstad, Johan; Dyrhol, Inge; Roppen, Johann; Tangen, Geir. Stategisk analyse av kommunestrukturen på Søre Sunnmøre. Volda: Møreforsking Volda 2004 (ISBN 8276922198) 96 s. Forskingsrapport - Høgskulen i Volda/Research Report - Volda University College(57)</p>
                                <p><a href="http://testlenke.no">Sjå meir på CHRIStin</a></p>

                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </article>
    <footer class="content-footer">
        <section class="row row widget-content-list carousel-two no-overlay row-space-large bg-grey bg-large-up">
            <div class="inner-row">

                <div class="wg-header">
                    <h1 class="wg-title">Fleire tilsette i leiing</h1>

                </div>

                <div class="wg-body">

                    <div class="grid-item">
                        <article class="content-teaser employee ">
                            <a href="http://testlenke.no" class="link-block">
                                <div class="image"><img src="/images/employee.jpg" alt="Image description"></div>
                                <h1 class="title"> Johann Roppen</h1>
                                <p class="position">Rektor</p>
                            </a>

                            <p class="department">Avdeling: <a href="http://testlenke.no">Leiing</a></p>

                            <a href="mailto:johann@hivolda.no">Send e-post</a>
                        </article>

                    </div>

                    <div class="grid-item">
                        <article class="content-teaser employee ">
                            <a href="http://testlenke.no" class="link-block">
                                <div class="image"><img src="/images/employee.jpg" alt="Image description"></div>
                                <h1 class="title"> Johann Langtnavn Roppen</h1>
                                <p class="position">Rektor</p>
                            </a>

                            <p class="department">Avdeling: <a href="http://testlenke.no">Leiing</a></p>

                            <a href="mailto:johann@hivolda.no">Send e-post</a>
                        </article>

                    </div>

                </div>

                <div class="wg-footer">
                    <div class="link-group">
                        <p><a href="http://testlenke" class="arrow-link">Sjå alle tilsettte i leiing</a>
                            <a href="http://testlenke" class="arrow-link">Sjå alle tilsette på høgskulen</a>
                        </p>
                    </div>

                </div>

            </div>
        </section>

        <section class="row row widget-text row-space-large">
            <div class="inner-row">

                <div class="wg-header">
                    <h2 class="wg-title">Lyst til å jobbe saman med oss på Høgskulen?</h2>

                </div>

                <div class="wg-body">

                    <div class="copy">
                        <p><a href="http://testlenke.no" class="btn">Sjå ledige stillingar!</a></p>

                    </div>
                </div>

            </div>
        </section>

    </footer>

</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">
      <div class="l-indent">
        <div class="l-pull-aside">
          <div class="profile-img">
            <img src="/images/employee.jpg" alt="">
          </div>
        </div>
        {% render "@element-text--page-title", page_title, true %}
        {% render "@element-text--position", position, true %}
        {% render "@element-text--department", department, true %}
        <div class="l-pull-aside">
          {% render "@element-lists--icon-list", contact_info, true %}
          {% render "@element-links--arrow-link-block", contact_download, true %}
        </div>
        <div class="copy">
          <p>Fritekst lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, <a href="http://testlenke.no">eksempel link</a> neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</p>
        </div>
        <h2 class="label">Utdanning</h2>
        <h3 class="label">Akademisk grad</h3>
        <p>Dr.polit</p>
        <h3 class="label">Doktorgrad</h3>
        <p>Universitetet i Bergen</p>
        <ul class="list-fields">
          <li><h3 class="label">Tittel</h3> <p>Professor</p></li>
          <li><h3 class="label">Årstall og tittel på avhandling</h3><p>2003 Orklas lange revolusjon. konsern,
            redaktørar og journalistikk i Orkla medias
            norske aviser 1985-2000.</p></li>
          </ul>
          <h3 class="label">Hovedfag</h3>
          <p>Cand.polit., Universitetet i Bergen</p>
          <h3 class="label">Pågående doktorgradsprogram:</h3>
          <p>Lorem  ipsum dolor sit amet</p>
          <h2 class="label">Forskning</h2>
          <h3 class="label">CHRIStin:</h3>
          {% render "@module-accordion--large", christin_accordion %}
      </div>
    </div>
  </div>
</article>
<footer class="content-footer">
  {% render "@widget-content-list--employee", related_employees, true %}
  {% render "@widget-text", job_openings, true %}
</footer>
{% endblock %}
 
{
  "body_class": "template-employee",
  "page_title": {
    "text": "Johann Roppen"
  },
  "breadcrumb": {
    "text": "Johann Roppen",
    "items": [
      {
        "text": "Framsida"
      },
      {
        "text": "Tilsette"
      },
      {
        "text": "Leiing"
      }
    ]
  },
  "contact_info": {
    "class": "list-icons contact-info",
    "items": [
      {
        "text": "<a href=\"mailto:kontakt@hivolda.no\" class=\"icon-envelope\">kontakt@hivolda.no</a>"
      },
      {
        "text": "<a href=\"tel:70075018\" class=\"icon-phone\">70 07 50 18</a>"
      },
      {
        "text": "<a href=\"tel:95289240\" class=\"icon-mobile-phone\">952 89 240</a>"
      },
      {
        "text": "<a href=\"\" class=\"icon-map-marker\">Kontor 321</a>"
      },
      {
        "text": "<a href=\"\" class=\"icon-twitter\">@RoppenJ_media</a>"
      },
      {
        "text": "<a href=\"\" class=\"icon-linkedin\">LinkedIn</a>"
      }
    ]
  },
  "contact_download": {
    "text": "Last ned kontaktinfo",
    "class": "arrow-link contact-download"
  },
  "christin_accordion": {
    "class": "large",
    "items": [
      {
        "title": "Vitenskaplig arbeid",
        "text": "Roppen, Johann. Journalistikk og ålmenn samtale: eit perspektiv på norske bygdeblad. = Journalism and public conversation: a perspective on Norwegian rural newspapers. : [Mangler utgivernavn] 1992 147 s. Hovudfagsoppgåve, samfunnsvitskapleg seksjon\n\nRoppen, Johann. Kronikøren og kronikken i Aftenposten og Dagbladet 1960 og 1988. = The commentator and the commentaries in two Norwegian newspapers 1960 and 1988. : [Mangler utgivernavn] 1992 15 s. Hovedfagsessay, samfunnsvitskapleg seksjon\n\nAmdam, Jørgen; Barstad, Johan; Dyrhol, Inge; Roppen, Johann; Tangen, Geir. Stategisk analyse av kommunestrukturen på Søre Sunnmøre. Volda: Møreforsking Volda 2004 (ISBN 8276922198) 96 s. Forskingsrapport - Høgskulen i Volda/Research Report - Volda University College(57)\n\n[Sjå meir på CHRIStin](http://testlenke.no)\n"
      },
      {
        "title": "Bøker",
        "text": "Roppen, Johann. Journalistikk og ålmenn samtale: eit perspektiv på norske bygdeblad. = Journalism and public conversation: a perspective on Norwegian rural newspapers. : [Mangler utgivernavn] 1992 147 s. Hovudfagsoppgåve, samfunnsvitskapleg seksjon\n\nRoppen, Johann. Kronikøren og kronikken i Aftenposten og Dagbladet 1960 og 1988. = The commentator and the commentaries in two Norwegian newspapers 1960 and 1988. : [Mangler utgivernavn] 1992 15 s. Hovedfagsessay, samfunnsvitskapleg seksjon\n\nAmdam, Jørgen; Barstad, Johan; Dyrhol, Inge; Roppen, Johann; Tangen, Geir. Stategisk analyse av kommunestrukturen på Søre Sunnmøre. Volda: Møreforsking Volda 2004 (ISBN 8276922198) 96 s. Forskingsrapport - Høgskulen i Volda/Research Report - Volda University College(57)\n\n[Sjå meir på CHRIStin](http://testlenke.no)\n"
      },
      {
        "title": "Andre",
        "text": "Roppen, Johann. Journalistikk og ålmenn samtale: eit perspektiv på norske bygdeblad. = Journalism and public conversation: a perspective on Norwegian rural newspapers. : [Mangler utgivernavn] 1992 147 s. Hovudfagsoppgåve, samfunnsvitskapleg seksjon\n\nRoppen, Johann. Kronikøren og kronikken i Aftenposten og Dagbladet 1960 og 1988. = The commentator and the commentaries in two Norwegian newspapers 1960 and 1988. : [Mangler utgivernavn] 1992 15 s. Hovedfagsessay, samfunnsvitskapleg seksjon\n\nAmdam, Jørgen; Barstad, Johan; Dyrhol, Inge; Roppen, Johann; Tangen, Geir. Stategisk analyse av kommunestrukturen på Søre Sunnmøre. Volda: Møreforsking Volda 2004 (ISBN 8276922198) 96 s. Forskingsrapport - Høgskulen i Volda/Research Report - Volda University College(57)\n\n[Sjå meir på CHRIStin](http://testlenke.no)\n"
      }
    ]
  },
  "related_employees": {
    "wg_class": "row widget-content-list carousel-two no-overlay row-space-large bg-grey bg-large-up"
  },
  "job_openings": {
    "wg_title": "Lyst til å jobbe saman med oss på Høgskulen?",
    "wg_title_element": "h2",
    "wg_class": "row widget-text row-space-large",
    "text": "[Sjå ledige stillingar!](http://testlenke.no){.btn}\n"
  }
}

No notes defined.