Card
Cards are used as entry points to more information about a matter. E.g. as an entry point to a news article in a news list.
Cards contain a link, text and optionally an image.
Standard
<a href="/nyheter-og-presse/nyheter/2018/07/06/bildeblokktest/" class="card link--no-underline">
<h2 class="card__headline">Overskrift</h2>
<div id="metadata-a9622dd6-c0d9-41fb-9251-b7c0aa2e818c">
<ul class="card__metadata metadata metadata--subtle metadata--condensed list--reset-style">
<li class="metadata__item">
<span class="metadata__item-label">Publisert</span>
<span class="metadata__item-text">01.01.18</span>
</li>
<li class="metadata__item">
<span class="metadata__item-label">Avsender:</span>
<span class="metadata__item-text">Oslo politidistrikt</span>
</li>
<li class="metadata__item">
<span class="metadata__item-text">Nyhet</span>
</li>
</ul>
</div>
<p class="card__paragraph">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.</p>
</a>Extraordinary
<a href="#" class="card card--extraordinary link--no-underline">
<h2 class="card__headline">Overskrift</h2>
<ul class="card__metadata metadata metadata--subtle metadata--condensed list--reset-style">
<li class="metadata__item">
<span class="metadata__item-label">Publisert</span> <span class="metadata__item-text">01.01.18</span>
</li>
<li class="metadata__item">
<span class="metadata__item-label">Avsender:</span> <span class="metadata__item-text">Oslo politidistrikt</span>
</li>
<li class="metadata__item">
<span class="metadata__item-text">Nyhet</span>
</li>
</ul>
<p class="card__paragraph">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl.</p>
</a>Event
<a href="#" class="card card--event link--no-underline">
<h2 class="card__headline">Dette eventet har en lang tittel</h2>
<ul class="card__metadata metadata metadata--subtle metadata--condensed list--reset-style"></ul>
<ul class="card__event-list">
<li class="card__event-list-item"><span class="weight--medium">Når:</span> 22. november 2018 14.12 – 15.12</li>
<li class="card__event-list-item"><span class="weight--medium">Hvor:</span> Adresse til event</li>
<li class="card__event-list-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a vehicula urna. Ut egestas erat non mauris pretium, eu maximus libero pretium.</li>
</ul>
<div class="card__event-date">
<span class="card__event-day">22</span>
<span class="card__event-month">nov</span>
</div>
</a>Image
<a href="#" class="card link--no-underline">
<figure class="card__figure">
<img src="image.url"
alt="Alternative tekst"
class="card__image"
sizes="(min-width: 640px) 50vw, (min-width: 1200px) 33vw, 100vw"
srcset="/globalassets/field-clouds-sky-earth-46160.jpg?w=360 360w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=480 480w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=640 640w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=720 720w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=768 768w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=960 960w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=1024 1024w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=1280 1280w,
/globalassets/field-clouds-sky-earth-46160.jpg?w=1440 1440w">
</figure>
<h2 class="card__headline">Greatest paginerings nytt</h2>
<ul class="card__metadata metadata metadata--subtle metadata--condensed list--reset-style">
<li class="metadata__item">
<span class="metadata__item-label">Publisert</span>
<span class="metadata__item-text">01.01.18</span>
</li>
<li class="metadata__item">
<span class="metadata__item-label">Avsender:</span>
<span class="metadata__item-text">Oslo politidistrikt</span>
</li>
<li class="metadata__item">
<span class="metadata__item-text">Nyhet</span>
</li>
</ul>
<p class="card__paragraph">Grog chase hands grog blossom transom fire in the hole nipper fluke barque run a...</p>
</a>Video
<a href="#" class="card link--no-underline">
<figure class="card__figure card__figure--video">
<img src="https://dummyimage.com/1200x16:9/ddd/fff" alt="Alternativ tekst" class="card__image">
</figure>
<h2 class="card__headline">Overskrift</h2>
<ul class="card__metadata metadata metadata--subtle list--reset-style">
<li class="metadata__item">
<span class="metadata__item-label" aria-label="Spilletid">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="metadata__item-label-icon">
<path fill-rule="evenodd" d="M18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8 8-3.589 8-8m2 0c0 5.523-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0s10 4.477 10 10m-4 1a1 1 0 0 1-1 1h-4a2 2 0 0 1-2-2V5a1 1 0 0 1 2 0v4c0 .55.45 1 1 1h3a1 1 0 0 1 1 1"></path>
</svg>
</span><span class="metadata__item-text">01:02</span>
</li>
</ul>
<p class="card__paragraph">Grog chase hands grog blossom transom fire in the hole nipper fluke barque run a...</p>
</a>Takk!
Du får dessverre ikke svar på tilbakemeldingen din. Har du spørsmål eller trenger du hjelp? Kontakt politiet på telefon, e-post eller ved å møte opp.
Feil
Det har skjedd en feil. Vi har ikke fått tilbakemeldingen din. Prøv igjen.