Artikkelliste Liste med artikler til bruk nederst i artikler og andre steder hvor man har bruk for å liste opp relaterte artikler

Liste med artikler til bruk nederst i artikler og andre steder hvor man har bruk for å liste opp relaterte artikler

Artikkelliste

Artikkelliste inneholder inngangsveier til artikler i 3 størrelser og 2 varianter: med og uten bilde

2/3 av breden

<ul class="article-list grid">
    <li class="span-two-thirds">
        <a href="#">
            <img
                src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
            <h3>Er du en stolt barnehagelærer</h3>
            <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
        </a>
    </li>
</ul>

1/2 av breden

<ul class="article-list grid">
    <li class="span-half">
        <a href="#">
            <img
                src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
            <h3>Er du en stolt barnehagelærer</h3>
            <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
        </a>
    </li>
</ul>

1/3 av breden

<ul class="article-list grid">
    <li class="span-third">
        <a href="#">
            <img
                src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
            <h3>Ingeniører til kommunen</h3>
            <p>Kommunene er konkurransedyktig på lønn for nyutdannede ingeniører. Vi er nesten best i klassen.</p>
        </a>
    </li>
    <li class="span-third">
            <a href="#">
                <img
                    src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
                <h3>Ingeniører til kommunen</h3>
                <p>Kommunene er konkurransedyktig på lønn for nyutdannede ingeniører. Vi er nesten best i klassen.</p>
            </a>
        </li>
        <li class="span-third">
                <a href="#">
                    <img
                        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
                    <h3>Ingeniører til kommunen</h3>
                    <p>Kommunene er konkurransedyktig på lønn for nyutdannede ingeniører. Vi er nesten best i klassen.</p>
                </a>
            </li>
</ul>

Artikel inngangsvei uten bilde forekommer i tillegg i 3 farger

<ul class="article-list grid">
    <li class="span-third">
        <a class="article-teaser--highlighted yellow" href="#">
            <blockquote>Her kan du se hvilke partier som stiller til valg i høst i Lillestrøm kommune, og hvilke personer som
                står på listene til de enkelte partiene.</blockquote>
            <cite class="article-list__author">Anders Andersen</cite>

            <span class="read-more-link">Les mer
                <svg width="19" height="17" xmlns="http://www.w3.org/2000/svg">
                    <g stroke="#233464" stroke-width="1.5" fill="none" fill-rule="evenodd">
                        <path d="M.563 8.5h16.875M9.563 16.614L17.436 8.5 9.563.386" />
                    </g>
                </svg>
            </span>
        </a>
    </li>
    <li class="span-third">
        <a class="article-teaser--highlighted pink" href="#">
            <blockquote>Her kan du se hvilke partier som stiller til valg i høst i Lillestrøm kommune, og hvilke personer som
                står på listene til de enkelte partiene.</blockquote>
            <cite class="article-list__author">Anders Andersen</span>
            <span class="read-more-link">Les mer
                <svg width="19" height="17" xmlns="http://www.w3.org/2000/svg">
                    <g stroke="#233464" stroke-width="1.5" fill="none" fill-rule="evenodd">
                        <path d="M.563 8.5h16.875M9.563 16.614L17.436 8.5 9.563.386" />
                    </g>
                </svg>
            </span>
        </a>
    </li>
    <li class="span-third">
        <a class="article-teaser--highlighted green" href="#">
            <blockquote>Her kan du se hvilke partier som stiller til valg i høst i Lillestrøm kommune, og hvilke personer som
                står på listene til de enkelte partiene.</blockquote>
            <span class="read-more-link">Les mer
                <svg width="19" height="17" xmlns="http://www.w3.org/2000/svg">
                    <g stroke="#233464" stroke-width="1.5" fill="none" fill-rule="evenodd">
                        <path d="M.563 8.5h16.875M9.563 16.614L17.436 8.5 9.563.386" />
                    </g>
                </svg>
            </span>
        </a>
    </li>
</ul>

Alle de variasjoner kan settes sammen i Artikkelliste

