Styleguide

Styleguide short description. It's buildt with Elements, Layout  and Components

Visit live site

Element

Typograhphy

Headers <h1>to <h6>have a visual hierarchy from large to small. There is also helper classes to get the style of the individual headings .h1to .h6.

Headers is scaled down on smaller screens.

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5
Header level 6
<h1>Header level 1</h1>
<h2>Header level 2</h2>
<h3>Header level 3</h3>
<h4>Header level 4</h4>
<h5>Header level 5</h5>
<h6>Header level 6</h6>

Paragraph

Regular paragraph <p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>

Icons

<div class="icon-facebook"></div>
<div class="icon-twitter"></div>

Components

Contentbox

Contentbox - Facts

Fakta om Hadja Tajik

  • Nestleder i Arbeiderpartiet
  • Født 18. juli 1983 i Strand kommune i Rogaland. Foreldrene er innvandrere fra Pakistan.
  • Hun har studert journalistikk i Stavanger, menneskerettigheter ved Kingston University i England og juss ved Universitetet i Oslo.
  • Hadia Tajik har jobbet som journalist-vikar. Da var hun blant annet i Aftenposten, VG, Dagbladet og Stavanger Aftenblad.
  • Tidligere politisk rådgiver i Arbeids- og inkluderingsdepartementet.
<div class="contentbox facts">
  <h2 class="title">Fakta om Hadja Tajik</h2>
  <ul>
    <li>Nestleder i Arbeiderpartiet</li>
    <li>Født 18. juli 1983 i Strand kommune i Rogaland. Foreldrene er innvandrere fra Pakistan.</li>
    <li>Hun har studert journalistikk i Stavanger, menneskerettigheter ved Kingston University i England og juss ved Universitetet
      i Oslo.</li>
    <li>Hadia Tajik har jobbet som journalist-vikar. Da var hun blant annet i Aftenposten, VG, Dagbladet og Stavanger Aftenblad.</li>
    <li>Tidligere politisk rådgiver i Arbeids- og inkluderingsdepartementet.</li>
  </ul>
</div>

Contentbox - Questions

  1. Hva er et monarki, og hva er en republikk?
  2. Synes du Norge bør fortsette å være et monarki? Diskuter i grupper, og forsøk å formulere noen gode argumenter for synet ditt.
  3. Hva er det ved Hadia Tajik og den saken hun skriver om, som gjør at så mange blir sinte og skriver hatefulle kommentarer? Diskuter.
  4. Hva kan man gjøre for å unngå slike kommentarer i debatter på nett og i sosiale medier? Forsøk å sette opp noen generelle regler som kan gjelde for diskusjoner i sosiale medier eller på nettet generelt.
<div class="contentbox questions">
  <ol>
    <li>Hva er et monarki, og hva er en republikk?</li>
    <li>Synes du Norge bør fortsette å være et monarki? Diskuter i grupper, og forsøk å formulere noen gode argumenter for synet
      ditt.</li>
    <li>Hva er det ved Hadia Tajik og den saken hun skriver om, som gjør at så mange blir sinte og skriver hatefulle kommentarer?
      Diskuter.</li>
    <li>Hva kan man gjøre for å unngå slike kommentarer i debatter på nett og i sosiale medier? Forsøk å sette opp noen generelle
      regler som kan gjelde for diskusjoner i sosiale medier eller på nettet generelt.</li>
  </ol>
</div>

Contentbox - Greybox

Samfunnsfag

Samfunnskunnskap

  • drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv
  • drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar
  • gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag
  • gjere greie for korleis ulike politiske parti fremjar ulike verdiar og interesser, knyte dette til aktuelle samfunnsspørsmål og argumentere for eige syn
  • gjere greie for omgrepa haldningar, fordommar og rasisme og vurdere korleis haldningar kan bli påverka, og korleis den einskilde og samfunnet kan motarbeide fordommar og rasisme
  • gjere greie for politiske institusjonar i Noreg og deira rollefordeling og samanlikne dei med institusjonar i andre land
  • identifisere samfunnsfaglege argument, fakta og påstandar i samfunnsdebattar og diskusjonar på Internett, vurdere dei kritisk og vurdere rettar og konsekvensar når ein offentleggjer noko på Internett
  • reflektere over samfunnsfaglege spørsmål ved hjelp av informasjon frå ulike digitale og papirbaserte kjelder og diskutere formål og relevans til kjeldenek
