20
Core 2.5.0
This dev app is optimized for laptop screen widths (1280px minimum).
Please maximize your window or use a laptop / desktop device.
 
Home
 
 
Front-End Workshop
Design Tokens
Design tokens represent the small, repeated design decisions that make up a design system's visual style.
View more
Typo & Icons
Typography is arguably the most essential part of any website. Open source icon sets are ready to use in our framework.
Typography
  
Iconography
Primitives
Basic CSS primitives as style building blocks we use in our UI components, like Cards, Pills, Tags, Banners.
Primitives 1
  
Primitives 2
Utilities
Utilities provide more building blocks to handle a range common use cases that help us avoid writing custom styles.
Utilities 1
  
Utilities 2
Component Staging: UI Controls + Component Customizations
1
Playground 1
SS Accordion
2
Playground 2
SS Toolbar, SS Datagrid
3
Playground 3
SS Button, SS Dropdown Button, DX Responsive-box
4
Playground 4
SS Dialog, SS Popup, SS Dynamic Popup, SS Toast, SS Popover
5
Playground 5
SS Tabs, SS Tabpanel, SS Treeview
6
Playground 6
SS Tree-list
7
Playground 7
SS Stand-alone controls examples
8
Playground 8
SS Form-nested controls examples (dxi-items)
9
Playground 9
Angular Split View Component
10
Playground 10
SS Scheduler
11
Playground 11
SS List: implementations and examples
12
Playground 12
SS Html editor, SS Json preview + SS Json editor
13
Playground 13
SS Loading Indicator
14
Playground 14
SS Image Box
15
Playground 15
Heat Map Matrix
16
Playground 16
QR code / Bar code tests
17
Playground 17
...
18
Playground 18
...
19
Playground 19
...
20
Playground 20
...
Layout Staging: Form Patterns + Layout Examples
21
Playground 21
SS Datagrid - Nav, SS Accordion Details + controls
22
Playground 22
Simple List and Details: Report Designer Example
23
Playground 23
DX scrollers - Dynamic height layout example
24
Playground 24
Form validation summary for dxi-items + user feedback examples
25
Playground 25
Form configuration samples: Responsiveness, Groups, colCount, colSpan
26
Playground 26
Form configuration samples: Pseudo-skeleton
27
Playground 27
...
28
Playground 28
...
29
Playground 29
...
30
Playground 30
...
31
Playground 31
Wizard pattern Example
32
Playground 32
...
33
Playground 33
...
34
Playground 34
...
35
Playground 35
...
36
Playground 36
...
37
Playground 37
...
38
Playground 38
...
39
Playground 39
...
40
Playground 40
...