EWS Component Examples

ews-card

A collapsible card component with customizable colors and styling.

Red Card Header
This is the content of a red card. Click the header to toggle.
 Red color
Orange Card Header
This is the content of an orange card.
 Orange color

WARNING

WARNING CONTENT NEED YOUR ATENTION

WARNING

 Custom

DANGER

DANGER CONTENT NEED YOUR ATENTION

DANGER

 Custom

ews-hex-shape

A hexagonal shape component with various configuration options.

Blue Hex
 Default
Pointy Top
 Pointy top
Red
Clipped Content - This text is clipped within the hex boundary
Clipped content

ews-stripe-bar

An animated stripe bar component with various customization options.

Default
Red
Animated
Reverse
Default
Red
Animated
Reverse

ews-hex-grid

Honeycomb grid with alignment and staggered reveal/exit animations.

01
02
03
04
05
06
07
08
09
10
11
12

ews-rib-layout

A complex rib cage layout with responsive branching and animated nodes.

Infinite Scroll

Smooth continuous ticker with direction support (seamless left and right loop).

Direction: Left (Normal)

STATUS: NORMAL SYSTEM: ONLINE TELEMETRY: CONNECTED

Direction: Right (Reverse Loop - Seamless)

WARNING: HIGH VOLTAGE SECTOR: 04 ALERT LEVEL: ELEVATED

Emergency Bar Example

CONDITION: RED EMERGENCY CODE: 102