<div class="contentbox greybox">
  <h2 class="title">Samfunnsfag</h2>
  <h3 class="title-secondary">Samfunnskunnskap</h3>
  <ul>
    <li>drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv</li>
    <li>drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar</li>
    <li>gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag</li>
    <li>gjere greie for korleis ulike politiske parti fremjar ulike verdiar og interesser, knyte dette til aktuelle samfunnsspørsmål
      og argumentere for eige syn</li>
    <li>gjere greie for omgrepa haldningar, fordommar og rasisme og vurdere korleis haldningar kan bli påverka, og korleis den
      einskilde og samfunnet kan motarbeide fordommar og rasisme</li>
    <li>gjere greie for politiske institusjonar i Noreg og deira rollefordeling og samanlikne dei med institusjonar i andre land</li>
    <li>identifisere samfunnsfaglege argument, fakta og påstandar i samfunnsdebattar og diskusjonar på Internett, vurdere dei
      kritisk og vurdere rettar og konsekvensar når ein offentleggjer noko på Internett</li>
    <li>reflektere over samfunnsfaglege spørsmål ved hjelp av informasjon frå ulike digitale og papirbaserte kjelder og diskutere
      formål og relevans til kjeldenek</li>
  </ul>
</div>

Accordion

Accordion

Samfunnsfag

Samfunnskunnskap

  • drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv
  • drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar
  • gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag

Norsk

Skriftlig kommunikasjon

  • drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv
  • drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar
  • gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag

Samfunnsfag

  • drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv
  • drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar
  • gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag

KRLE

Samfunnskunnskap

  • drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv
  • drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar
  • gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag
<div class="accordion-group">
  <article class="accordion contentbox greybox">
    <a href="#" class="toggle">
      <h2 class="title">Samfunnsfag</h2>
    </a>
    <div class="accordion-body">
      <h3 class="title-secondary">Samfunnskunnskap</h3>
      <ul>
        <li>drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv</li>
        <li>drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar</li>
        <li>gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag</li>
      </ul>
    </div>
  </article>
  <article class="accordion contentbox greybox">
    <a href="#" class="toggle">
      <h2 class="title">Norsk</h2>
    </a>
    <div class="accordion-body">
      <h3 class="title-secondary">Skriftlig kommunikasjon</h3>
      <ul>
        <li>drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv</li>
        <li>drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar</li>
        <li>gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag</li>
      </ul>
      <h3 class="title-secondary">Samfunnsfag</h3>
      <ul>
        <li>drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv</li>
        <li>drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar</li>
        <li>gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag</li>
      </ul>
    </div>
  </article>
  <article class="accordion contentbox greybox">
    <a href="#" class="toggle">
      <h2 class="title">KRLE</h2>
    </a>
    <div class="accordion-body">
      <h3 class="title-secondary">Samfunnskunnskap</h3>
      <ul>
        <li>drøfte ideal om menneskeverd, diskriminering og utvikling av rasisme i eit historisk og notidig perspektiv</li>
        <li>drøfte viktige omveltingar i samfunnet i nyare tid, og reflektere over korleis dagens samfunn opnar f or nye omveltingar</li>
        <li>gjere greie for framveksten av velferdsstaten og beskrive trekk ved Noreg i dag</li>
      </ul>
    </div>
  </article>
</div>

Misc Components

Expandable container

Expands a container to 100% width. Parent element need class .expandable-media, and the trigger is a child <a>with class .toggle. This element can be empty, but should have a titleattribute that explains what happens when triggered.

placeholder

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

<figure class="expandable-media aligncenter">
  <img src="http://placehold.it/1000x400?text=Img" alt="placeholder" />
  <figcaption>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
      neque, id pulvinar odio lorem non turpis.</p>
  </figcaption>
  <a href="" title="Vis større" class="toggle"></a>
</figure>