eink-ui

eink-ui

Web Components

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

Container

<eink-container> replaces <div class="eink-container">. Use the width attribute for variants.

CSS-only 
<div class="eink-container eink-container--narrow">...</div>
Web Component 
<eink-container width="narrow">...</eink-container>
Narrow container (eink-container width="narrow")
Default container (eink-container)
Wide container (eink-container width="wide")

Stack

<eink-stack> with optional gap="sm|lg" attribute.

CSS-only 
<div class="eink-stack eink-stack--sm">...</div>
Web Component 
<eink-stack gap="sm">...</eink-stack>
gap="sm"
Item 1
Item 2
Item 3
default
Item 1
Item 2
Item 3
gap="lg"
Item 1
Item 2
Item 3

Cluster

<eink-cluster> with optional gap attribute (any CSS length value). The gap is applied via the --eink-cluster-gap CSS variable.

Alpha
Bravo
Charlie
Delta
Echo
Foxtrot
Golf

Grid

<eink-grid> with optional min attribute to set the minimum column width via --eink-grid-min.

Default (16rem min)
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
min="22rem"
Cell 1
Cell 2
Cell 3
Cell 4

Divider

<eink-divider> replaces <hr class="eink-divider">. Add the strong attribute for heavier separators.

Content above the default divider.

Content between dividers.

Content below the strong divider.

Page structure

<eink-page-header>, <eink-section>, and <eink-page-footer> provide semantic page structure.

Page Header — <eink-page-header>

Section 1 content — <eink-section>

Section 2 content
Page Footer — <eink-page-footer>