Every element, component, and utility fertig styles. No classes required — each pattern is addressed by semantic HTML or ARIA attributes.
38 components
Body text with bold, italic, links, and inline code.
Semantic inline elements are styled directly — strong, em, a, mark, s, ins, abbr, code, kbd, samp. No classes needed.
<p>Text with <strong>bold</strong>, <em>italic</em>, <a>links</a>.</p>h1–h4 descend in size; h5 and h6 become small uppercase labels, which is how they are usually used in practice.
<h1>…</h1> through <h6>…</h6>Ordered, unordered, and definition lists. Description lists become a two-column grid automatically.
<ul><li>Item</li></ul>
<dl><dt>Key</dt><dd>Value</dd></dl>A quoted passage with an accent rule and muted text.
Block quotes take an accent rule on the start edge and mute their text colour.
<blockquote>…</blockquote>.card { border-radius: var(--fertig-r) }Inline code, keyboard shortcuts, sample output, and code blocks — all with a monospace face and recessed background.
<code>inline</code>
<pre><code>block</code></pre>
<kbd>Enter</kbd>Links use the accent colour with an underline offset. Add .primary when a prominent navigation link needs button-like styling.
<a href="#">Link text</a>
<a class="primary" href="/docs">Read the docs</a>| Name | Size |
|---|---|
| fertig | 9.3 KB |
| Other | 12 KB |
Editorial tables with hairline rules, hover tint, and self-scrolling on narrow screens. Numbers right-align with align="right".
<table>
<thead><tr><th>…</th></tr></thead>
<tbody><tr><td>…</td></tr></tbody>
</table>Raised panel with optional header and footer.
Raised panels taking optional header and footer that bleed to its edges. Cards are columns — footers align across a row.
<div class="card">
<header>Title</header>
<p>Content.</p>
<footer>Meta</footer>
</div>default passing failing
Small pill labels for status, counts, or categories. Combine with data-tone for ok/warn/err colours.
<span class="badge">default</span>
<span class="badge" data-tone="ok">pass</span>
<span class="badge" data-tone="err">fail</span>This paragraph is a skeleton placeholder.
Placeholder shapes that show where content will appear once it finishes loading, reducing perceived wait time.
<p data-skeleton>Loading text…</p>A quiet elevated region without card anatomy.
A general-purpose surface with shared radius and elevation tokens. Use flat or outline when hierarchy should be quieter.
<section data-surface>…</section>
<section data-surface="flat">…</section>
<section data-surface="outline">…</section>A compound row for an avatar or icon, flexible content, and an optional trailing action. It also works on links and buttons.
<div data-item>
<span data-avatar="sm">AM</span>
<div><strong>Ada Morris</strong><small>Product design</small></div>
<button data-icon aria-label="More actions">•••</button>
</div>Create a project to start organizing your work.
A deliberate endpoint for a collection with no content. Keep one clear explanation and one primary recovery action.
<section data-empty>
<h3>No projects yet</h3>
<p>Create one to get started.</p>
<button class="primary">Create project</button>
</section>Single-line text fields with labels, placeholders, hints, and validation. Errors fire on :user-invalid after input.
<label for="e">Email</label>
<input id="e" type="email" required>data-field keeps labels, help, and errors together. data-input-group gives fields, addons, and compact actions one focus surface.
<div data-field>
<label for="workspace">Workspace URL</label>
<div data-input-group>
<span>https://</span>
<input id="workspace" aria-describedby="workspace-help">
<span>.com</span>
</div>
<small id="workspace-help">Lowercase letters and numbers.</small>
</div>A single native input styled like a code control, preserving paste, password-manager, autofill, and screen-reader behavior.
<label for="code">Verification code</label>
<input id="code" data-otp inputmode="numeric"
autocomplete="one-time-code" maxlength="6">Native select dropdown with a CSS-drawn chevron. Supports appearance: base-select on Chromium for full styling.
<label for="s">Plan</label>
<select id="s"><option>Free</option></select>A selectable collection styled through ARIA. JavaScript must own selection, active-descendant state, typeahead, and arrow keys.
<ul role="listbox" tabindex="0" aria-label="Assignee"
aria-activedescendant="option-ada">
<li id="option-ada" role="option" aria-selected="true">Ada</li>
<li id="option-lin" role="option" aria-selected="false">Lin</li>
</ul>Multi-line text input with optional resizing and field-sizing: content for auto-grow.
<label for="t">Notes</label>
<textarea id="t" placeholder="Type here…"></textarea>Check options, select one choice, or expose a clear on/off setting. Every control inherits the active accent.
<label><input type="checkbox"> Check</label>
<label><input type="radio" name="r"> Radio</label>
<label>
<input type="checkbox" role="switch" checked>
Email updates
</label>Range sliders for numeric values within a range. Progress bars show determinate fill for ongoing operations.
<input type="range" value="60">
<progress value="0.6"></progress>Groups related form controls. The legend is styled as a panel title rather than notching the border.
<fieldset>
<legend>Account</legend>
<label for="n">Name</label>
<input id="n" type="text">
</fieldset>
A plain button is already styled. type="submit" gets the filled treatment automatically — most forms need no attributes.
<button>Default</button>
<button class="primary">Primary</button>
Soft and outline add hierarchy without another filled action. Ghost and link variants step down further.
<button data-variant="soft">Soft</button>
<button data-variant="outline">Outline</button>
<button data-variant="ghost">Ghost</button>
<button data-variant="link">Link</button>
Three sizes via data-size: sm, default, lg. Also supports data-block for full width and data-icon for icon-only.
<button data-size="sm">Small</button>
<button data-size="lg">Large</button>
<button data-block>Full width</button>
Combine data-tone with a filled or soft variant to retint the button for ok, warn, or err states.
<button data-variant="soft" data-tone="err">
Delete
</button>
Mutually exclusive options styled through role="group" and aria-pressed. No classes needed.
<span role="group">
<button aria-pressed="true">Day</button>
<button aria-pressed="false">Week</button>
</span>Preview panel
Code panel
Notes panel
Styled through ARIA. JavaScript owns selected state, panel visibility and arrow-key navigation.
<div role="tablist" aria-label="View">
<button id="tab-preview" role="tab" aria-controls="panel-preview"
aria-selected="true" tabindex="0">Preview</button>
<button id="tab-code" role="tab" aria-controls="panel-code"
aria-selected="false" tabindex="-1">Code</button>
</div>
<section id="panel-preview" role="tabpanel" aria-labelledby="tab-preview">…</section>
<section id="panel-code" role="tabpanel" aria-labelledby="tab-code" hidden>…</section>Trail of links showing hierarchy position. Separator and current-page styling are automatic.
<nav aria-label="Breadcrumb">
<ol><li><a href="/">Home</a></li></ol>
</nav>Native popover API, anchored to the button with CSS anchor positioning. No JavaScript, no positioning library.
<button popovertarget="menu">Menu ▾</button>
<div popover id="menu">
<menu><li><button>New</button></li></menu>
</div>Pure CSS tooltips via data-tooltip. Decorative only — put the same text in aria-label for assistive tech.
<button data-tooltip="Helpful tip">
Hover me
</button>Opens and closes with command/commandfor attributes — no JavaScript. closedby="any" gives light dismiss. Drawer uses the same element docked to an edge via data-side.
<dialog id="d" closedby="any" aria-labelledby="d-title">
<header><h3 id="d-title">Title</h3></header>
<p>Content.</p>
<footer>
<button commandfor="d" command="close">Close</button>
</footer>
</dialog>
<button commandfor="d" command="show-modal">Open</button>Callouts and asides retinted with data-tone. One attribute changes the accent for the whole element.
<aside data-tone="ok">
<strong>Done.</strong> Payment received.
</aside>Add aria-busy="true" to any button for a spinner. Works with any element — the spinner is drawn with CSS.
<button aria-busy="true">Saving</button>ok warn err
data-tone redefines --fertig-ac on the element. Anything inside it — buttons, links, badges — follows automatically.
<span class="badge" data-tone="ok">pass</span>
<div class="card" data-tone="err">…</div>Anything styled through ARIA or a native element, with no class required.
Native details/summary with a rotating caret. Animates open and closed where ::details-content is supported.
<details>
<summary>Title</summary>
<p>Body.</p>
</details>Layout utilities: .flex, .grid, .gap-*, .mx-auto, .ms-auto, .me-auto, .w-full and .hidden. All flow-relative.
<div class="grid grid-cols-3 gap-4">…</div>
<p class="row justify-end">…</p>
Seven named accents (blue, cyan, green, amber, red, violet, gray). Put data-accent on any element and everything inside follows.
<section data-accent="green">
<button class="primary">Save</button>
</section>No components match your search.