Designsystem

Card header

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci elitj sed quia nonnumquam eiusmodi tempera iiicidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Navn	Type	Verdi
data-color	string
data-variant	string
data-size	string

Attributt	Tillatte verdier	Default
data-variant	neutral, tinted	neutral
data-size	sm, md, lg
data-color	lk-dark-blue, lk-yellow, lk-orange, lk-green

css-klasser	Beskrivelse
lk-card--horizontal	Setter innholdet ved siden av hverandre
lk-card__block	Settes på barn av lk-card. Setter visuelt skille mellom blokene

Card klassen er ikke lengre i bruk

Ikke bruk class="card". Bruk den nye lk-card.

Eksempler

Card header

Neque porro quisquam est qui dolorem

<div id="test-card2" class="lk-card lk-card--horizontal" style="display:inline-grid; max-width: 600px;">
    <div class="lk-card__block">
        <img
            src="https://www.lillestrom.kommune.no/globalassets/mediaflow/arkitektur--og-byggeskikksprisen-2025.webp" />
    </div>
    <div class="lk-card__block">
        <h2 class="lk-heading">Card header</h2>
        <p>Neque porro quisquam est qui dolorem</p>
    </div>
</div>

Link card

Elementet som lk-card blir satt på kan være en <a>. For å få bedre opplesning på lange tekster legg til <a> lenke inni overskriften
Lenker inni heading blir spesial håndtert.

Card header

Neque porro quisquam est qui dolorem

<h2>Link card</h2>
<p>Elementet som lk-card blir satt på kan være en &lt;a&gt;. For å få bedre opplesning på lange tekster legg til &lt;a&gt; lenke inni overskriften<br>
Lenker inni heading blir spesial håndtert.
</p>
<div class="lk-card" style="max-width: 600px;">
    <div class="lk-card__block">
        <h2 class="lk-heading"><a href="https://lillestrom.kommune.no">Card header</a></h2>
    </div>
    <div class="lk-card__block">
        <p>Neque porro quisquam est qui dolorem</p>
    </div>
</div>

Horizontal card

Card header

Neque porro quisquam est qui dolorem

<h2>Horizontal card</h2>
<div id="test-card2" class="lk-card lk-card--horizontal" style="display:inline-grid; max-width: 600px;">
    <div class="lk-card__block">
        <h2 class="lk-heading">Card header</h2>
    </div>
    <div class="lk-card__block">
        <p>Neque porro quisquam est qui dolorem</p>
    </div>
</div>