DDS Design System

Levende reference for alle genbrugelige komponenter. Hver sektion viser komponenten live og HTML-snippet nedenunder. Klasserne er loadet globalt på sitet, så de virker på en hvilken som helst side.

Design tokens

Alle tokens er defineret som CSS custom properties i :root og kan genbruges i egen CSS via var(--dds-...).

Farver

--dds-color-primary#1173D4

--dds-color-primary-light#6BADE2

--dds-color-primary-dark#0F5FB0

--dds-color-text#1F262E

--dds-color-muted#70808F

--dds-color-border#DAE0E7

--dds-color-bg#FFFFFF

--dds-color-bg-subtle#F5F7FA

--dds-info-icon#1173D4

--dds-warn-icon#CA8A04

--dds-success-icon#16A34A

--dds-danger-icon#E06C6C

Spacing

--dds-space-14px

--dds-space-28px

--dds-space-312px

--dds-space-416px

--dds-space-524px

--dds-space-632px

--dds-space-748px

--dds-space-864px

Typografi

Raleway på hele sitet. Brug klasserne under — ikke <h1>-tags direkte, så undgår vi konflikter med Elementor.

Over-overskrift (H1)

<h1 class="dds-h1">Over-overskrift (H1)</h1>

Sektionsoverskrift (H2)

<h2 class="dds-h2">Sektionsoverskrift (H2)</h2>

Under-overskrift (H3)

<h3 class="dds-h3">Under-overskrift (H3)</h3>

Mindre overskrift (H4)

<h4 class="dds-h4">Mindre overskrift (H4)</h4>

Lead paragraph — bruges som introduktionstekst under en H1 eller H2. Lidt større end brødtekst, lettere farve.

<p class="dds-lead">Lead paragraph — bruges som introduktionstekst under en H1 eller H2. Lidt større end brødtekst, lettere farve.</p>

Brødtekst — standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et link ser sådan her ud. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="dds-body">Brødtekst — standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" class="dds-link">Et link</a> ser sådan her ud. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Small / fine print — 13px grålig tekst til hjælpetekst, datoer osv.

<span class="dds-small">Small / fine print — 13px grålig tekst til hjælpetekst, datoer osv.</span>

Uppercase label

<span class="dds-label">Uppercase label</span>

Et citat eller fremhævet tekststykke. Bruges til anbefalinger, vigtige pointer eller kundeudsagn.— Forfatter, Kilde

<blockquote class="dds-blockquote">Et citat eller fremhævet tekststykke. Bruges til anbefalinger, vigtige pointer eller kundeudsagn.<cite>— Forfatter, Kilde</cite></blockquote>

Knapper

Fire varianter × tre størrelser. Brug <a> eller <button> — klasserne virker på begge.

Varianter

Tilmeld Læs mere Annullér Se alle kurser →

<a href="#" class="dds-btn dds-btn--primary">Tilmeld <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
<a href="#" class="dds-btn dds-btn--outline">Læs mere</a>
<a href="#" class="dds-btn dds-btn--ghost">Annullér</a>
<a href="#" class="dds-btn dds-btn--link">Se alle kurser →</a>

Størrelser

Small Medium Large

<a href="#" class="dds-btn dds-btn--primary dds-btn--sm">Small</a>
<a href="#" class="dds-btn dds-btn--primary">Medium</a>
<a href="#" class="dds-btn dds-btn--primary dds-btn--lg">Large</a>

Badges

Små pills til at markere niveau, status eller kategori.

Level 1 Level 2 Level 3 Neutral Solid

<span class="dds-badge dds-badge--level-1">Level 1</span>
<span class="dds-badge dds-badge--level-2">Level 2</span>
<span class="dds-badge dds-badge--level-3">Level 3</span>
<span class="dds-badge">Neutral</span>
<span class="dds-badge dds-badge--solid">Solid</span>

Kort

Generisk hvidt kort med border og blød skygge. Bruges som container til indhold.

