Skip to Content
Clay CSS
v3.9.0
Hide Nav
Site Settings
Show Atlas
Show Site CSS
Reset Settings
Home
API
Clay CSS Mixins
Colors
Colors
Components
Alerts
Badges, Labels and Stickers
Breadcrumbs
Button Group
Buttons
Card Interactive
Cards
Dropdowns
Dropdowns (Autocomplete)
Dropdowns (Drill Down)
Empty State
Form Elements
Form Elements (Autocomplete)
Form Elements (Clay Reorder)
Form Elements (Clay Time)
Form Elements (Color Picker)
Form Elements (Custom)
Form Elements (Date Picker)
Form Elements (Dual Listbox)
Form Elements (Input Groups)
Form Elements (Multi Select)
Form Elements (Range)
Form Elements (Validation)
Form Group
Grid
Icons (Lexicon)
Images (Aspect Ratios)
Images and Thumbnails
Links
List Groups
Loading Indicators
Menubar (Vertical Navigation with Decorator)
Menubar (Vertical)
Modals
Multi Step Nav
Nav
Nav Pills
Nav Tabs
Nav Underline
Navbar
Navbar (Application Bar)
Navbar (Management Bar)
Navbar (Navigation Bar)
Pagination
Panels
Popovers and Tooltips
Progress Bars
Sheet
Sidebar
Slideout
Tables
Tbar (Toolbar)
Tbar Stacked (Vertical Bar)
Timelines
Toggle Switch
Utilities
Utilities (C Focus Inset)
Utilities (C Inner)
Components (JS)
Collapsible Search
Sidenav
Elements
Typography
Typography (Kbd)
Extending Components
Extending Toggles
Visual Tests
Card Custom Fields View
Card Type Template Use Case
Card View Template
Card View Template (Info Panel)
Documents Upload
Form Group Sm
Form Hierarchy
Labels
List View Template
List View Template (Info Panel)
Localizable Input Field
Subnav Tbar
Table Custom Field List
Table Drag
Table Valign
Table View Template
Table View Template (Info Panel)
Toggle Switch (Old)
Users and Organizations
Users and Organizations (User Card)
Users and Organizations Form Vertical Navigation
CHANGELOG
GitHub
Form Group Sm
Sheet Subtitle
Text
Password
Textarea
Url
Tel
Email
Search
Number
Range
Select Element
Regular Select Element
Sample 1
Sample 2
Sample 3
Sample 4
Select Element with Multiple Select Options
Sample 1
Sample 2
Sample 3
Sample 4
Sample 5
Sample 6
Sample 7
Sample 8
Read Only States
Text Input (Read Only)
Read Only Plaintext
Textarea (Read Only)
Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino. To go, strong, half and half foam single origin, cultivar affogato black grounds shop ut plunger pot. Con panna aroma, pumpkin spice to go, wings, aromatic single shot, aged single shot to go extraction java. Percolator americano at cultivar grinder est java percolator plunger pot shop con panna.
Form Group Autofit
Form Inline Autofit
Select Element
Option 1
Option 2
Option 3
First Name
Last Name
Input Group
$
.00
Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino.
City
State ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
AL
CA
FL
HI
NV
WA
Zip Code
Plunger pot, extra siphon latte, as americano aromatic roast cultivar cup cup frappuccino.
Donation
$
.00
Submit
Clear
Form Group Autofit (Horizontal Form)
Name ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Your first name.
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Address 1
Address 2
Submit
Clear
Form File
Simple File Upload
Select File
Attach File
Browse
Attach File
Browse
Attach File
Browse
Attach File
Browse
Input Group (Separated)
@
@
.com
Input Group (Connected)
@
@
.com
@example.com
Liferay
http://www.liferay.com
/
$
.00
Input Group (Mixed)
@
Submit
Liferay
http://www.liferay.com
/
es-ES
en-US
Default
en-GB
Translated
es-ES
Translated
fr-FR
Not Translated
Input Group Inset
Submit
Submit
Input Group Text Secondary
Custom Checkbox
Custom Checkbox and Custom Control Description
Custom Check Label
Form Check and Form Check Description
Form Check Label
Custom Radio
Form Check with Radio Button
Input Group Buttons
Search
Search
Action
Action
Another action
Something else here
Separated link
Action
Action
Another action
Something else here
Separated link
Action
Action
Another action
Something else here
Separated link
Action
Action
Another action
Something else here
Separated link