<ul class="article-list grid">
  <li class="span-half">
    <a href="#" class="article-teaser--highlighted yellow">
      <blockquote>40 parkeringsplasser forvandles til et lekent byrom for opphold og aktivitet.
        Vi vil fremme egenorganisert lek og aktivitet for barn og unge.
      </blockquote>
      <span class="read-more-link">Les mer
        <svg width="19" height="17" xmlns="http://www.w3.org/2000/svg">
          <g stroke="#233464" stroke-width="1.5" fill="none" fill-rule="evenodd">
            <path d="M.563 8.5h16.875M9.563 16.614L17.436 8.5 9.563.386" />
          </g>
        </svg>
      </span>
    </a>
  </li>
  <li class="span-half">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Nå blir det flere lærere i Lillestrøm skolen</h3>
      <p>Jeg lærer mye ved hjelp av godt samspill mellom nye og erfarne på jobben. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet.
      </p>
    </a>
  </li>
  <li class="span-half">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Verdig eldreomsorg koster penger og krever nok folk - hele tiden</h3>
      <p>Jeg lærer mye ved hjelp av godt samspill mellom nye og erfarne på jobben. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet.
      </p>
    </a>
  </li>
  <li class="span-half">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Er du en stolt barnehagelærer</h3>
      <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
    </a>
  </li>
  <li class="span-third">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Ingeniører til kommunen</h3>
      <p>Kommunene er konkurransedyktig på lønn for nyutdannede ingeniører. Vi er nesten best i klassen.</p>
    </a>
  </li>
  <li class="span-third">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Er du en stolt barnehagelærer</h3>
      <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
    </a>
  </li>
  <li class="span-third">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Ingeniører til kommunen</h3>
      <p>Kommunene er konkurransedyktig på lønn for nyutdannede ingeniører. Vi er nesten best i klassen.</p>
    </a>
  </li>
  <li class="span-two-thirds">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Nå blir det flere lærere i Lillestrøm skolen</h3>
      <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
    </a>
  </li>
  <li class="span-third">
    <a class="article-teaser--highlighted green" href="#">
      <blockquote>Her kan du se hvilke partier som stiller til valg i høst i Lillestrøm kommune, og hvilke personer som står på
        listene til de enkelte partiene.</blockquote>
      <cite class="article-list__author">Anders Andersen</cite>
      <span class="read-more-link">Les mer
        <svg width="19" height="17" xmlns="http://www.w3.org/2000/svg">
          <g stroke="#233464" stroke-width="1.5" fill="none" fill-rule="evenodd">
            <path d="M.563 8.5h16.875M9.563 16.614L17.436 8.5 9.563.386" />
          </g>
        </svg>
      </span>
    </a>
  </li>
  <li class="span-third">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Er du en stolt barnehagelærer</h3>
      <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
    </a>
  </li>
  <li class="span-two-thirds">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Er du en stolt barnehagelærer</h3>
      <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
    </a>
  </li>
  <li class="span-third">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Er du en stolt barnehagelærer</h3>
      <p>Hvorfor skal du bli barnehagelærer, du som er så skoleflink?</p>
    </a>
  </li>
  <li class="span-third">
    <a href="#">
      <img
        src="https://images.ctfassets.net/poqt30la0zs4/6N25RkVgGcoqa2WEA0SOKO/8639b0e352e3354b61e57e4669f2f3a4/nk-ny-cover.jpg" />
      <h3>Ingeniører til kommunen</h3>
      <p>Kommunene er konkurransedyktig på lønn for nyutdannede ingeniører. Vi er nesten best i klassen.</p>
    </a>
  </li>
  <li class="span-third">
    <a class="article-teaser--highlighted pink" href="#">
      <blockquote>
        Her kan du se hvilke partier som stiller til valg i høst i Lillestrøm kommune, og hvilke personer som står på
        listene til de enkelte partiene.
      </blockquote>
      <cite class="article-list__author">
        Anders Andersen
      </cite>
      <span class="read-more-link">Les mer
        <svg width="19" height="17" xmlns="http://www.w3.org/2000/svg">
          <g stroke="#233464" stroke-width="1.5" fill="none" fill-rule="evenodd">
            <path d="M.563 8.5h16.875M9.563 16.614L17.436 8.5 9.563.386" />
          </g>
        </svg>
      </span>
    </a>
  </li>
</ul>