Titel på kortet

Brødtekst inde i kortet. Kan indeholde alt — lister, callouts, knapper osv.

Handling

<div class="dds-card">
    <h3 class="dds-h3">Titel på kortet</h3>
    <p class="dds-body">Brødtekst inde i kortet. Kan indeholde alt — lister, callouts, knapper osv.</p>
    <a href="#" class="dds-btn dds-btn--primary">Handling</a>
</div>

Callout-bokse

Til at fremhæve vigtig information. Fire varianter for forskellige typer budskaber.

Info (blå)

God at vide

Kurset henvender sig til alle med interesse for skiteknik og undervisning. Ingen forhåndskendskab påkrævet.

<div class="dds-callout dds-callout--info">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <div class="dds-callout-body">
        <p class="dds-callout-title">God at vide</p>
        <p>Kurset henvender sig til alle med interesse for skiteknik og undervisning. Ingen forhåndskendskab påkrævet.</p>
    </div>
</div>

Advarsel (gul)

Vigtig Information

Deltagere skal medbringe eget udstyr. Kurset gennemføres uanset vejrforhold.

<div class="dds-callout dds-callout--warn">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
    <div class="dds-callout-body">
        <p class="dds-callout-title">Vigtig Information</p>
        <p>Deltagere skal medbringe eget udstyr. Kurset gennemføres uanset vejrforhold.</p>
    </div>
</div>

Succes (grøn)

Tilmelding bekræftet

Du modtager en mail med yderligere information inden for 24 timer.

<div class="dds-callout dds-callout--success">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
    <div class="dds-callout-body">
        <p class="dds-callout-title">Tilmelding bekræftet</p>
        <p>Du modtager en mail med yderligere information inden for 24 timer.</p>
    </div>
</div>

Fare (rød)

Kurset er aflyst

På grund af manglende tilmeldinger er kurset aflyst. Du får dine penge retur automatisk.

<div class="dds-callout dds-callout--danger">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    <div class="dds-callout-body">
        <p class="dds-callout-title">Kurset er aflyst</p>
        <p>På grund af manglende tilmeldinger er kurset aflyst. Du får dine penge retur automatisk.</p>
    </div>
</div>

Lister

Standard bullet/numre, checkmark-liste og ikon-liste.

Bullet-liste

Første punkt
Andet punkt
Tredje punkt

<ul class="dds-list">
    <li>Første punkt</li>
    <li>Andet punkt</li>
    <li>Tredje punkt</li>
</ul>

Nummereret liste

Første trin
Andet trin
Tredje trin

<ol class="dds-list">
    <li>Første trin</li>
    <li>Andet trin</li>
    <li>Tredje trin</li>
</ol>

Checkmark-liste

Teoretisk undervisning i undervisningsmetodik
Praktisk træning på pisten med feedback
Individuel evaluering og certifikat

<ul class="dds-list dds-list--check">
    <li>Teoretisk undervisning i undervisningsmetodik</li>
    <li>Praktisk træning på pisten med feedback</li>
    <li>Individuel evaluering og certifikat</li>
</ul>

Ikon-liste

5 dages intensivt kursus med daglig træning
Maksimalt 8 deltagere pr. hold
Omfattende undervisningsmateriale inkluderet

<ul class="dds-list dds-list--icon">
    <li><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg><span>5 dages intensivt kursus med daglig træning</span></li>
    <li><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><span>Maksimalt 8 deltagere pr. hold</span></li>
    <li><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg><span>Omfattende undervisningsmateriale inkluderet</span></li>
</ul>

Section-label

Uppercase label med ikon og horisontal streg. Bruges som overskrift på indholdssektioner.

Kursusbeskrivelse

<div class="dds-section-label"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> Kursusbeskrivelse</div>

Vigtig Information

<div class="dds-section-label"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg> Vigtig Information</div>

Hero

To varianter — mørk (med billede og overlay) og lys (til tekstsider uden billede).

