eink-ui

eink-ui

Web Components

Switch to CSS-only demos Theme: default Default Inverted High-contrast View Storybook

Card

<eink-card> replaces <div class="eink-card">. Add the raised attribute for emphasis.

CSS-only
<div class="eink-card eink-card--raised">...</div>
Web Component
<eink-card raised>...</eink-card>
Default card

Standard card with thin border. Good for grouping related content.

Raised card

Medium border weight for emphasis. Use sparingly — no more than one per section.

Card without footer

The footer is optional. Cards work fine with just a title and body.

Button

<eink-button> wraps a native <button> and maps variant, size, and disabled attributes to CSS classes.

CSS-only
<button class="eink-btn eink-btn--primary">Primary</button>
Web Component
<eink-button variant="primary">Primary</eink-button>

Variants

Primary Secondary Ghost

Sizes

Small Default Large

Disabled state

Primary (disabled) Secondary (disabled) Ghost (disabled)

Focus state

Tab through the buttons below to see the focus ring.

Tab to me Then to me And me

Alert

<eink-alert> with variant="info|success|warning|error".

Info
Thin left rule; minimal repaint.
Success
Thicker rule for emphasis.
Warning
Dashed rule reads well on low DPI.
Error
Error background uses light gray instead of fill.

Tag & Badge

<eink-tag> with optional variant="filled|muted", and <eink-badge>.

Tags

Default Filled Muted

Badges

Badge New 3