|
| 1 | +<small>**Project:** ITK Dev Design System</small> |
| 2 | + |
| 3 | +# Components |
| 4 | + |
| 5 | +All components render correctly inside a `.ds` container. See the live |
| 6 | +gallery below for rendered examples — this page documents the API. |
| 7 | + |
| 8 | +<a href="/research-projects/design-system/v1/playground.html" class="mock-button" target="_blank">Open live playground ↗</a> |
| 9 | + |
| 10 | +## Buttons |
| 11 | + |
| 12 | +```html |
| 13 | +<button class="btn btn-primary">Primary</button> |
| 14 | +<button class="btn btn-secondary">Secondary</button> |
| 15 | +<button class="btn">Default</button> |
| 16 | +<button class="btn btn-ghost">Ghost</button> |
| 17 | +<button class="btn btn-danger">Danger</button> |
| 18 | +<button class="btn btn-accent">Accent (aarhus pink)</button> |
| 19 | +``` |
| 20 | + |
| 21 | +Sizes: add `btn-sm` or `btn-lg`. |
| 22 | + |
| 23 | +Shape: add `btn-pill` for fully rounded corners. Combines with any variant. |
| 24 | + |
| 25 | +```html |
| 26 | +<button class="btn btn-primary btn-pill">Primary pill</button> |
| 27 | +<button class="btn btn-accent btn-pill">Accent pill</button> |
| 28 | +``` |
| 29 | + |
| 30 | +## Badges |
| 31 | + |
| 32 | +```html |
| 33 | +<span class="badge">Default</span> |
| 34 | +<span class="badge badge-primary">Primary</span> |
| 35 | +<span class="badge badge-success">Success</span> |
| 36 | +<span class="badge badge-warning">Warning</span> |
| 37 | +<span class="badge badge-danger">Danger</span> |
| 38 | +<span class="badge badge-info">Info</span> |
| 39 | +``` |
| 40 | + |
| 41 | +## Cards |
| 42 | + |
| 43 | +```html |
| 44 | +<div class="card">Default card</div> |
| 45 | +<div class="card card-bordered">Stronger border</div> |
| 46 | +<div class="card card-elevated">Shadow, no border</div> |
| 47 | + |
| 48 | +<div class="card"> |
| 49 | + <div class="card-header">Title</div> |
| 50 | + <p>Body</p> |
| 51 | + <div class="card-footer"> |
| 52 | + <button class="btn btn-primary btn-sm">Action</button> |
| 53 | + </div> |
| 54 | +</div> |
| 55 | +``` |
| 56 | + |
| 57 | +## Form fields |
| 58 | + |
| 59 | +```html |
| 60 | +<div class="form-field"> |
| 61 | + <label class="form-label" for="name">Name</label> |
| 62 | + <input class="input" id="name" type="text" placeholder="Jane Doe"> |
| 63 | + <span class="form-help">Use your full name.</span> |
| 64 | +</div> |
| 65 | + |
| 66 | +<select class="select">...</select> |
| 67 | +<textarea class="textarea"></textarea> |
| 68 | +``` |
| 69 | + |
| 70 | +Error state: add `style="border-color: var(--ds-color-danger);"` to the |
| 71 | +input, plus a `<span class="form-error">`. |
| 72 | + |
| 73 | +## Tables |
| 74 | + |
| 75 | +```html |
| 76 | +<div class="table-wrap"> |
| 77 | + <table class="table table-zebra table-hover"> |
| 78 | + <thead><tr><th>Project</th><th>Status</th></tr></thead> |
| 79 | + <tbody> |
| 80 | + <tr><td>Climate Nudging</td><td><span class="badge badge-success">Active</span></td></tr> |
| 81 | + </tbody> |
| 82 | + </table> |
| 83 | +</div> |
| 84 | +``` |
| 85 | + |
| 86 | +Modifiers: `table-zebra` alternates row backgrounds; `table-hover` adds |
| 87 | +hover highlighting. |
| 88 | + |
| 89 | +## Modal |
| 90 | + |
| 91 | +```html |
| 92 | +<div class="modal-overlay"> |
| 93 | + <div class="modal"> |
| 94 | + <div class="modal-header"> |
| 95 | + <h3 class="modal-title">Confirm action</h3> |
| 96 | + <button class="modal-close" aria-label="Close">×</button> |
| 97 | + </div> |
| 98 | + <div class="modal-body">Body content.</div> |
| 99 | + <div class="modal-footer"> |
| 100 | + <button class="btn">Cancel</button> |
| 101 | + <button class="btn btn-primary">Confirm</button> |
| 102 | + </div> |
| 103 | + </div> |
| 104 | +</div> |
| 105 | +``` |
| 106 | + |
| 107 | +Toggle visibility from your own JS — the design system ships CSS only. |
| 108 | + |
| 109 | +## Sidebar nav |
| 110 | + |
| 111 | +```html |
| 112 | +<nav class="sidebar"> |
| 113 | + <div class="sidebar-section">Workspace</div> |
| 114 | + <a class="sidebar-item is-active" href="#">Dashboard</a> |
| 115 | + <a class="sidebar-item" href="#">Projects</a> |
| 116 | +</nav> |
| 117 | +``` |
| 118 | + |
| 119 | +## Stat / metric card |
| 120 | + |
| 121 | +```html |
| 122 | +<div class="stat"> |
| 123 | + <div class="stat-label">Active users</div> |
| 124 | + <div class="stat-value">1.248</div> |
| 125 | + <div class="stat-trend stat-trend-up">▲ 12%</div> |
| 126 | +</div> |
| 127 | +``` |
| 128 | + |
| 129 | +`stat-trend-up` (green) and `stat-trend-down` (red) indicate direction. |
| 130 | + |
| 131 | +## Alerts |
| 132 | + |
| 133 | +```html |
| 134 | +<div class="alert alert-info">Info message</div> |
| 135 | +<div class="alert alert-success">Success message</div> |
| 136 | +<div class="alert alert-warning">Warning message</div> |
| 137 | +<div class="alert alert-danger">Error message</div> |
| 138 | +``` |
| 139 | + |
| 140 | +## Layout primitives |
| 141 | + |
| 142 | +- `.ds-container` — centered, max-width 1200px |
| 143 | +- `.ds-stack` — vertical rhythm between children (16px); `ds-stack-sm` / |
| 144 | + `ds-stack-lg` for tighter/looser spacing |
| 145 | +- `.ds-cluster` — horizontal row, wraps, 12px gap |
| 146 | +- `.ds-grid` — auto-fit grid, 240px minimum column width |
| 147 | + |
| 148 | +## Line icons |
| 149 | + |
| 150 | +A shared SVG sprite at `design-system/v1/icons.svg`. Reference any icon with `<use href="…#name"/>`. Sized via CSS class, tinted via `currentColor`. |
| 151 | + |
| 152 | +```html |
| 153 | +<svg class="ds-icon" aria-hidden="true"> |
| 154 | + <use href="/research-projects/design-system/v1/icons.svg#home"/> |
| 155 | +</svg> |
| 156 | + |
| 157 | +<svg class="ds-icon ds-icon-lg" style="color: var(--ds-color-accent);"> |
| 158 | + <use href="/research-projects/design-system/v1/icons.svg#leaf"/> |
| 159 | +</svg> |
| 160 | +``` |
| 161 | + |
| 162 | +Sizes: default (`1.25em`), `ds-icon-lg` (`1.75em`), `ds-icon-xl` (`2.25em`). |
| 163 | + |
| 164 | +**Available icons**: `home`, `search`, `bell`, `user`, `users`, `calendar`, `calendar-check`, `folder`, `inbox`, `dashboard`, `chart`, `settings`, `car`, `school`, `vote`, `alert`, `trash`, `leaf`, `bike`, `plus`, `arrow-right`, `edit`, `check`, `more`, `export`, `map-pin`, `building`. |
| 165 | + |
| 166 | +See the <a href="/research-projects/design-system/v1/playground.html" target="_blank">playground</a> for visual reference. Prefer these over emoji — emoji render inconsistently across platforms and don't inherit text color. |
| 167 | + |
| 168 | +## Aarhus-inspired extensions |
| 169 | + |
| 170 | +The following components carry the aarhus.dk visual relation — pastel |
| 171 | +surfaces, softer shapes, pink accent. Use them to signal "same municipal |
| 172 | +family" in prototypes that benefit from a warmer, more citizen-facing tone. |
| 173 | + |
| 174 | +### Surface utilities |
| 175 | + |
| 176 | +Pastel backgrounds you can apply to any element. Pair with `.card-soft`, |
| 177 | +`.hero`, or plain `<section>`. |
| 178 | + |
| 179 | +```html |
| 180 | +<div class="card-soft surface-mint">Mint</div> |
| 181 | +<div class="card-soft surface-cream">Cream</div> |
| 182 | +<div class="card-soft surface-pale-blue">Pale blue</div> |
| 183 | +<div class="card-soft surface-pale-pink">Pale pink</div> |
| 184 | +<div class="card-soft surface-pale-aqua">Pale aqua</div> |
| 185 | +<div class="card-soft surface-coral">Coral</div> |
| 186 | +``` |
| 187 | + |
| 188 | +### Soft card |
| 189 | + |
| 190 | +Larger radius (24px), no border. Meant to sit on a pastel surface or a |
| 191 | +warm body background. |
| 192 | + |
| 193 | +```html |
| 194 | +<div class="card-soft surface-mint"> |
| 195 | + <h4>Friendly tone</h4> |
| 196 | + <p>Softer shape for citizen-facing content.</p> |
| 197 | +</div> |
| 198 | +``` |
| 199 | + |
| 200 | +### Hero banner |
| 201 | + |
| 202 | +Full-width promotional section with a big heading and an optional search |
| 203 | +row. Add any surface utility for the background. |
| 204 | + |
| 205 | +```html |
| 206 | +<div class="hero surface-pale-blue"> |
| 207 | + <h1 class="hero-title">Hvad leder du efter?</h1> |
| 208 | + <p class="hero-lede">Find services, høringer og aktuelle sager.</p> |
| 209 | + <div class="hero-search"> |
| 210 | + <input class="input" type="search" placeholder="Søg…"> |
| 211 | + <button class="btn btn-primary btn-pill">Søg</button> |
| 212 | + </div> |
| 213 | +</div> |
| 214 | +``` |
| 215 | + |
| 216 | +### Quick-link tile |
| 217 | + |
| 218 | +Iconed service shortcut — hover lift, rounded icon bubble. |
| 219 | + |
| 220 | +```html |
| 221 | +<a class="quick-link" href="#"> |
| 222 | + <span class="quick-link-icon">🚗</span> |
| 223 | + <span class="quick-link-title">Parkering</span> |
| 224 | + <span class="quick-link-desc">Zoner, tilladelser, betaling</span> |
| 225 | +</a> |
| 226 | +``` |
| 227 | + |
| 228 | +### Sparkline |
| 229 | + |
| 230 | +CSS-sized, `currentColor`-tinted SVG. Put it in a table cell or next to |
| 231 | +a stat. Tint by setting `color` on the parent (or via |
| 232 | +`style="color: var(--ds-color-accent)"`). |
| 233 | + |
| 234 | +```html |
| 235 | +<svg class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none"> |
| 236 | + <path class="sparkline-area" d="M0,18 L10,14 L20,16 L30,8 L40,10 L50,4 L60,6 L70,2 L80,3 L80,24 L0,24 Z"/> |
| 237 | + <path d="M0,18 L10,14 L20,16 L30,8 L40,10 L50,4 L60,6 L70,2 L80,3"/> |
| 238 | +</svg> |
| 239 | +``` |
0 commit comments