Hopp til hovedinnhold
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&aring;r:</span> 22. november 2018 14.12 &ndash; 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>