Hero mørk

Skiinstruktør 5 dage

Titel på siden

En kort beskrivelse eller tagline der introducerer sidens emne på maks to linjer.

<div class="dds-hero">
    <div class="dds-hero-bg" style="background-image:url(https://images.unsplash.com/photo-1551524559-8af4e6624178?auto=format&fit=crop&w=1600&q=70)"></div>
    <div class="dds-hero-inner">
        <div class="dds-hero-badges">
            <span class="dds-badge">Skiinstruktør</span>
            <span class="dds-badge">5 dage</span>
        </div>
        <h1>Titel på siden</h1>
        <p class="dds-hero-desc">En kort beskrivelse eller tagline der introducerer sidens emne på maks to linjer.</p>
    </div>
</div>

Hero lys (tekstside)

Vores historie

En kort indledning der forklarer hvad siden handler om, på to til tre linjer.

<div class="dds-hero-light">
    <div class="dds-hero-light-inner">
        <nav class="dds-breadcrumbs">
            <a href="#">Forside</a><span class="sep">›</span>
            <a href="#">Om os</a><span class="sep">›</span>
            <span>Historie</span>
        </nav>
        <h1>Vores historie</h1>
        <p class="dds-lead">En kort indledning der forklarer hvad siden handler om, på to til tre linjer.</p>
    </div>
</div>

Quick facts-bar

Horisontal stribe med ikon + nøgleinformation. Typisk lige under en hero.

Varighed: 5 dage

Sted: Hintertux

Maks: 8 deltagere

Pris: 11.995 kr.

<div class="dds-quickfacts">
    <div class="dds-quickfacts-inner">
        <div class="dds-qf-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg> <span>Varighed: <strong>5 dage</strong></span></div>
        <div class="dds-qf-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg> <span>Sted: <strong>Hintertux</strong></span></div>
        <div class="dds-qf-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> <span>Maks: <strong>8 deltagere</strong></span></div>
        <div class="dds-qf-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg> <span>Pris: <strong>11.995 kr.</strong></span></div>
    </div>
</div>

Kursuskort-grid

Responsivt grid med kursuskort. Bruges på oversigtssider.

10. – 19. oktober 2026

Level 1

Uge 42 Hintertux 11.995 kr.

Læs mere Tilmeld

15. – 21. marts 2027

Security

Uge 12 Hintertux 10.995 kr.

Læs mere Tilmeld

<div class="dds-course-grid">
    <article class="dds-course-card">
        <div class="dds-course-card-img"><img src="https://images.unsplash.com/photo-1551698618-1dfe5d97d256?auto=format&fit=crop&w=800&q=70" alt=""></div>
        <div class="dds-course-card-body">
            <div class="dds-course-card-date"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg> 10. – 19. oktober 2026</div>
            <h3 class="dds-course-card-title">Level 1</h3>
            <div class="dds-course-card-meta">
                <span class="dds-course-card-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Uge 42</span>
                <span class="dds-course-card-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg> Hintertux</span>
                <span class="dds-course-card-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg> 11.995 kr.</span>
            </div>
            <div class="dds-course-card-actions">
                <a href="#" class="dds-btn dds-btn--outline dds-btn--sm">Læs mere</a>
                <a href="#" class="dds-btn dds-btn--primary dds-btn--sm">Tilmeld <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
            </div>
        </div>
    </article>
    <article class="dds-course-card">
        <div class="dds-course-card-img"><img src="https://images.unsplash.com/photo-1522056615691-da7b8106c665?auto=format&fit=crop&w=800&q=70" alt=""></div>
        <div class="dds-course-card-body">
            <div class="dds-course-card-date"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg> 15. – 21. marts 2027</div>
            <h3 class="dds-course-card-title">Security</h3>
            <div class="dds-course-card-meta">
                <span class="dds-course-card-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Uge 12</span>
                <span class="dds-course-card-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg> Hintertux</span>
                <span class="dds-course-card-meta-item"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg> 10.995 kr.</span>
            </div>
            <div class="dds-course-card-actions">
                <a href="#" class="dds-btn dds-btn--outline dds-btn--sm">Læs mere</a>
                <a href="#" class="dds-btn dds-btn--primary dds-btn--sm">Tilmeld <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
            </div>
        </div>
    </article>
