Clay CSS
(
2.9.0
)
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
Badge
badge-font-size
px/rem
badge-font-weight
badge-padding-y
px/rem
badge-padding-x
px/rem
badge-line-height
badge-spacer-y
px/rem
badge-spacer-x
px/rem
badge-border-width
px/rem
badge-border-style
badge-border-color
badge-border-radius
px/rem
Badge Link
badge-link-color
badge-link-text-decoration
badge-link-hover-color
badge-link-hover-text-decoration
Badge Lexicon Icon
badge-lexicon-icon-width
px/rem
badge-lexicon-icon-height
px/rem
badge-lexicon-icon-margin-top
px/rem
Badge Item
badge-item-expand-min-width
px/rem
badge-item-spacer-x
px/rem
Badge Pill
badge-pill-padding-x
px/rem
badge-pill-border-radius
px/rem
badge close
badge-close-align-items
badge-close-bg
badge-close-border-color
badge-close-border-radius
px/rem
badge-close-color
badge-close-display
badge-close-font-family
badge-close-font-size
px/rem
badge-close-font-weight
badge-close-height
px/rem
badge-close-justify-content
badge-close-line-height
badge-close-margin-bottom
px/rem
badge-close-margin-left
px/rem
badge-close-margin-right
px/rem
badge-close-margin-top
px/rem
badge-close-opacity
badge-close-padding-bottom
px/rem
badge-close-padding-left
px/rem
badge-close-padding-right
px/rem
badge-close-padding-top
px/rem
badge-close-text-align
badge-close-text-decoration
badge-close-text-transform
badge-close-transition
badge-close-vertical-align
badge-close-width
px/rem
badge-close-hover-bg
badge-close-hover-color
badge-close-hover-opacity
badge-close-hover-text-decoration
badge-close-focus-bg
badge-close-focus-box-shadow
badge-close-focus-color
badge-close-focus-opacity
badge-close-focus-outline
badge-close-focus-text-decoration
badge-close-active-bg
badge-close-active-border-color
badge-close-active-color
badge-close-disabled-bg
badge-close-disabled-border-color
badge-close-disabled-color
badge-close-disabled-cursor
badge-close-disabled-opacity
badge-close-disabled-pointer-events
badge-close-disabled-text-decoration
badge-close-btn-focus-box-shadow
badge-close-btn-focus-outline
badge-close-lexicon-icon-margin-bottom
px/rem
badge-close-lexicon-icon-margin-left
px/rem
badge-close-lexicon-icon-margin-right
px/rem
badge-close-lexicon-icon-margin-top
px/rem
badge primary
badge-primary-bg
badge-primary-hover-bg
badge-primary-border-color
badge-primary-hover-border-color
badge-primary-color
badge-primary-hover-color
badge-primary-link-color
badge-primary-link-hover-color
badge secondary
badge-secondary-bg
badge-secondary-hover-bg
badge-secondary-border-color
badge-secondary-hover-border-color
badge-secondary-color
badge-secondary-hover-color
badge-secondary-link-color
badge-secondary-link-hover-color
badge success
badge-success-bg
badge-success-hover-bg
badge-success-border-color
badge-success-hover-border-color
badge-success-color
badge-success-hover-color
badge-success-link-color
badge-success-link-hover-color
badge info
badge-info-bg
badge-info-hover-bg
badge-info-border-color
badge-info-hover-border-color
badge-info-color
badge-info-hover-color
badge-info-link-color
badge-info-link-hover-color
badge warning
badge-warning-bg
badge-warning-hover-bg
badge-warning-border-color
badge-warning-hover-border-color
badge-warning-color
badge-warning-hover-color
badge-warning-link-color
badge-warning-link-hover-color
badge danger
badge-danger-bg
badge-danger-hover-bg
badge-danger-border-color
badge-danger-hover-border-color
badge-danger-color
badge-danger-hover-color
badge-danger-link-color
badge-danger-link-hover-color
badge light
badge-light-bg
badge-light-hover-bg
badge-light-border-color
badge-light-hover-border-color
badge-light-color
badge-light-hover-color
badge-light-link-color
badge-light-link-hover-color
badge dark
badge-dark-bg
badge-dark-hover-bg
badge-dark-border-color
badge-dark-hover-border-color
badge-dark-color
badge-dark-hover-color
badge-dark-link-color
badge-dark-link-hover-color
label
sticker
Badge
8
87
999K
91
21
130
130
130
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Badge as Anchor Tag
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Badge Pill
8
87
999K
91
21
130
130
130
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Badge with Links Inside
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
Badge with Text Truncate
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
label
sticker