Clay CSS
(
2.4.1
)
Navigation
home
globals
grid
typography
icons
links
utilities
alert
label
badge
sticker
button
breadcrumb
card
dropdown
input
input custom
input group
input validation
list group
loading animations
menubar
modal
nav
nav pills
nav tabs
nav underline
navbar
navbar application bar
navbar management bar
navbar navigation bar
pagination
panel
popover
progress bar
multi step nav
sheet
sidebar
table
tbar
tooltip
timeline
toggle switch
Switch Themes
Add New Theme
Add
Options
Import
Export
Delete Current Theme
Delete Everything
Use Clay Base
Btn
btn-font-size
px/rem
btn-font-weight
btn-padding-y
px/rem
btn-padding-x
px/rem
btn-line-height
btn-border-width
px/rem
btn-border-radius
px/rem
btn-box-shadow
btn-cursor
btn-transition
btn-font-size-mobile
btn-padding-y-mobile
px/rem
btn-padding-x-mobile
px/rem
Btn Focus
btn-focus-width
px/rem
btn-focus-box-shadow
Btn Active
btn-active-box-shadow
Btn Disabled
btn-disabled-cursor
btn-disabled-opacity
btn-link-disabled-color
Btn Monospaced
btn-monospaced-size
px/rem
btn-monospaced-padding-y
px/rem
btn-monospaced-padding-x
px/rem
btn-monospaced-size-mobile
px/rem
btn-inline-item-font-size
px/rem
btn-section-font-size
px/rem
btn-section-font-weight
btn-section-line-height
Btn Block
btn-block-spacing-y
px/rem
Btn Group
btn-group-item-margin-right
px/rem
Btn Toolbar
btn-toolbar-spacer-y
px/rem
btn-toolbar-spacer-x
px/rem
Btn Sm
btn-padding-y-sm
px/rem
btn-padding-x-sm
px/rem
btn-line-height-sm
btn-border-radius-sm
px/rem
btn-font-size-sm-mobile
px/rem
btn-font-size-sm
px/rem
btn-padding-x-sm-mobile
px/rem
btn-padding-y-sm-mobile
px/rem
btn-monospaced-padding-y-sm
px/rem
btn-monospaced-padding-x-sm
px/rem
btn-monospaced-size-sm
px/rem
btn-monospaced-size-sm-mobile
px/rem
btn-inline-item-font-size-sm
px/rem
btn-section-font-size-sm
px/rem
Btn Lg
btn-padding-y-lg
px/rem
btn-padding-x-lg
px/rem
btn-line-height-lg
btn-border-radius-lg
px/rem
btn-font-size-lg
px/rem
btn-font-size-lg-mobile
px/rem
btn-padding-x-lg-mobile
px/rem
btn-padding-y-lg-mobile
px/rem
btn-monospaced-padding-y-lg
px/rem
btn-monospaced-padding-x-lg
px/rem
btn-monospaced-size-lg
px/rem
btn-monospaced-size-lg-mobile
px/rem
btn-inline-item-font-size-lg
px/rem
btn-section-font-size-lg
px/rem
btn primary
btn-primary-bg
btn-primary-border-color
btn-primary-color
btn-primary-hover-bg
btn-primary-hover-border-color
btn-primary-hover-color
btn-primary-focus-bg
btn-primary-focus-border-color
btn-primary-focus-box-shadow
btn-primary-focus-color
btn-primary-disabled-bg
btn-primary-disabled-border-color
btn-primary-disabled-color
btn-primary-active-bg
btn-primary-active-border-color
btn-primary-active-box-shadow
btn-primary-active-color
btn-primary-active-focus-box-shadow
btn-primary-loading-animation
btn secondary
btn-secondary-bg
btn-secondary-border-color
btn-secondary-color
btn-secondary-hover-bg
btn-secondary-hover-border-color
btn-secondary-hover-color
btn-secondary-focus-bg
btn-secondary-focus-border-color
btn-secondary-focus-box-shadow
btn-secondary-focus-color
btn-secondary-disabled-bg
btn-secondary-disabled-border-color
btn-secondary-disabled-color
btn-secondary-active-bg
btn-secondary-active-border-color
btn-secondary-active-box-shadow
btn-secondary-active-color
btn-secondary-active-focus-box-shadow
btn-secondary-loading-animation
btn success
btn-success-bg
btn-success-border-color
btn-success-color
btn-success-hover-bg
btn-success-hover-border-color
btn-success-hover-color
btn-success-focus-bg
btn-success-focus-border-color
btn-success-focus-box-shadow
btn-success-focus-color
btn-success-disabled-bg
btn-success-disabled-border-color
btn-success-disabled-color
btn-success-active-bg
btn-success-active-border-color
btn-success-active-box-shadow
btn-success-active-color
btn-success-active-focus-box-shadow
btn-success-loading-animation
btn info
btn-info-bg
btn-info-border-color
btn-info-color
btn-info-hover-bg
btn-info-hover-border-color
btn-info-hover-color
btn-info-focus-bg
btn-info-focus-border-color
btn-info-focus-box-shadow
btn-info-focus-color
btn-info-disabled-bg
btn-info-disabled-border-color
btn-info-disabled-color
btn-info-active-bg
btn-info-active-border-color
btn-info-active-box-shadow
btn-info-active-color
btn-info-active-focus-box-shadow
btn-info-loading-animation
btn warning
btn-warning-bg
btn-warning-border-color
btn-warning-color
btn-warning-hover-bg
btn-warning-hover-border-color
btn-warning-hover-color
btn-warning-focus-bg
btn-warning-focus-border-color
btn-warning-focus-box-shadow
btn-warning-focus-color
btn-warning-disabled-bg
btn-warning-disabled-border-color
btn-warning-disabled-color
btn-warning-active-bg
btn-warning-active-border-color
btn-warning-active-box-shadow
btn-warning-active-color
btn-warning-active-focus-box-shadow
btn-warning-loading-animation
btn danger
btn-danger-bg
btn-danger-border-color
btn-danger-color
btn-danger-hover-bg
btn-danger-hover-border-color
btn-danger-hover-color
btn-danger-focus-bg
btn-danger-focus-border-color
btn-danger-focus-box-shadow
btn-danger-focus-color
btn-danger-disabled-bg
btn-danger-disabled-border-color
btn-danger-disabled-color
btn-danger-active-bg
btn-danger-active-border-color
btn-danger-active-box-shadow
btn-danger-active-color
btn-danger-active-focus-box-shadow
btn-danger-loading-animation
btn light
btn-light-bg
btn-light-border-color
btn-light-color
btn-light-hover-bg
btn-light-hover-border-color
btn-light-hover-color
btn-light-focus-bg
btn-light-focus-border-color
btn-light-focus-box-shadow
btn-light-focus-color
btn-light-disabled-bg
btn-light-disabled-border-color
btn-light-disabled-color
btn-light-active-bg
btn-light-active-border-color
btn-light-active-box-shadow
btn-light-active-color
btn-light-active-focus-box-shadow
btn-light-loading-animation
btn dark
btn-dark-bg
btn-dark-border-color
btn-dark-color
btn-dark-hover-bg
btn-dark-hover-border-color
btn-dark-hover-color
btn-dark-focus-bg
btn-dark-focus-border-color
btn-dark-focus-box-shadow
btn-dark-focus-color
btn-dark-disabled-bg
btn-dark-disabled-border-color
btn-dark-disabled-color
btn-dark-active-bg
btn-dark-active-border-color
btn-dark-active-box-shadow
btn-dark-active-color
btn-dark-active-focus-box-shadow
btn-dark-loading-animation
btn outline primary
btn-outline-primary-bg
btn-outline-primary-border-color
btn-outline-primary-color
btn-outline-primary-hover-bg
btn-outline-primary-hover-border-color
btn-outline-primary-hover-color
btn-outline-primary-focus-bg
btn-outline-primary-focus-border-color
btn-outline-primary-focus-box-shadow
btn-outline-primary-focus-color
btn-outline-primary-disabled-bg
btn-outline-primary-disabled-border-color
btn-outline-primary-disabled-color
btn-outline-primary-active-bg
btn-outline-primary-active-border-color
btn-outline-primary-active-box-shadow
btn-outline-primary-active-color
btn-outline-primary-active-focus-box-shadow
btn-outline-primary-loading-animation
btn outline secondary
btn-outline-secondary-bg
btn-outline-secondary-border-color
btn-outline-secondary-color
btn-outline-secondary-hover-bg
btn-outline-secondary-hover-border-color
btn-outline-secondary-hover-color
btn-outline-secondary-focus-bg
btn-outline-secondary-focus-border-color
btn-outline-secondary-focus-box-shadow
btn-outline-secondary-focus-color
btn-outline-secondary-disabled-bg
btn-outline-secondary-disabled-border-color
btn-outline-secondary-disabled-color
btn-outline-secondary-active-bg
btn-outline-secondary-active-border-color
btn-outline-secondary-active-box-shadow
btn-outline-secondary-active-color
btn-outline-secondary-active-focus-box-shadow
btn-outline-secondary-loading-animation
btn outline info
btn-outline-info-bg
btn-outline-info-border-color
btn-outline-info-color
btn-outline-info-hover-bg
btn-outline-info-hover-border-color
btn-outline-info-hover-color
btn-outline-info-focus-bg
btn-outline-info-focus-border-color
btn-outline-info-focus-box-shadow
btn-outline-info-focus-color
btn-outline-info-disabled-bg
btn-outline-info-disabled-border-color
btn-outline-info-disabled-color
btn-outline-info-active-bg
btn-outline-info-active-border-color
btn-outline-info-active-box-shadow
btn-outline-info-active-color
btn-outline-info-active-focus-box-shadow
btn-outline-info-loading-animation
btn outline success
btn-outline-success-bg
btn-outline-success-border-color
btn-outline-success-color
btn-outline-success-hover-bg
btn-outline-success-hover-border-color
btn-outline-success-hover-color
btn-outline-success-focus-bg
btn-outline-success-focus-border-color
btn-outline-success-focus-box-shadow
btn-outline-success-focus-color
btn-outline-success-disabled-bg
btn-outline-success-disabled-border-color
btn-outline-success-disabled-color
btn-outline-success-active-bg
btn-outline-success-active-border-color
btn-outline-success-active-box-shadow
btn-outline-success-active-color
btn-outline-success-active-focus-box-shadow
btn-outline-success-loading-animation
btn outline warning
btn-outline-warning-bg
btn-outline-warning-border-color
btn-outline-warning-color
btn-outline-warning-hover-bg
btn-outline-warning-hover-border-color
btn-outline-warning-hover-color
btn-outline-warning-focus-bg
btn-outline-warning-focus-border-color
btn-outline-warning-focus-box-shadow
btn-outline-warning-focus-color
btn-outline-warning-disabled-bg
btn-outline-warning-disabled-border-color
btn-outline-warning-disabled-color
btn-outline-warning-active-bg
btn-outline-warning-active-border-color
btn-outline-warning-active-box-shadow
btn-outline-warning-active-color
btn-outline-warning-active-focus-box-shadow
btn-outline-warning-loading-animation
btn outline danger
btn-outline-danger-bg
btn-outline-danger-border-color
btn-outline-danger-color
btn-outline-danger-hover-bg
btn-outline-danger-hover-border-color
btn-outline-danger-hover-color
btn-outline-danger-focus-bg
btn-outline-danger-focus-border-color
btn-outline-danger-focus-box-shadow
btn-outline-danger-focus-color
btn-outline-danger-disabled-bg
btn-outline-danger-disabled-border-color
btn-outline-danger-disabled-color
btn-outline-danger-active-bg
btn-outline-danger-active-border-color
btn-outline-danger-active-box-shadow
btn-outline-danger-active-color
btn-outline-danger-active-focus-box-shadow
btn-outline-danger-loading-animation
btn outline light
btn-outline-light-bg
btn-outline-light-border-color
btn-outline-light-color
btn-outline-light-hover-bg
btn-outline-light-hover-border-color
btn-outline-light-hover-color
btn-outline-light-focus-bg
btn-outline-light-focus-border-color
btn-outline-light-focus-box-shadow
btn-outline-light-focus-color
btn-outline-light-disabled-bg
btn-outline-light-disabled-border-color
btn-outline-light-disabled-color
btn-outline-light-active-bg
btn-outline-light-active-border-color
btn-outline-light-active-box-shadow
btn-outline-light-active-color
btn-outline-light-active-focus-box-shadow
btn-outline-light-loading-animation
btn outline dark
btn-outline-dark-bg
btn-outline-dark-border-color
btn-outline-dark-color
btn-outline-dark-hover-bg
btn-outline-dark-hover-border-color
btn-outline-dark-hover-color
btn-outline-dark-focus-bg
btn-outline-dark-focus-border-color
btn-outline-dark-focus-box-shadow
btn-outline-dark-focus-color
btn-outline-dark-disabled-bg
btn-outline-dark-disabled-border-color
btn-outline-dark-disabled-color
btn-outline-dark-active-bg
btn-outline-dark-active-border-color
btn-outline-dark-active-box-shadow
btn-outline-dark-active-color
btn-outline-dark-active-focus-box-shadow
btn-outline-dark-loading-animation
sticker
breadcrumb
Button
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Link
Button Focus
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Link
Button Active
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Link
Button Disabled
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Link
Anchor and Input Elements as Buttons
Anchor
Anchor
Anchor
Anchor
Anchor
Anchor
Anchor
Button Outline
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Button Outline Focus
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Button Outline Active
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Button Outline Disabled
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Anchor and Input Elements as Buttons
Anchor
Anchor
Anchor
Anchor
Anchor
Anchor
Button Outline Borderless
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Button Outline Borderless Focus
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Button Outline Borderless Active
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Button Outline Borderless Disabled
Primary
Secondary
Info
Success
Warning
Danger
Light
Dark
Anchor and Input Elements as Button Outline
Anchor
Anchor
Anchor
Anchor
Anchor
Anchor
Buttons with Icons
Primary
Secondary
Button Monospaced
A
B
C
D
E
F
G
H
I
Button Block
Block Level Button
Button Dropdown
Primary
Action
Scope
Primary
Action
Scope
Split Button Dropdowns
Primary
Action
Scope
Secondary
Action
Scope
Info
Action
Scope
Success
Action
Scope
Warning
Action
Scope
Danger
Action
Scope
Split Button Dropups
Right dropup
Action
Another action
Something else here
Separated link
Dropup
Action
Another action
Something else here
Separated link
Button Group Item
Submit
Cancel
Back
Link
Button Group
Day
Month
Year
Agenda
Day
Month
Year
Agenda
Vertical Button Group
Button
Button
Dropdown
Dropdown link
Dropdown link
Dropdown
Dropdown link
Dropdown link
Dropdown
Dropdown link
Dropdown link
Button Toolbar
1
2
3
4
5
6
7
8
@
Button Sm
Small Block Level Button
Small
es-ES
Left
Middle
Right
Primary
Action
Scope
Button
Button
Dropdown
Dropdown link
Dropdown link
Dropdown
Dropdown link
Dropdown link
Dropdown
Dropdown link
Dropdown link
Button Lg
Large Block Level Button
Large
es-ES
Left
Middle
Right
Info
Action
Scope
Button
Button
Dropdown
Dropdown link
Dropdown link
Dropdown
Dropdown link
Dropdown link
Dropdown
Dropdown link
Dropdown link
sticker
breadcrumb