</div>

Accordion / FAQ

Native <details>-element — ingen JavaScript krævet. Fungerer også på mobil.

Hvad er inkluderet i prisen?

Skiundervisning, undervisningsmateriale og certifikat. Rejse, forsikring og måltider er ikke inkluderet.

Hvilket niveau skal jeg være på?

Du skal kunne stå sikkert på ski på blå og røde pister. Se detaljeret niveaubeskrivelse på forsiden.

Kan jeg få pengene tilbage hvis jeg afmelder?

Afmelding før 30 dage: fuld refundering. Derefter fratrækkes administrationsgebyr. Se vilkår for detaljer.

<div class="dds-accordion">
    <details open>
        <summary>Hvad er inkluderet i prisen?</summary>
        <div class="dds-accordion-body">Skiundervisning, undervisningsmateriale og certifikat. Rejse, forsikring og måltider er ikke inkluderet.</div>
    </details>
    <details>
        <summary>Hvilket niveau skal jeg være på?</summary>
        <div class="dds-accordion-body">Du skal kunne stå sikkert på ski på blå og røde pister. Se detaljeret niveaubeskrivelse på forsiden.</div>
    </details>
    <details>
        <summary>Kan jeg få pengene tilbage hvis jeg afmelder?</summary>
        <div class="dds-accordion-body">Afmelding før 30 dage: fuld refundering. Derefter fratrækkes administrationsgebyr. Se vilkår for detaljer.</div>
    </details>
</div>

Person-kort

Bruges til bestyrelse, teknisk komité og kontoret. Grid med auto-fill.

Rasmus Lundby

Formand

Cand.mag. i historie samt politik og administration, og er desuden uddanner i DDS. Har medvirket til at skabe Den Danske Skiskole og er forfatter til den Alpine Manual.

rl@katedralskolen.dk

Genvalgt i 2025 for en 2-årig periode

Troels Colerick

Bestyrelsesmedlem

Arbejder til daglig som lærer og leder af skilinjen på Sportsefterskolen Sjælsølund. Aktiv i Skiklubben Hareskov og uddanner i DDS.

troels@colerick.dk

Valgt i 2024 for en 2-årig periode

<div class="dds-person-grid">
    <div class="dds-person-card">
        <div class="dds-person-card-header">
            <div class="dds-person-card-avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
            <div class="dds-person-card-title">
                <h3 class="dds-person-card-name">Rasmus Lundby</h3>
                <div class="dds-person-card-role">Formand</div>
            </div>
        </div>
        <p class="dds-person-card-bio">Cand.mag. i historie samt politik og administration, og er desuden uddanner i DDS. Har medvirket til at skabe Den Danske Skiskole og er forfatter til den Alpine Manual.</p>
        <a href="mailto:rl@katedralskolen.dk" class="dds-person-card-contact"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> rl@katedralskolen.dk</a>
        <div class="dds-person-card-meta">Genvalgt i 2025 for en 2-årig periode</div>
    </div>
    <div class="dds-person-card">
        <div class="dds-person-card-header">
            <div class="dds-person-card-avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
            <div class="dds-person-card-title">
                <h3 class="dds-person-card-name">Troels Colerick</h3>
                <div class="dds-person-card-role">Bestyrelsesmedlem</div>
            </div>
        </div>
        <p class="dds-person-card-bio">Arbejder til daglig som lærer og leder af skilinjen på Sportsefterskolen Sjælsølund. Aktiv i Skiklubben Hareskov og uddanner i DDS.</p>
        <a href="mailto:troels@colerick.dk" class="dds-person-card-contact"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> troels@colerick.dk</a>
        <div class="dds-person-card-meta">Valgt i 2024 for en 2-årig periode</div>
    </div>
