Clay CSS
(
2.11.1
)
Navigation
home
globals
grid
typography
icons
links
utilities
alert
label
badge
sticker
button
breadcrumb
card
card interactive
card type template
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
Grid
The total space in `px` between each grid column. The default value for Clay CSS Atlas is `24px` (`padding-left: 12px` and `padding-right: 12px` for each column).
grid-gutter-width
px/rem
Sets the total number of grid columns. Liferay CE/DXP only supports a column value of 12, use with discretion.
grid-columns
grid breakpoints
Sets the minimum width for the `xs` breakpoint. The default value is `0`. If changing any `grid-breakpoints` value, you must enter a value for all.
grid-breakpoints-xs
px/rem
Sets the minimum width for the `sm` breakpoint. The default value is `576px`. If changing any `grid-breakpoints` value, you must enter a value for all.
grid-breakpoints-sm
px/rem
Sets the minimum width for the `md` breakpoint. The default value is `768px`. If changing any `grid-breakpoints` value, you must enter a value for all.
grid-breakpoints-md
px/rem
Sets the minimum width for the `lg` breakpoint. The default value is `992px`. If changing any `grid-breakpoints` value, you must enter a value for all.
grid-breakpoints-lg
px/rem
Sets the minimum width for the `xl` breakpoint. The default value is `1200px`. If changing any `grid-breakpoints` value, you must enter a value for all.
grid-breakpoints-xl
px/rem
container max widths
Sets the max-width on `.container` at screen sizes `sm` (min-width: 576px) and sets max-width `.container-fluid-max-sm`. The default value is `540px`. If changing any `container-max-widths` value, you must enter a value for all.
container-max-widths-sm
px/rem
Sets the max-width on `.container` at screen sizes `md` (min-width: 768px) and sets max-width `.container-fluid-max-md`. The default value is `720px`. If changing any `container-max-widths` value, you must enter a value for all.
container-max-widths-md
px/rem
Sets the max-width on `.container` at screen sizes `lg` (min-width: 992px) and sets max-width `.container-fluid-max-lg`. The default value is `960px`. If changing any `container-max-widths` value, you must enter a value for all.
container-max-widths-lg
px/rem
Sets the max-width on `.container` at screen sizes `xs` (min-width: 1200px) and sets max-width `.container-fluid-max-xl`. The default value is `1140px`. If changing any `container-max-widths` value, you must enter a value for all.
container-max-widths-xl
px/rem
container form lg
Enable/disable `.container-form-lg` styles. The default value is `true`.
container-form-lg-enabled
container-form-lg-padding-top
px/rem
container-form-lg-padding-right
px/rem
container-form-lg-padding-bottom
px/rem
container-form-lg-padding-left
px/rem
container-form-lg-padding-top-mobile
px/rem
container-form-lg-padding-right-mobile
px/rem
container-form-lg-padding-bottom-mobile
px/rem
container-form-lg-padding-left-mobile
px/rem
container view
container-view-enabled
container-view-breakpoint-up
container-view-padding-top
px/rem
container-view-padding-right
px/rem
container-view-padding-bottom
px/rem
container-view-padding-left
px/rem
container-view-padding-top-mobile
px/rem
container-view-padding-right-mobile
px/rem
container-view-padding-bottom-mobile
px/rem
container-view-padding-left-mobile
px/rem
globals
typography
Grid Columns
Container
Container Fluid
100%
Container Fluid Max Sm
Container Fluid Max Md
Container Fluid Max Lg
Container Fluid Max Xl
Container Form Lg
Container View
globals
typography