Neutrale Container-Fläche.
Seiten
Inhalt
6. Komponenten
Buttons
Buttons haben semantische Farb-Varianten und vier Größen (--xs, --sm, --md, --lg).
| <button class="xpulse-button xpulse-button--primary xpulse-button--sm">Primary SM</button> |
| <button class="xpulse-button xpulse-button--danger xpulse-button--lg">Delete</button> |
| <button class="xpulse-button xpulse-button--ghost">Ghost</button> |
| <a class="xpulse-button xpulse-button--info xpulse-button--block" href="#">Full Width</a> |
Cards & Boxes
Positive Rückmeldungen.
Warnungen und Reviews.
Fehler und destruktive Prozesse.
| <article class="xpulse-card xpulse-card--info"> |
| <header class="xpulse-card__header">Header</header> |
| <div class="xpulse-card__content">Content</div> |
| <footer class="xpulse-card__footer">Footer</footer> |
| </article> |
Tabellen
| Komponente | Status | Hinweis |
|---|---|---|
| Theme Route | Ready | Geladen von /_theme/app.css |
| Warning Palette | Review | Sparsam einsetzen |
| Error Flow | Critical | Nur für destruktive Aktionen |
| Plain Row | Normal | Ohne Kontextfarbe |
| <table class="xpulse-table xpulse-table--lined xpulse-table--striped"> |
| <tbody> |
| <tr class="xpulse-table__row--info">...</tr> |
| <tr class="xpulse-table__row--warning">...</tr> |
| <tr class="xpulse-table__row--danger">...</tr> |
| </tbody> |
| </table> |
Code
Inline: const state = "online"; und --xpulse-accent
| 1 | import theme from '@xpulse/theme'; |
| 2 | await theme.init(); |
| 3 | console.log(theme.href('app')); |
| <code class="xpulse-code">inline code</code> |
| <div class="xpulse-code-block">...</div> |
Formulare
| <fieldset class="xpulse-fieldset"> |
| <legend class="xpulse-legend">Gruppe</legend> |
| <label class="xpulse-label"> |
| Name<br> |
| <input class="xpulse-input" type="text" /> |
| <span class="xpulse-help">Hilfetext</span> |
| </label> |
| <textarea class="xpulse-textarea" rows="4"></textarea> |
| <input class="xpulse-input" type="color" /> |
| </fieldset> |
Alle Komponenten reagieren automatisch auf die aktuellen Theme-Tokens. Neue Komponenten sollten immer zuerst Tokens nutzen, bevor eigene Styles geschrieben werden.