Background Colors
Base Colors
Base 50
.bg-base-50 Use this class to set the background color of the element to match the setting for base-50
Base 100
.bg-base-100 Use this class to set the background color of the element to match the setting for base-100
Base 200
.bg-base-200 Use this class to set the background color of the element to match the setting for base-200
Base 300
.bg-base-300 Use this class to set the background color of the element to match the setting for base-300
Base 400
.bg-base-400 Use this class to set the background color of the element to match the setting for base-400
Base 500
.bg-base-500 Use this class to set the background color of the element to match the setting for base-500
Base 600
.bg-base-600 Use this class to set the background color of the element to match the setting for base-600
Base 700
.bg-base-700 Use this class to set the background color of the element to match the setting for base-700
Base 800
.bg-base-800 Use this class to set the background color of the element to match the setting for base-800
Base 900
.bg-base-900 Use this class to set the background color of the element to match the setting for base-900
Base 950
.bg-base-950 Use this class to set the background color of the element to match the setting for base-950
Brand Colors
Brand 300
.bg-brand-300 Use this class to set the background color of the element to match the setting for brand-300
Brand 400
.bg-brand-400 Use this class to set the background color of the element to match the setting for brand-400
Brand 500
.bg-brand-500 or .bg-brand Use this class to set the background color of the element to match the setting for brand-500
Brand 600
.bg-brand-600 Use this class to set the background color of the element to match the setting for brand-600
Brand 700
.bg-brand-700 Use this class to set the background color of the element to match the setting for brand-700
Brand Gradient
.bg-brand-gradient Use this class to set a gradient background from brand-300 to brand-700
Primary Colors
Primary 400
.bg-primary-400 Use this class to set the background color of the element to match the setting for primary-400
Primary 500
.bg-primary-500 or .bg-primary Use this class to set the background color of the element to match the setting for primary-500
Primary 600
.bg-primary-600 Use this class to set the background color of the element to match the setting for primary-600
Secondary Colors
Secondary 400
.bg-secondary-400 Use this class to set the background color of the element to match the setting for secondary-400
Secondary 500
.bg-secondary-500 or .bg-secondary Use this class to set the background color of the element to match the setting for secondary-500
Secondary 600
.bg-secondary-600 Use this class to set the background color of the element to match the setting for secondary-600
Tertiary Colors
Tertiary 400
.bg-tertiary-400 Use this class to set the background color of the element to match the setting for tertiary-400
Tertiary 500
.bg-tertiary-500 or .bg-tertiary Use this class to set the background color of the element to match the setting for tertiary-500
Tertiary 600
.bg-tertiary-600 Use this class to set the background color of the element to match the setting for tertiary-600
Success Colors
Success 400
.bg-success-400 Use this class to set the background color of the element to match the setting for success-400
Success 500
.bg-success-500 or .bg-success Use this class to set the background color of the element to match the setting for success-500
Success 600
.bg-success-600 Use this class to set the background color of the element to match the setting for success-600
Warning Colors
Warning 400
.bg-warning-400 Use this class to set the background color of the element to match the setting for warning-400
Warning 500
.bg-warning-500 or .bg-warning Use this class to set the background color of the element to match the setting for warning-500
Warning 600
.bg-warning-600 Use this class to set the background color of the element to match the setting for warning-600
Danger Colors
Danger 400
.bg-danger-400 Use this class to set the background color of the element to match the setting for danger-400
Danger 500
.bg-danger-500 or .bg-danger Use this class to set the background color of the element to match the setting for danger-500
Danger 600
.bg-danger-600 Use this class to set the background color of the element to match the setting for danger-600
Other Background Colors
Blur Filter Background
.blur-filter-bg Use this class to add a blurred glass effect. You must also set a slightly opaque background color to achieve this effect.
Light Background
.light-bg Use this class to inherit the background color from the “light background” color selection in the global options.
Lighter Background
.lighter-bg Use this class to inherit the background color from the “lighter background” color selection in the global options.
Subtle Background
.subtle-bg Use this class to inherit the background color from the “subtle background” color selection in the global options.
Subtle Text
.subtle-text Use this class to inherit the text color from the global options. If the .dark selector is also present, it will use the .subtle-bg color.
Primary Brand Text
.primary-brand-text Use this class to inherit the Primary Brand color from the global options.
Secondary Brand Text
.secondary-brand-text Use this class to inherit the Secondary Brand color from the global options.
Dark Mode
.dark Use this class to convert all contained content into dark mode. Helpful for rows with photo or video backgrounds.