Sessiekaarten voor kitesurfers
Stats, reacties en shaka's in één kaart, zonder dat de sessie zelf verdwijnt.
Componenten
Gewone HTML met classes uit pdk.css. Werkt in elke stack: een los HTML-bestand, Astro, React of een canvas.
Laden
Eerst de tokens, dan de componenten. Zet class="pdk" op de body voor de basistypografie.
<link rel="stylesheet" href="tokens/tokens.css">
<link rel="stylesheet" href="components/pdk.css">
<body class="pdk">…</body>Knoppen
Altijd een pil. Eén primaire knop per scherm, de rest secundair of ghost.
<button class="pdk-btn pdk-btn--primary">Verstuur voorstel</button>
<button class="pdk-btn pdk-btn--secondary">Plan een gesprek</button>
<button class="pdk-btn pdk-btn--ghost">Annuleren</button>
<button class="pdk-btn pdk-btn--primary" disabled>Bezig</button><button class="pdk-btn pdk-btn--primary">Bekijk werk <svg class="pdk-icon" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button>
<button class="pdk-btn pdk-btn--secondary pdk-btn--sm"><svg class="pdk-icon" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg> Toevoegen</button>Velden
Label boven het veld, helptekst eronder. Een fout toont een framboos rand en icoon, de tekst blijft ink.
Zoals op de factuur moet komen.
<div class="pdk-field">
<label class="pdk-label" for="naam">Naam</label>
<input class="pdk-input" id="naam" placeholder="Voor- en achternaam" />
<span class="pdk-help">Zoals op de factuur moet komen.</span>
</div>
Vul een geldig e-mailadres in
<div class="pdk-field">
<label class="pdk-label" for="mail">E-mailadres</label>
<input class="pdk-input" id="mail" value="pieter@" aria-invalid="true" aria-describedby="mail-err" />
<span class="pdk-error" id="mail-err"><svg class="pdk-icon" width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg> Vul een geldig e-mailadres in</span>
</div>Kaart
Wit vlak, rand van 1px, radius 12. Geen schaduw.
<article class="pdk-card">
<span class="pdk-eyebrow">Case · Mobiele app</span>
<h3 style="margin: 8px 0 4px;">Sessiekaarten voor kitesurfers</h3>
<p class="pdk-muted" style="margin: 0;">Stats, reacties en shaka's in één kaart, zonder dat de sessie zelf verdwijnt.</p>
</article>Badges
Status via een bolletje van 6px, de tekst blijft ink.
Offline
Concept
Live
Archief
Nieuw
<span class="pdk-badge"><span class="pdk-dot pdk-dot--danger"></span>Offline</span>
<span class="pdk-badge"><span class="pdk-dot pdk-dot--warning"></span>Concept</span>
<span class="pdk-badge"><span class="pdk-dot pdk-dot--done"></span>Live</span>
<span class="pdk-badge">Archief</span>
<span class="pdk-badge pdk-badge--inverse">Nieuw</span>Meldingen
Danger en warning krijgen een tint en gekleurd icoon. Succes en info blijven neutraal.
Betaling mislukt. Controleer je kaartgegevens en probeer het opnieuw.
Dit voorstel verloopt over 3 dagen.
Voorstel verstuurd naar de opdrachtgever.
Er is een nieuwe versie van het design system.
<div class="pdk-alert pdk-alert--danger"><svg class="pdk-icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg><span>Betaling mislukt. Controleer je kaartgegevens en probeer het opnieuw.</span></div>
<div class="pdk-alert pdk-alert--warning"><svg class="pdk-icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><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-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><span>Dit voorstel verloopt over 3 dagen.</span></div>
<div class="pdk-alert"><svg class="pdk-icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg><span>Voorstel verstuurd naar de opdrachtgever.</span></div>
<div class="pdk-alert"><svg class="pdk-icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg><span>Er is een nieuwe versie van het design system.</span></div>Tabel
Getallen rechts uitgelijnd met class="num".
| Onderdeel | Uren | Bedrag |
|---|---|---|
| UX-audit | 16 | € 1.600 |
| Navigatie herontwerp | 24 | € 2.400 |
<table class="pdk-table">
<thead><tr><th>Onderdeel</th><th class="num">Uren</th><th class="num">Bedrag</th></tr></thead>
<tbody>
<tr><td>UX-audit</td><td class="num">16</td><td class="num">€ 1.600</td></tr>
<tr><td>Navigatie herontwerp</td><td class="num">24</td><td class="num">€ 2.400</td></tr>
</tbody>
</table>