</div>

CTA-blok

Stor opfordring med gradient baggrund. Bruges som afslutning på sider.

Klar til at tage det næste skridt?

Se alle vores kommende kurser og find det der passer til dig.

Se alle kurser

<div class="dds-cta">
    <h2 class="dds-h2">Klar til at tage det næste skridt?</h2>
    <p>Se alle vores kommende kurser og find det der passer til dig.</p>
    <a href="#" class="dds-btn dds-btn--primary dds-btn--lg">Se alle kurser <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></a>
</div>

Tabel

Simpel, stylet tabel — header med grå baggrund, hover på rækker.

Niveau	Varighed	Pris	Næste kursus
Level 1	5 dage	11.995 kr.	Okt 2026
Level 2	5 dage	12.995 kr.	Mar 2027
Level 3	7 dage	14.995 kr.	Apr 2027

<table class="dds-table">
    <thead>
        <tr><th>Niveau</th><th>Varighed</th><th>Pris</th><th>Næste kursus</th></tr>
    </thead>
    <tbody>
        <tr><td>Level 1</td><td>5 dage</td><td>11.995 kr.</td><td>Okt 2026</td></tr>
        <tr><td>Level 2</td><td>5 dage</td><td>12.995 kr.</td><td>Mar 2027</td></tr>
        <tr><td>Level 3</td><td>7 dage</td><td>14.995 kr.</td><td>Apr 2027</td></tr>
    </tbody>
</table>

Formularer

Standard-inputs. Kombinér med .dds-field for label + help-text-struktur.

Tekst-input med label og hjælpetekst

Navn

Skal matche dit pas hvis du skal rejse.

<div class="dds-field">
    <label class="dds-field-label" for="demo-name">Navn</label>
    <input type="text" id="demo-name" class="dds-input" placeholder="Fulde navn">
    <div class="dds-field-help">Skal matche dit pas hvis du skal rejse.</div>
</div>

Dropdown

Niveau

<div class="dds-field">
    <label class="dds-field-label" for="demo-level">Niveau</label>
    <select id="demo-level" class="dds-select">
        <option>Level 1</option>
        <option>Level 2</option>
        <option>Level 3</option>
    </select>
</div>

Textarea

Besked

<div class="dds-field">
    <label class="dds-field-label" for="demo-msg">Besked</label>
    <textarea id="demo-msg" class="dds-textarea" placeholder="Skriv din besked her..."></textarea>
</div>

Checkbox

Jeg accepterer vilkår og betingelser

<label class="dds-check">
    <input type="checkbox"> Jeg accepterer vilkår og betingelser
</label>

Billeder

Figure med caption og responsivt galleri.

Figure med caption

Billedtekst der beskriver hvad billedet viser.

<figure class="dds-figure">
    <img src="https://images.unsplash.com/photo-1551698618-1dfe5d97d256?auto=format&fit=crop&w=800&q=70" alt="">
    <figcaption>Billedtekst der beskriver hvad billedet viser.</figcaption>
</figure>

Billed-grid (4/3)

<div class="dds-image-grid">
    <img src="https://images.unsplash.com/photo-1551698618-1dfe5d97d256?auto=format&fit=crop&w=800&q=70" alt="">
    <img src="https://images.unsplash.com/photo-1522056615691-da7b8106c665?auto=format&fit=crop&w=800&q=70" alt="">
    <img src="https://images.unsplash.com/photo-1508614589041-895b88991e3e?auto=format&fit=crop&w=800&q=70" alt="">
    <img src="https://images.unsplash.com/photo-1551524559-8af4e6624178?auto=format&fit=crop&w=1600&q=70" alt="">
</div>

Dividers

Horisontal streg, med eller uden label.

<hr class="dds-divider">

eller

<div class="dds-divider-label">eller</div>