Chi Design System
v5.65.0
v5.65.0
v5.64.0
v5.63.0
v5.62.0
v5.61.0
v5.60.0
v5.59.0
v5.58.0
v5.57.0
v5.56.0
v5.55.0
v5.54.0
v5.53.0
v5.52.0
v5.51.1
v5.51.0
v5.50.0
v5.49.0
v5.48.0
v5.47.0
v5.46.0
v5.45.0
v5.44.0
v5.43.0
v5.42.0
v5.41.0
v5.40.0
v5.39.0
v5.38.0
v5.37.0
v5.36.0
v5.35.0
v5.34.0
v5.33.0
v5.32.0
v5.31.0
v5.30.0
v5.29.0
v5.28.0
v5.27.0
v5.26.0
v5.25.0
v5.24.0
v5.23.0
v5.22.0
v5.21.0
v5.20.1
v5.20.0
v5.19.0
v5.18.0
v5.17.0
v5.16.0
v5.15.0
v5.14.1
v5.14.0
v5.13.1
v5.13.0
v5.12.0
v5.11.0
v5.9.1
v5.9.0
v5.8.0
v5.7.0
v5.6.0
v5.5.0
v5.4.0
v5.3.1
v5.3.0
v5.2.0
v5.1.0
v5.0.0
v4.4.0
v4.3.0
v4.2.0
v4.1.2
v4.1.1
v4.1.0
v4.0.0
v3.17.0
v3.16.0
v3.15.0
v3.14.0
v3.13.0
v3.12.0
v3.11.0
v3.10.0
v3.9.0
v3.8.0
v3.7.0
v3.6.0
v3.5.0
v3.4.0
v3.3.0
v3.2.0
v3.1.1
v3.1.0
v3.0.0
v2.6.0
v2.5.1
v2.5.0
v2.4.1
v2.4.0
v2.3.0
v2.2.0
v2.1.0
v2.0.0
Support
Email Support
Talk #Chi on Microsoft Teams
Theme
Lumen
CenturyLink
Lumen
Lumen Enterprise Portal
Lumen Rebrand24
Portal Rebrand24
Getting Started
Introduction
Installation
Development workflow
Browser support
What's new
Foundations
Accessibility
Overview
Using the keyboard
Page structure
Color and sensory
Images
Text
Links and forms
Tables
Other
Color
Design tokens
Grid
Components
Accordion
Activity
Alert
Avatar
Badge
Brand
Breadcrumb
Button
Button group
Card
Carousel
Checkbox
Data table
Date picker
Divider
Drawer
Dropdown
Expansion panel
File input
Flag icon
Footer
Header
Icon
Label
Link
Marketing icon
Mobile navigation
Modal
Number input
Pagination
Phone Input
Picker
Picker group
Popover
Price
Progress
Radio button
Range slider
Search input
Select
Sidenav
Skeleton
Spinner
Stat
Steps
Table
Tabs
Text input
Textarea
Time picker
Toggle switch
Toolbar
Tooltip
Utilities
Border
Color
Display
Flex
Image
Opacity
Overflow
Position
Shadow
Sizing
Spacing
Text
Vertical-align
Z-index
Templates
App Layout
Card
Error 404
Error 500
State
Skeleton
Use skeleton to achieve loading visual state for asynchronously rendered UI elements.
Examples
Properties
Accessibility
Examples
Base
#
Web Component
HTML Blueprint
Copy
Copy
Rounded
#
Web Component
HTML Blueprint
Copy
Copy
Circle
#
Web Component
HTML Blueprint
Copy
Copy
Square
#
Web Component
HTML Blueprint
Copy
Copy
Rounded square
#
Web Component
HTML Blueprint
Copy
Copy
Complex combination
#
Toggle Skeleton
Web Component
HTML Blueprint
Copy
Copy
Sizes
#
-xs
-sm
-md
-lg
-xl
Web Component
HTML Blueprint
Copy
Copy
Web Component
Properties
Web component coming soon
Accessibility
Accessibility guidelines coming soon