Clay CSS
(
2.15.1
)
Navigation
home
globals
grid
typography
icons
links
utilities
alert
label
badge
sticker
button
breadcrumb
card
card interactive
card type template
dropdown
autocomplete dropdown
input
input custom
input group
input validation
date picker
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
subnav tbar
tooltip
timeline
toggle switch
Switch Themes
Add New Theme
Add
Options
Import
Export
Delete Current Theme
Delete Everything
Use Clay Base
Breadcrumb
Sets `font-size` on `.breadcrumb-item`.
breadcrumb-font-size
px/rem
Sets `font-weight` on `.breadcrumb-item`.
breadcrumb-font-weight
Sets `padding-top` and `padding-bottom` on `.breadcrumb`.
breadcrumb-padding-y
px/rem
Sets `padding-left` and `padding-right` on `.breadcrumb.
breadcrumb-padding-x
px/rem
Sets `margin-bottom` on `.breadcrumb`.
breadcrumb-margin-bottom
px/rem
Sets `border-radius` on `.breadcrumb`.
breadcrumb-border-radius
px/rem
Sets `background-color` on `.breadcrumb`.
breadcrumb-bg
Sets `text-transform` on `.breadcrumb-link` and `.breadcrumb-item > span`.
breadcrumb-text-transform
Breadcrumb Item
Sets `padding-left` on `.breadcrumb-item + .breadcrumb-item`. This is broken don't use it.
breadcrumb-item-padding
px/rem
breadcrumb link
breadcrumb-link-align-items
breadcrumb-link-bg
breadcrumb-link-border-color
breadcrumb-link-border-style
breadcrumb-link-border-width
px/rem
breadcrumb-link-border-radius
px/rem
breadcrumb-link-box-shadow
breadcrumb-link-color
breadcrumb-link-cursor
breadcrumb-link-display
breadcrumb-link-font-family
breadcrumb-link-font-size
px/rem
breadcrumb-link-font-weight
breadcrumb-link-height
px/rem
breadcrumb-link-justify-content
breadcrumb-link-line-height
breadcrumb-link-margin-bottom
px/rem
breadcrumb-link-margin-left
px/rem
breadcrumb-link-margin-right
px/rem
breadcrumb-link-margin-top
px/rem
breadcrumb-link-max-width
px/rem
breadcrumb-link-opacity
breadcrumb-link-outline
breadcrumb-link-padding-bottom
px/rem
breadcrumb-link-padding-left
px/rem
breadcrumb-link-padding-right
px/rem
breadcrumb-link-padding-top
px/rem
breadcrumb-link-pointer-events
breadcrumb-link-text-align
breadcrumb-link-text-decoration
breadcrumb-link-text-transform
breadcrumb-link-transition
breadcrumb-link-vertical-align
breadcrumb-link-width
px/rem
breadcrumb-link-z-index
breadcrumb-link-hover-bg
breadcrumb-link-hover-border-color
breadcrumb-link-hover-color
breadcrumb-link-hover-opacity
breadcrumb-link-hover-text-decoration
breadcrumb-link-hover-z-index
breadcrumb-link-focus-bg
breadcrumb-link-focus-border-color
breadcrumb-link-focus-border-radius
px/rem
breadcrumb-link-focus-box-shadow
breadcrumb-link-focus-color
breadcrumb-link-focus-opacity
breadcrumb-link-focus-outline
breadcrumb-link-focus-text-decoration
breadcrumb-link-focus-z-index
breadcrumb-link-active-bg
breadcrumb-link-active-border-color
breadcrumb-link-active-color
breadcrumb-link-active-font-weight
breadcrumb-link-active-z-index
breadcrumb-link-active-class-bg
breadcrumb-link-active-class-border-color
breadcrumb-link-active-class-color
breadcrumb-link-active-class-font-weight
breadcrumb-link-active-class-z-index
breadcrumb-link-disabled-bg
breadcrumb-link-disabled-border-color
breadcrumb-link-disabled-box-shadow
breadcrumb-link-disabled-color
breadcrumb-link-disabled-cursor
breadcrumb-link-disabled-opacity
breadcrumb-link-disabled-pointer-events
breadcrumb-link-disabled-text-decoration
breadcrumb-link-btn-focus-box-shadow
breadcrumb-link-btn-focus-outline
breadcrumb-link-lexicon-icon-font-size
px/rem
breadcrumb-link-lexicon-icon-margin-bottom
px/rem
breadcrumb-link-lexicon-icon-margin-left
px/rem
breadcrumb-link-lexicon-icon-margin-right
px/rem
breadcrumb-link-lexicon-icon-margin-top
px/rem
Breadcrumb Active
breadcrumb-active-font-weight
breadcrumb-active-color
Breadcrumb Text Truncate
breadcrumb-text-truncate-max-width
px/rem
breadcrumb-text-truncate-icon-spacer-x
px/rem
breadcrumb-text-truncate-max-width-mobile
px/rem
Breadcrumb Divider
breadcrumb-divider-svg-icon-width
px/rem
breadcrumb-divider-svg-icon-height
px/rem
Sets the SVG icon to use as the breadcrumb divider. The value should be entered as `clay-icon(LEXICON_ICON_NAME, COLOR)` or using `clay-svg-url(THE_SVG)`. Set this to `false` and use `breadcrumb-divider` to use a character as the divider.
breadcrumb-divider-svg-icon
breadcrumb-divider-font-family
breadcrumb-divider-font-weight
breadcrumb-divider-color
The character to use as the breadcrumb divider, must be wrapped in double quotes. Set `breadcrumb-divider-svg-icon to `false` before applying this.
breadcrumb-divider
button
card
Breadcrumb
Home
Components
Breadcrumbs and Paginations
Page
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Active
Home
Components
Breadcrumbs and Paginations
Page
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Active
button
card