Kort Kort til bruk for presentasjon av gruppert informasjon på en side, både som innhold og navigasjonselementer.

Kort til bruk for presentasjon av gruppert informasjon på en side, både som innhold og navigasjonselementer.

Ulike stiler for kort

Kort har en rekke ulike uttrykk som rammer, skygger og bakgrunnsfarger. Disse kan kombineres slik at vi får det uttrykket vi trenger, og kortene kan også plasseres rett i gridsystemet slik at de får riktige størrelser og layout.

Lillestrømninger

Velkommen til 17.maifeiring!

Lorem ipsum dolor sit amet consectetur adipisicing elit. laudantium

05.03.2019
Eksempelbilde

Kort med heldekkende bilde og innhold

Her er et eksempel på et kort med heldekkende bilde og innhold med padding. Dette kan brukes til å lage mer komplisert layout inni kort.

05.03.2019

For fortsatte med barn med atuismespekter-forstyrrelser

05.03.2019

For fortsatte med barn med atuismespekter-forstyrrelser

05.03.2019

Velkommen til 17.maifeiring!

Lorem ipsum dolor sit amet consectetur adipisicing elit. laudantium

05.03.2019

Facebook

Lorem ipsum dolor sit amet consectetur adipisicing elit. laudantium

05.03.2019 Eksempelbilde
Gå til Lillestrøm 

<div class="grid row row--light-green padding-x--base padding-y--large" >
  <div class="span-third grid">
    <h2 class="span-whole section-title">Lillestrømninger</h2>
    <div class="span-whole card card--padded">
      <h2 class="subtitle card--title"><a href="#">Velkommen til 17.maifeiring!</a></h2>
      <p class="card--main">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        laudantium
      </p>
      <span class="card--caption">05.03.2019</span>
    </div>

    <div class="span-whole card">
      <img
        src="//images.ctfassets.net/poqt30la0zs4/1PB6r6kSnGCEIiawkWsEAq/549e864256c8fb586538b4eab2efd4f1/tidslinje_1.jpeg?w=1280"
        alt="Eksempelbilde" class="card--image">
      <div class="card--padded">
        <h2 class="subtitle card--title"><a href="#">Kort med heldekkende bilde og innhold</a></h2>
        <p>
          Her er et eksempel på et kort med heldekkende bilde og innhold med padding. Dette kan brukes til å lage mer
          komplisert layout inni kort.
        </p>
        <span class="card--caption">05.03.2019</span>
      </div>
    </div>
  </div>

  <div class="span-third">
    <h2 aria-hidden="true" class="section-title card--hidden-title">&nbsp;</h2>
    <div class="card card--padded">
      <h2 class="subtitle card--title"><a href="#">For fortsatte med barn med atuismespekter-forstyrrelser</a></h2>
      <span class="card--caption">05.03.2019</span>
    </div>
    <div class="card card--padded">
      <h2 class="subtitle card--title"><a href="#">For fortsatte med barn med atuismespekter-forstyrrelser</a></h2>
      <span class="card--caption">05.03.2019</span>
    </div>
    <div class="card card--padded">
      <h2 class="subtitle card--title"><a href="#">Velkommen til 17.maifeiring!</a></h2>
      <p class="card--main">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        laudantium
      </p>
      <span class="card--caption">05.03.2019</span>
    </div>
  </div>
  <div class="span-third">
    <h2 class="section-title">Facebook</h2>
    <a href="#" class="card--link">
      <div class="card card--padded">
        <span class="card--link--facebook margin-y--medium">Lillestrom kommune <br> Facebook </span>
        <p class="card--main">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          laudantium
        </p>
        <span class="card--caption">05.03.2019</span>
        <img
          src="//images.ctfassets.net/poqt30la0zs4/1PB6r6kSnGCEIiawkWsEAq/549e864256c8fb586538b4eab2efd4f1/tidslinje_1.jpeg?w=1280"
          alt="Eksempelbilde" class="card--image margin-top--small">

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

  <div class="span-whole">
      <lk-button-link
      url="/"
      variant="ghost-border"
      icon-after="/assets/images/icon-navigation-arrow-right.svg"
      size="medium">
      Gå til Lillestrøm
  </lk-button-link>
  </div>
</div>

Navigasjonskort

Navigasjonskort skal brukes til transportsider og lignende, i tilfeller der vi trenger en detaljert utlisting av navigasjonspunktene.

Et navigasjonskort

Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.

Et navigasjonskort

Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.

Et navigasjonskort

Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.

Et navigasjonskort

Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.

Et navigasjonskort

Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.

Et navigasjonskort

Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.

Et navigasjonskort uten body

Et navigasjonskort uten body

Et navigasjonskort uten body. Dette kan bruke på...

Et navigasjonskort uten body

Et navigasjonskort uten body

Et navigasjonskort uten body. Dette kan bruke på... 

<div class="grid grid--no-row-gap">
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title"><a href="#">Et navigasjonskort</a></h2>
    <div class="card--navigation__content">
      <p>
        Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.
      </p>
    </div>
  </div>
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title"><a href="#">Et navigasjonskort</a></h2>
    <div class="card--navigation__content">
      <p>
        Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.
      </p>
    </div>
  </div>
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title"><a href="#">Et navigasjonskort</a></h2>
    <div class="card--navigation__content">
      <p>
        Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.
      </p>
    </div>
  </div>
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title"><a href="#">Et navigasjonskort</a></h2>
    <div class="card--navigation__content">
      <p>
        Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.
      </p>
    </div>
  </div>
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title"><a href="#">Et navigasjonskort</a></h2>
    <div class="card--navigation__content">
      <p>
        Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.
      </p>
    </div>
  </div>
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title"><a href="#">Et navigasjonskort</a></h2>
    <div class="card--navigation__content">
      <p>
        Et kort som brukes til transportsider og uthevet navigasjon på forside. Brukes sammen med et grid.
      </p>
    </div>
  </div>
  <div class="span-third card card--navigation">
    <h3 class="subtitle card--navigation__title card--navigation__title__small">
      <a href="#">Et navigasjonskort uten body</a>
    </h3>
  </div>
  <div class="span-third card card--navigation">
    <h3 class="subtitle card--navigation__title card--navigation__title__small">
      <a href="#">Et navigasjonskort uten body</a>
    </h3>
  </div>
  <div class="span-third card card--navigation">
    <h2 class="subtitle card--navigation__title card--navigation__title__small">
      <a href="#">Et navigasjonskort uten body. Dette kan bruke på...</a>
     </h2>
  </div>
  <div class="span-third card card--navigation">
    <h3 class="subtitle card--navigation__title card--navigation__title__small">
      <a href="#">Et navigasjonskort uten body</a>
    </h3>
  </div>
  <div class="span-third card card--navigation">
    <h3 class="subtitle card--navigation__title card--navigation__title__small">
      <a href="#">Et navigasjonskort uten body</a>
    </h3>
  </div>
  <div class="span-third card card--navigation">
    <h3 class="subtitle card--navigation__title card--navigation__title__small">
      <a href="#">Et navigasjonskort uten body. Dette kan bruke på...</a>
    </h3>
  </div>

</div>