Chi Design System
v5.38.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
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
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
Price
Use price to display consistent price text in your project.
Examples
Properties
Accessibility
Examples
To render price, use the class
chi-price
.
Base
#
$
100
00
Web Component
HTML Blueprint
Copy
Copy
Sizes
#
-sm
$
100
00
-md
$
100
00
-lg
$
100
00
Web Component
HTML Blueprint
Copy
Copy
Web Component
Properties
Web component coming soon
Accessibility
Accessibility guidelines coming soon