Clay CSS
(
2.5.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
Link
link-color
link-hover-color
link-decoration
link-hover-decoration
link primary
link-primary-align-items
link-primary-bg
link-primary-border-color
link-primary-border-radius
px/rem
link-primary-color
link-primary-display
link-primary-font-family
link-primary-font-size
px/rem
link-primary-font-weight
link-primary-height
px/rem
link-primary-justify-content
link-primary-line-height
link-primary-margin-bottom
px/rem
link-primary-margin-left
px/rem
link-primary-margin-right
px/rem
link-primary-margin-top
px/rem
link-primary-opacity
link-primary-padding-bottom
px/rem
link-primary-padding-left
px/rem
link-primary-padding-right
px/rem
link-primary-padding-top
px/rem
link-primary-text-align
link-primary-text-decoration
link-primary-text-transform
link-primary-transition
link-primary-vertical-align
link-primary-width
px/rem
link-primary-hover-bg
link-primary-hover-color
link-primary-hover-opacity
link-primary-hover-text-decoration
link-primary-focus-bg
link-primary-focus-box-shadow
link-primary-focus-color
link-primary-focus-opacity
link-primary-focus-outline
link-primary-focus-text-decoration
link-primary-active-bg
link-primary-active-border-color
link-primary-active-color
link-primary-disabled-bg
link-primary-disabled-border-color
link-primary-disabled-color
link-primary-disabled-cursor
link-primary-disabled-opacity
link-primary-disabled-pointer-events
link-primary-disabled-text-decoration
link-primary-btn-focus-box-shadow
link-primary-btn-focus-outline
link-primary-lexicon-icon-margin-bottom
px/rem
link-primary-lexicon-icon-margin-left
px/rem
link-primary-lexicon-icon-margin-right
px/rem
link-primary-lexicon-icon-margin-top
px/rem
link secondary
link-secondary-align-items
link-secondary-bg
link-secondary-border-color
link-secondary-border-radius
px/rem
link-secondary-color
link-secondary-display
link-secondary-font-family
link-secondary-font-size
px/rem
link-secondary-font-weight
link-secondary-height
px/rem
link-secondary-justify-content
link-secondary-line-height
link-secondary-margin-bottom
px/rem
link-secondary-margin-left
px/rem
link-secondary-margin-right
px/rem
link-secondary-margin-top
px/rem
link-secondary-opacity
link-secondary-padding-bottom
px/rem
link-secondary-padding-left
px/rem
link-secondary-padding-right
px/rem
link-secondary-padding-top
px/rem
link-secondary-text-align
link-secondary-text-decoration
link-secondary-text-transform
link-secondary-transition
link-secondary-vertical-align
link-secondary-width
px/rem
link-secondary-hover-bg
link-secondary-hover-color
link-secondary-hover-opacity
link-secondary-hover-text-decoration
link-secondary-focus-bg
link-secondary-focus-box-shadow
link-secondary-focus-color
link-secondary-focus-opacity
link-secondary-focus-outline
link-secondary-focus-text-decoration
link-secondary-active-bg
link-secondary-active-border-color
link-secondary-active-color
link-secondary-disabled-bg
link-secondary-disabled-border-color
link-secondary-disabled-color
link-secondary-disabled-cursor
link-secondary-disabled-opacity
link-secondary-disabled-pointer-events
link-secondary-disabled-text-decoration
link-secondary-btn-focus-box-shadow
link-secondary-btn-focus-outline
link-secondary-lexicon-icon-margin-bottom
px/rem
link-secondary-lexicon-icon-margin-left
px/rem
link-secondary-lexicon-icon-margin-right
px/rem
link-secondary-lexicon-icon-margin-top
px/rem
component link
component-link-align-items
component-link-bg
component-link-border-color
component-link-border-radius
px/rem
component-link-color
component-link-display
component-link-font-family
component-link-font-size
px/rem
component-link-font-weight
component-link-height
px/rem
component-link-justify-content
component-link-line-height
component-link-margin-bottom
px/rem
component-link-margin-left
px/rem
component-link-margin-right
px/rem
component-link-margin-top
px/rem
component-link-opacity
component-link-padding-bottom
px/rem
component-link-padding-left
px/rem
component-link-padding-right
px/rem
component-link-padding-top
px/rem
component-link-text-align
component-link-text-decoration
component-link-text-transform
component-link-transition
component-link-vertical-align
component-link-width
px/rem
component-link-hover-bg
component-link-hover-color
component-link-hover-opacity
component-link-hover-text-decoration
component-link-focus-bg
component-link-focus-box-shadow
component-link-focus-color
component-link-focus-opacity
component-link-focus-outline
component-link-focus-text-decoration
component-link-active-bg
component-link-active-border-color
component-link-active-color
component-link-disabled-bg
component-link-disabled-border-color
component-link-disabled-color
component-link-disabled-cursor
component-link-disabled-opacity
component-link-disabled-pointer-events
component-link-disabled-text-decoration
component-link-btn-focus-box-shadow
component-link-btn-focus-outline
component-link-lexicon-icon-margin-bottom
px/rem
component-link-lexicon-icon-margin-left
px/rem
component-link-lexicon-icon-margin-right
px/rem
component-link-lexicon-icon-margin-top
px/rem
Single Link
single-link-font-weight
component title
component-title-color
component-title-display
component-title-font-family
component-title-font-size
px/rem
component-title-font-weight
component-title-letter-spacing
px/rem
component-title-line-height
component-title-margin-bottom
px/rem
component-title-margin-left
px/rem
component-title-margin-right
px/rem
component-title-margin-top
px/rem
component-title-max-width
px/rem
component-title-padding-bottom
px/rem
component-title-padding-left
px/rem
component-title-padding-right
px/rem
component-title-padding-top
px/rem
component-title-text-transform
component-title-word-wrap
component title link
component-title-link-align-items
component-title-link-bg
component-title-link-border-color
component-title-link-border-radius
px/rem
component-title-link-color
component-title-link-display
component-title-link-font-family
component-title-link-font-size
px/rem
component-title-link-font-weight
component-title-link-height
px/rem
component-title-link-justify-content
component-title-link-line-height
component-title-link-margin-bottom
px/rem
component-title-link-margin-left
px/rem
component-title-link-margin-right
px/rem
component-title-link-margin-top
px/rem
component-title-link-opacity
component-title-link-padding-bottom
px/rem
component-title-link-padding-left
px/rem
component-title-link-padding-right
px/rem
component-title-link-padding-top
px/rem
component-title-link-text-align
component-title-link-text-decoration
component-title-link-text-transform
component-title-link-transition
component-title-link-vertical-align
component-title-link-width
px/rem
component-title-link-hover-bg
component-title-link-hover-color
component-title-link-hover-opacity
component-title-link-hover-text-decoration
component-title-link-focus-bg
component-title-link-focus-box-shadow
component-title-link-focus-color
component-title-link-focus-opacity
component-title-link-focus-outline
component-title-link-focus-text-decoration
component-title-link-active-bg
component-title-link-active-border-color
component-title-link-active-color
component-title-link-disabled-bg
component-title-link-disabled-border-color
component-title-link-disabled-color
component-title-link-disabled-cursor
component-title-link-disabled-opacity
component-title-link-disabled-pointer-events
component-title-link-disabled-text-decoration
component-title-link-btn-focus-box-shadow
component-title-link-btn-focus-outline
component-title-link-lexicon-icon-margin-bottom
px/rem
component-title-link-lexicon-icon-margin-left
px/rem
component-title-link-lexicon-icon-margin-right
px/rem
component-title-link-lexicon-icon-margin-top
px/rem
component subtitle
component-subtitle-color
component-subtitle-display
component-subtitle-font-family
component-subtitle-font-size
px/rem
component-subtitle-font-weight
component-subtitle-letter-spacing
px/rem
component-subtitle-line-height
component-subtitle-margin-bottom
px/rem
component-subtitle-margin-left
px/rem
component-subtitle-margin-right
px/rem
component-subtitle-margin-top
px/rem
component-subtitle-max-width
px/rem
component-subtitle-padding-bottom
px/rem
component-subtitle-padding-left
px/rem
component-subtitle-padding-right
px/rem
component-subtitle-padding-top
px/rem
component-subtitle-text-transform
component-subtitle-word-wrap
component subtitle link
component-subtitle-link-align-items
component-subtitle-link-bg
component-subtitle-link-border-color
component-subtitle-link-border-radius
px/rem
component-subtitle-link-color
component-subtitle-link-display
component-subtitle-link-font-family
component-subtitle-link-font-size
px/rem
component-subtitle-link-font-weight
component-subtitle-link-height
px/rem
component-subtitle-link-justify-content
component-subtitle-link-line-height
component-subtitle-link-margin-bottom
px/rem
component-subtitle-link-margin-left
px/rem
component-subtitle-link-margin-right
px/rem
component-subtitle-link-margin-top
px/rem
component-subtitle-link-opacity
component-subtitle-link-padding-bottom
px/rem
component-subtitle-link-padding-left
px/rem
component-subtitle-link-padding-right
px/rem
component-subtitle-link-padding-top
px/rem
component-subtitle-link-text-align
component-subtitle-link-text-decoration
component-subtitle-link-text-transform
component-subtitle-link-transition
component-subtitle-link-vertical-align
component-subtitle-link-width
px/rem
component-subtitle-link-hover-bg
component-subtitle-link-hover-color
component-subtitle-link-hover-opacity
component-subtitle-link-hover-text-decoration
component-subtitle-link-focus-bg
component-subtitle-link-focus-box-shadow
component-subtitle-link-focus-color
component-subtitle-link-focus-opacity
component-subtitle-link-focus-outline
component-subtitle-link-focus-text-decoration
component-subtitle-link-active-bg
component-subtitle-link-active-border-color
component-subtitle-link-active-color
component-subtitle-link-disabled-bg
component-subtitle-link-disabled-border-color
component-subtitle-link-disabled-color
component-subtitle-link-disabled-cursor
component-subtitle-link-disabled-opacity
component-subtitle-link-disabled-pointer-events
component-subtitle-link-disabled-text-decoration
component-subtitle-link-btn-focus-box-shadow
component-subtitle-link-btn-focus-outline
component-subtitle-link-lexicon-icon-margin-bottom
px/rem
component-subtitle-link-lexicon-icon-margin-left
px/rem
component-subtitle-link-lexicon-icon-margin-right
px/rem
component-subtitle-link-lexicon-icon-margin-top
px/rem
component action
component-action-align-items
component-action-bg
component-action-border-color
component-action-border-radius
px/rem
component-action-color
component-action-display
component-action-font-family
component-action-font-size
px/rem
component-action-font-weight
component-action-height
px/rem
component-action-justify-content
component-action-line-height
component-action-margin-bottom
px/rem
component-action-margin-left
px/rem
component-action-margin-right
px/rem
component-action-margin-top
px/rem
component-action-opacity
component-action-padding-bottom
px/rem
component-action-padding-left
px/rem
component-action-padding-right
px/rem
component-action-padding-top
px/rem
component-action-text-align
component-action-text-decoration
component-action-text-transform
component-action-transition
component-action-vertical-align
component-action-width
px/rem
component-action-hover-bg
component-action-hover-color
component-action-hover-opacity
component-action-hover-text-decoration
component-action-focus-bg
component-action-focus-box-shadow
component-action-focus-color
component-action-focus-opacity
component-action-focus-outline
component-action-focus-text-decoration
component-action-active-bg
component-action-active-border-color
component-action-active-color
component-action-disabled-bg
component-action-disabled-border-color
component-action-disabled-color
component-action-disabled-cursor
component-action-disabled-opacity
component-action-disabled-pointer-events
component-action-disabled-text-decoration
component-action-btn-focus-box-shadow
component-action-btn-focus-outline
component-action-lexicon-icon-margin-bottom
px/rem
component-action-lexicon-icon-margin-left
px/rem
component-action-lexicon-icon-margin-right
px/rem
component-action-lexicon-icon-margin-top
px/rem
Link Monospaced
link-monospaced-size
px/rem
Link Outline
link-outline-font-size
px/rem
link-outline-font-weight
link-outline-padding-y
px/rem
link-outline-padding-x
px/rem
link-outline-line-height
link-outline-border-width
px/rem
link-outline-border-radius
px/rem
link-outline-transition
link outline primary
link-outline-primary-align-items
link-outline-primary-bg
link-outline-primary-border-color
link-outline-primary-border-radius
px/rem
link-outline-primary-color
link-outline-primary-display
link-outline-primary-font-family
link-outline-primary-font-size
px/rem
link-outline-primary-font-weight
link-outline-primary-height
px/rem
link-outline-primary-justify-content
link-outline-primary-line-height
link-outline-primary-margin-bottom
px/rem
link-outline-primary-margin-left
px/rem
link-outline-primary-margin-right
px/rem
link-outline-primary-margin-top
px/rem
link-outline-primary-opacity
link-outline-primary-padding-bottom
px/rem
link-outline-primary-padding-left
px/rem
link-outline-primary-padding-right
px/rem
link-outline-primary-padding-top
px/rem
link-outline-primary-text-align
link-outline-primary-text-decoration
link-outline-primary-text-transform
link-outline-primary-transition
link-outline-primary-vertical-align
link-outline-primary-width
px/rem
link-outline-primary-hover-bg
link-outline-primary-hover-color
link-outline-primary-hover-opacity
link-outline-primary-hover-text-decoration
link-outline-primary-focus-bg
link-outline-primary-focus-box-shadow
link-outline-primary-focus-color
link-outline-primary-focus-opacity
link-outline-primary-focus-outline
link-outline-primary-focus-text-decoration
link-outline-primary-active-bg
link-outline-primary-active-border-color
link-outline-primary-active-color
link-outline-primary-disabled-bg
link-outline-primary-disabled-border-color
link-outline-primary-disabled-color
link-outline-primary-disabled-cursor
link-outline-primary-disabled-opacity
link-outline-primary-disabled-pointer-events
link-outline-primary-disabled-text-decoration
link-outline-primary-btn-focus-box-shadow
link-outline-primary-btn-focus-outline
link-outline-primary-lexicon-icon-margin-bottom
px/rem
link-outline-primary-lexicon-icon-margin-left
px/rem
link-outline-primary-lexicon-icon-margin-right
px/rem
link-outline-primary-lexicon-icon-margin-top
px/rem
link outline secondary
link-outline-secondary-align-items
link-outline-secondary-bg
link-outline-secondary-border-color
link-outline-secondary-border-radius
px/rem
link-outline-secondary-color
link-outline-secondary-display
link-outline-secondary-font-family
link-outline-secondary-font-size
px/rem
link-outline-secondary-font-weight
link-outline-secondary-height
px/rem
link-outline-secondary-justify-content
link-outline-secondary-line-height
link-outline-secondary-margin-bottom
px/rem
link-outline-secondary-margin-left
px/rem
link-outline-secondary-margin-right
px/rem
link-outline-secondary-margin-top
px/rem
link-outline-secondary-opacity
link-outline-secondary-padding-bottom
px/rem
link-outline-secondary-padding-left
px/rem
link-outline-secondary-padding-right
px/rem
link-outline-secondary-padding-top
px/rem
link-outline-secondary-text-align
link-outline-secondary-text-decoration
link-outline-secondary-text-transform
link-outline-secondary-transition
link-outline-secondary-vertical-align
link-outline-secondary-width
px/rem
link-outline-secondary-hover-bg
link-outline-secondary-hover-color
link-outline-secondary-hover-opacity
link-outline-secondary-hover-text-decoration
link-outline-secondary-focus-bg
link-outline-secondary-focus-box-shadow
link-outline-secondary-focus-color
link-outline-secondary-focus-opacity
link-outline-secondary-focus-outline
link-outline-secondary-focus-text-decoration
link-outline-secondary-active-bg
link-outline-secondary-active-border-color
link-outline-secondary-active-color
link-outline-secondary-disabled-bg
link-outline-secondary-disabled-border-color
link-outline-secondary-disabled-color
link-outline-secondary-disabled-cursor
link-outline-secondary-disabled-opacity
link-outline-secondary-disabled-pointer-events
link-outline-secondary-disabled-text-decoration
link-outline-secondary-btn-focus-box-shadow
link-outline-secondary-btn-focus-outline
link-outline-secondary-lexicon-icon-margin-bottom
px/rem
link-outline-secondary-lexicon-icon-margin-left
px/rem
link-outline-secondary-lexicon-icon-margin-right
px/rem
link-outline-secondary-lexicon-icon-margin-top
px/rem
icons
utilities
Links
Regular Anchor Tag
Link Primary
.link-primary
.link-primary.single-link
button.link-primary
button.link-primary.single-link
Link Secondary
.link-secondary
.link-secondary.single-link
button.link-secondary
button.link-secondary.single-link
Component Link
.component-link
button.component-link
Component Title
.component-title
Component Title Link
.component-title a
.component-title button
Component Subtitle
.component-subtitle
.component-subtitle a
.component-subtitle button
Component Action
Anchor
Button
Link Outline
Primary
Secondary
Link Outline Borderless
Primary
Secondary
Link Monospaced
icons
utilities