6. Components

Buttons

Buttons have semantic colour variants and four sizes (--xs, --sm, --md, --lg).

1 <button class="xpulse-button xpulse-button--primary xpulse-button--sm">Primary SM</button>
2 <button class="xpulse-button xpulse-button--danger xpulse-button--lg">Delete</button>
3 <button class="xpulse-button xpulse-button--ghost">Ghost</button>
4 <a class="xpulse-button xpulse-button--info xpulse-button--block" href="#">Full Width</a>

Cards & Boxes

.xpulse-box

Neutral container surface.

Positive feedback.

Warnings and reviews.

Errors and destructive processes.

1 <article class="xpulse-card xpulse-card--info">
2   <header class="xpulse-card__header">Header</header>
3   <div class="xpulse-card__content">Content</div>
4   <footer class="xpulse-card__footer">Footer</footer>
5 </article>

Tables

Component	Status	Note
Theme Route	Ready	Loaded from `/_theme/app.css`
Warning Palette	Review	Use sparingly
Error Flow	Critical	Only for destructive actions
Plain Row	Normal	No contextual colour

1 <table class="xpulse-table xpulse-table--lined xpulse-table--striped">
2   <tbody>
3     <tr class="xpulse-table__row--info">...</tr>
4     <tr class="xpulse-table__row--warning">...</tr>
5     <tr class="xpulse-table__row--danger">...</tr>
6   </tbody>
7 </table>

Code

Inline: const state = "online"; and --xpulse-accent

1	import theme from '@xpulse/theme';
2	await theme.init();
3	console.log(theme.href('app'));

1 <code class="xpulse-code">inline code</code>
2 <div class="xpulse-code-block">...</div>

Forms

Profile

Name
Shown in navigation and logs.

E-Mail

Scope

Accent Colour
Colour input with padding: 0.

Message
Override tokens first, then write new classes.

Subscribe to release notes

1 <fieldset class="xpulse-fieldset">
2   <legend class="xpulse-legend">Group</legend>
3   <label class="xpulse-label">
4     Name<br>
5     <input class="xpulse-input" type="text" />
6     <span class="xpulse-help">Help text</span>
7   </label>
8   <textarea class="xpulse-textarea" rows="4"></textarea>
9   <input class="xpulse-input" type="color" />
10 </fieldset>

All components automatically respond to the current theme tokens. New components should always use tokens before writing custom styles.

1	<button class="xpulse-button xpulse-button--primary xpulse-button--sm">Primary SM</button>
2	<button class="xpulse-button xpulse-button--danger xpulse-button--lg">Delete</button>
3	<button class="xpulse-button xpulse-button--ghost">Ghost</button>
4	<a class="xpulse-button xpulse-button--info xpulse-button--block" href="#">Full Width</a>

1	<article class="xpulse-card xpulse-card--info">
2	<header class="xpulse-card__header">Header</header>
3	<div class="xpulse-card__content">Content</div>
4	<footer class="xpulse-card__footer">Footer</footer>
5	</article>

1	<table class="xpulse-table xpulse-table--lined xpulse-table--striped">
2	<tbody>
3	<tr class="xpulse-table__row--info">...</tr>
4	<tr class="xpulse-table__row--warning">...</tr>
5	<tr class="xpulse-table__row--danger">...</tr>
6	</tbody>
7	</table>

1	<code class="xpulse-code">inline code</code>
2	<div class="xpulse-code-block">...</div>

1	<fieldset class="xpulse-fieldset">
2	<legend class="xpulse-legend">Group</legend>
3	<label class="xpulse-label">
4	Name<br>
5	<input class="xpulse-input" type="text" />
6	<span class="xpulse-help">Help text</span>
7	</label>
8	<textarea class="xpulse-textarea" rows="4"></textarea>
9	<input class="xpulse-input" type="color" />
10	</fieldset>