Icard/angular-clarity-master(working)/node_modules/@clr/ui/STYLES.md

Accordion

CSS Custom Properties

CSS Custom Property	Description
--clr-accordion-text-color	Text color of the accordion component.
--clr-accordion-text-color-hover	Text color of the accordion header when hovered.
--clr-accordion-text-color-active	Text color of the accordion header when active.
--clr-accordion-text-color-selected	Text color of the accordion header when selected.
--clr-accordion-active-background-color	Background color of the active accordion panel.
--clr-accordion-content-background-color	Background color of the accordion content area.
--clr-accordion-content-color	Color of the text in the accordion content area.
--clr-accordion-content-font-size	Font size of the text in the accordion content area.
--clr-accordion-header-background-color	Background color of the accordion header.
--clr-accordion-header-disabled-background-color	Background color of the accordion header when disabled.
--clr-accordion-header-hover-background-color	Background color of the accordion header on hover.
--clr-accordion-header-active-background-color	Background color of the accordion header when active.
--clr-accordion-header-font-size	Font size of the accordion header
--clr-accordion-header-button-font-size	Font size of the accordion header button
--clr-accordion-header-button-padding	Padding surrounded button used for the header.
--clr-accordion-title-font-weight	Font weight of the accordion title
--clr-accordion-title-font-size	Font size of the accordion title
--clr-accordion-error-color	Color representing an error state in the accordion.
--clr-accordion-complete-color	Color representing a completed state in the accordion.
--clr-accordion-border-color	Color of the accordion border.
--clr-accordion-border-radius	Border radius of the accordion.
--clr-accordion-border-left-color	Color of the left border in the accordion.
--clr-accordion-border-left-width	Width of the left border in the accordion.
--clr-accordion-border-left-color-complete	Color of the left border in the accordion for the complete state.
--clr-accordion-border-left-color-error	Color of the left border in the accordion for the error state.
--clr-accordion-header-left-indicator	Left indicator style for the accordion header.
--clr-accordion-header-left-current-indicator	Left indicator style for the accordion header when on current step.
--clr-accordion-header-left-complete-indicator	Left indicator style for the accordion header in the complete state.
--clr-accordion-header-left-error-indicator	Left indicator style for the accordion header in the error state.
--clr-accordion-header-button-line-height	Line height of the button used for the header.
--clr-accordion-header-gap	Gap between the icon and title text in the accordion header.
--clr-accordion-status-icon-width	Width of the icon used for the accordion arrow.
--clr-accordion-number-padding	Padding for the step number.
--clr-accordion-step-title-min-width	Sets the min-width for the step title.
--clr-accordion-step-title-font-weight	Font weight for the step title and number.
--clr-accordion-header-font-size	Header font size.
--clr-accordion-step-status-margin-left	Left margin of the status container
--clr-accordion-step-title-margin-left	Left margin of the title container

CSS Classes

Class Name	Description
clr-accordion	Accordion component.
clr-accordion-panel	Panel within the accordion.
clr-accordion-header	Header section of an accordion panel.
clr-accordion-number	Number or step indicator within the accordion.
clr-accordion-header-button	Clickable button within the accordion header.
clr-accordion-status	Status indicator within the accordion header.
clr-accordion-title	Title text within the accordion header.
clr-accordion-header-has-description	Accordion header with a description.
clr-accordion-description	Description text within the accordion header.
clr-accordion-content	Content section of an accordion panel.
clr-accordion-content-region	Content region section of an accordion panel.
clr-accordion-inner-content	Inner content section within the accordion content.
clr-accordion-angle	Angle or arrow indicator within the accordion header.
clr-accordion-error-icon	Error icon within the accordion header.
clr-accordion-complete-icon	Complete icon within the accordion header.
clr-accordion-panel-open	Open or expanded accordion panel.
clr-accordion-panel-complete	Complete state of an accordion panel.
clr-accordion-panel-error	Error state of an accordion panel.
clr-accordion-panel-disabled	Disabled state of an accordion panel.
clr-stepper-forms	Stepper forms mode for the accordion.
clr-step-button	Step button within the accordion.

Alert

CSS Custom Properties

CSS Custom Property	Description
--clr-alert-action-color	Alerts action default font color
--clr-alert-action-active-color	Alerts action default font color on focus, hover, active
--clr-alert-close-icon-color	Close icon default color
--clr-alert-close-icon-hover-color	Close icon default color on hover
--clr-alert-close-icon-opacity	Close icon default opacity
--clr-alert-close-icon-hover-opacity	Close icon default opacity on hover
--clr-app-level-alert-color	Default font color for app level alerts
--clr-app-alert-close-icon-color	Close icon default color for app level alerts
--clr-app-alert-close-icon-opacity	Close icon default opacity for app level alerts
--clr-app-alert-close-icon-hover-opacity	Close icon default opacity on hover for app level alerts
--clr-alert-borderradius	Border radius
--clr-alert-info-bg-color	Info alert background color
--clr-alert-info-font-color	Info alert font color
--clr-alert-info-border-color	Info alert border color
--clr-alert-info-icon-color	Info alert icon color
--clr-alert-info-action-color	Info alert action font color
--clr-alert-info-action-active-color	Info alert action font color on focus, hover, active
--clr-alert-info-close-icon-color	Info alert close icon color
--clr-alert-info-close-icon-opacity	Info alert close icon opacity
--clr-alert-info-close-icon-hover-color	Info alert close icon color on hover
--clr-alert-info-close-icon-hover-opacity	Info alert close icon opacity on hover
--clr-alert-success-bg-color	Info alert background color
--clr-alert-success-font-color	Info alert font color
--clr-alert-success-border-color	Info alert border color
--clr-alert-success-icon-color	Info alert icon color
--clr-alert-success-action-color	Success alert action font color
--clr-alert-success-action-active-color	Success alert action font color on focus, hover, active
--clr-alert-success-close-icon-color	Success alert close icon color
--clr-alert-success-close-icon-opacity	Success alert close icon opacity
--clr-alert-success-close-icon-hover-color	Success alert close icon color on hover
--clr-alert-success-close-icon-hover-opacity	Success alert close icon opacity on hover
--clr-alert-warning-bg-color	Info alert background color
--clr-alert-warning-font-color	Info alert font color
--clr-alert-warning-border-color	Info alert border color
--clr-alert-warning-icon-color	Info alert icon color
--clr-alert-warning-action-color	Warning alert action font color
--clr-alert-warning-action-active-color	Warning alert action font color on focus, hover, active
--clr-alert-warning-close-icon-color	Warning alert close icon color
--clr-alert-warning-close-icon-opacity	Warning alert close icon opacity
--clr-alert-warning-close-icon-hover-color	Warning alert close icon color on hover
--clr-alert-warning-close-icon-hover-opacity	Warning alert close icon opacity on hover
--clr-alert-danger-bg-color	Info alert background color
--clr-alert-danger-font-color	Info alert font color
--clr-alert-danger-border-color	Info alert border color
--clr-alert-danger-icon-color	Info alert icon color
--clr-alert-danger-action-color	Danger alert action font color
--clr-alert-danger-action-active-color	Danger alert action font color on focus, hover, active
--clr-alert-danger-close-icon-color	Danger alert close icon color
--clr-alert-danger-close-icon-opacity	Danger alert close icon opacity
--clr-alert-danger-close-icon-hover-color	Danger alert close icon color on hover
--clr-alert-danger-close-icon-hover-opacity	Danger alert close icon opacity on hover
--clr-app-alert-info-bg-color	App level info alert background color
--clr-app-alert-info-font-color	App level info alert font color
--clr-app-alert-info-border-color	App level info alert border color
--clr-app-alert-info-icon-color	App level info alert icon color
--clr-app-alert-info-action-color	App level info alert action font color
--clr-app-alert-info-action-active-color	App level info alert action font color on focus, hover, active
--clr-app-alert-info-close-icon-color	App level info alert close icon color
--clr-app-alert-info-close-icon-opacity	App level info alert close icon opacity
--clr-app-alert-info-close-icon-hover-color	App level info alert close icon color on hover
--clr-app-alert-info-close-icon-hover-opacity	App level info alert close icon opacity on hover
--clr-app-alert-warning-bg-color	App level warning alert background color
--clr-app-alert-warning-border-color	App level warning alert border color
--clr-app-alert-warning-icon-color	App level warning alert icon color
--clr-app-alert-warning-font-color	App level warning alert font color
--clr-app-alert-warning-action-color	App level warning alert action font color
--clr-app-alert-warning-action-active-color	App level warning alert action font color on focus, hover, active
--clr-app-alert-warning-close-icon-color	App level info alert close icon color
--clr-app-alert-warning-close-icon-opacity	App level info alert close icon opacity
--clr-app-alert-warning-close-icon-hover-color	App level info alert close icon color on hover
--clr-app-alert-warning-close-icon-hover-opacity	App level info alert close icon opacity on hover
--clr-app-alert-danger-bg-color	App level danger alert background color
--clr-app-alert-danger-border-color	App level danger alert border color
--clr-app-alert-danger-icon-color	App level danger alert icon color
--clr-app-alert-danger-font-color	App level danger alert font color
--clr-app-alert-danger-action-color	App level danger alert action font color
--clr-app-alert-danger-action-active-color	App level danger alert action font color on focus, hover, active
--clr-app-alert-danger-close-icon-color	App level info alert close icon color
--clr-app-alert-danger-close-icon-opacity	App level info alert close icon opacity
--clr-app-alert-danger-close-icon-hover-color	App level info alert close icon color on hover
--clr-app-alert-danger-close-icon-hover-opacity	App level info alert close icon opacity on hover
--clr-app-alert-success-border-color	App level success alert border color
--clr-app-alert-success-bg-color	App level success alert background color
--clr-app-alert-success-icon-color	App level success alert icon color
--clr-app-alert-success-font-color	App level success alert font color
--clr-app-alert-success-action-color	App level success alert action font color
--clr-app-alert-success-action-active-color	App level success alert action font color on focus, hover, active
--clr-app-alert-success-close-icon-color	App level info alert close icon color
--clr-app-alert-success-close-icon-opacity	App level info alert close icon opacity
--clr-app-alert-success-close-icon-hover-color	App level info alert close icon color on hover
--clr-app-alert-success-close-icon-hover-opacity	App level info alert close icon opacity on hover
--clr-app-alert-pager-text-color	Alert pager default font color
--clr-app-alert-info-pager-bg-color	Info alert pager font color
--clr-app-alert-warning-pager-bg-color	Warning alert pager font color
--clr-app-alert-danger-pager-bg-color	Danger alert pager font color
--clr-app-alert-success-pager-bg-color	Danger success pager font color
--clr-alert-padding	Padding of the alert
--clr-alert-borderradius	Alert border radius
--clr-alert-actions-spacing	Alert actions spacing
--clr-alert-item-margin-bottom	Alert item margin bottom
--clr-alert-line-height	Alert line height
--clr-alert-sm-line-height	Alert small line height
--clr-alert-app-padding	App level alert padding
--clr-alert-items-gap	Gap between items in the alert
--clr-alert-sm-line-height	Small alert line height
--clr-alert-sm-font-size	Small alert font size
--clr-alert-sm-letter-spacing	Small alert letter spacing
--clr-alert-sm-font-weight	Small alert font weight
--clr-alert-sm-icon-size	Small alert icon size

CSS Classes

Class name	Description
alert	Main alert element
alert-info	Addition to alert class to present it as info alert
alert-success	Addition to alert class to present it as success alert
alert-warning	Addition to alert class to present it as warning alert
alert-danger	Addition to alert class to present it as danger alert
alert-app-level	Addition to alert class to present it as app-level alert
alert-items	Wrapper for elements with class alert-item
alert-item	Element for messages in alert
alert-text	Text inside alert items
alert-actions	Wrapper for actions
alert-action	Action element
close	Close element X
alert-icon	Icon used in alert items
alert-icon-wrapper	Wrapper for icons
alert-sm	Alert with a smaller size
alert-hidden	Hide alert
alerts	Main alerts element *should be used with alert-info or equivalent class
alerts-pager	Alerts pager element
alerts-pager-button	Pager button
alerts-pager-control	Pager controls wrapper
alerts-page-down	Page down wrapper
alerts-page-up	Page up wrapper
alerts-pager-text	Page identifier in pager

Badge

CSS Custom Properties

CSS Custom Property	Description
--clr-badge-background-color	Background color
--clr-badge-color	Font color
--clr-badge-info-bg-color	Info badge background color
--clr-badge-info-color	Info badge text color
--clr-badge-success-bg-color	Success badge background color
--clr-badge-success-color	Success badge text color
--clr-badge-warning-bg-color	Warning badge background color
--clr-badge-warning-color	Warning badge text color
--clr-badge-danger-bg-color	Danger badge background color
--clr-badge-danger-color	Danger badge text color
--clr-badge-gray-bg-color	Gray badge background color
--clr-badge-gray-color	Gray badge text color
--clr-badge-purple-bg-color	Purple badge background color
--clr-badge-purple-color	Purple badge text color
--clr-badge-blue-bg-color	Blue badge background color
--clr-badge-blue-color	Blue badge text color
--clr-badge-orange-bg-color	Orange badge background color
--clr-badge-orange-color	Orange badge text color
--clr-badge-light-blue-bg-color	Light-blue badge background color
--clr-badge-light-blue-color	Light-blue badge text color
--clr-badge-padding	Padding
--clr-badge-height	Height
--clr-badge-min-width	Min width
--clr-badge-border-radius	Border radius
--clr-badge-font-size	Font size
--clr-badge-font-weight	Font weight
--clr-badge-letter-spacing	Letter spacing
--clr-badge-line-height	Line height
--clr-badge-font-family	Font family

CSS Classes

Class name	Description
badge	Main badge element. All of the following require this class as well
badge-info	Info badge
badge-success	Success badge
badge-danger	Danger badge
badge-warning	Warning badge
badge-gray	Gray badge
badge-purple	Purple badge
badge-blue	Blue badge
badge-orange	Orange badge
badge-light-blue	Light-blue badge

Button

CSS Custom Properties

CSS Custom Property	Description
--clr-btn-vertical-margin	Button top and bottom margin.
--clr-btn-horizontal-margin	Button left and right margin.
--clr-btn-vertical-padding	Button top and bottom padding.
--clr-btn-horizontal-padding	Button left and right padding.
--clr-btn-padding	Button padding.
--clr-btn-height	Button height.
--clr-btn-height-sm	Small button height.
--clr-btn-font-weight	Button text font weight.
--clr-btn-border-radius	Button border radius.
--clr-btn-border-width	Button border width.
--clr-btn-outline-bg-color	Default outline button background color.
--clr-btn-default-color	Default button text color.
--clr-btn-default-bg-color	Default button background color.
--clr-btn-default-border-color	Default button border color.
--clr-btn-default-hover-color	Default button :hover text color.
--clr-btn-default-hover-bg-color	Default button :hover background color.
--clr-btn-default-box-shadow-color	Default button :active box shadow.
--clr-btn-default-disabled-color	Default button disabled text color.
--clr-btn-default-disabled-bg-color	Default button disabled background color.
--clr-btn-default-disabled-border-color	Default button disabled border color.
--clr-btn-default-outline-color	Default outline button text color.
--clr-btn-default-outline-bg-color	Default outline button background color.
--clr-btn-default-outline-border-color	Default outline button border color.
--clr-btn-default-outline-hover-color	Default outline button :hover text color.
--clr-btn-default-outline-hover-bg-color	Default outline button :hover background color.
--clr-btn-default-outline-box-shadow-color	Default outline button :active box shadow.
--clr-btn-default-outline-disabled-color	Default outline button disabled text color.
--clr-btn-default-outline-disabled-bg-color	Default outline button disabled background color.
--clr-btn-default-outline-disabled-border-color	Default outline button disabled border color.
--clr-btn-primary-color	Primary button text color.
--clr-btn-primary-bg-color	Primary button background color.
--clr-btn-primary-border-color	Primary button border color.
--clr-btn-primary-hover-color	Primary button :hover text color.
--clr-btn-primary-hover-bg-color	Primary button :hover background color.
--clr-btn-primary-box-shadow-color	Primary button :active box shadow.
--clr-btn-primary-disabled-color	Primary button disabled text color.
--clr-btn-primary-disabled-bg-color	Primary button disabled color.
--clr-btn-primary-disabled-border-color	Primary button disabled border color.
--clr-btn-success-color	Success button text color.
--clr-btn-success-bg-color	Success button background color.
--clr-btn-success-border-color	Success button border color.
--clr-btn-success-hover-color	Success button :hover text color.
--clr-btn-success-hover-bg-color	Success button :hover background color.
--clr-btn-success-box-shadow-color	Success button :active box shadow.
--clr-btn-success-disabled-color	Success button disabled text color.
--clr-btn-success-disabled-bg-color	Success button disabled color.
--clr-btn-success-disabled-border-color	Success button disabled border color.
--clr-btn-success-outline-color	Success outline button text color.
--clr-btn-success-outline-bg-color	Success outline button background color.
--clr-btn-success-outline-border-color	Success outline button border color.
--clr-btn-success-outline-hover-color	Success outline button :hover text color.
--clr-btn-success-outline-hover-bg-color	Success outline button :hover background color.
--clr-btn-success-outline-box-shadow-color	Success outline button :active box shadow.
--clr-btn-success-outline-disabled-color	Success outline button disabled text color.
--clr-btn-success-outline-disabled-bg-color	Success outline button disabled background color.
--clr-btn-success-outline-disabled-border-color	Success outline button disabled border color.
--clr-btn-danger-color	Danger button text color.
--clr-btn-danger-bg-color	Danger button background color.
--clr-btn-danger-border-color	Danger button border color.
--clr-btn-danger-hover-color	Danger button :hover text color.
--clr-btn-danger-hover-bg-color	Danger button :hover background color.
--clr-btn-danger-box-shadow-color	Danger button :active box shadow.
--clr-btn-danger-disabled-color	Danger button disabled text color.
--clr-btn-danger-disabled-bg-color	Danger button disabled color.
--clr-btn-danger-disabled-border-color	Danger button disabled border color.
--clr-btn-danger-outline-color	Danger outline button text color.
--clr-btn-danger-outline-bg-color	Danger outline button background color.
--clr-btn-danger-outline-border-color	Danger outline button border color.
--clr-btn-danger-outline-hover-color	Danger outline button :hover text color.
--clr-btn-danger-outline-hover-bg-color	Danger outline button :hover background color.
--clr-btn-danger-outline-box-shadow-color	Danger outline button :active box shadow.
--clr-btn-danger-outline-disabled-color	Danger outline button disabled text color.
--clr-btn-danger-outline-disabled-bg-color	Danger outline button disabled background color.
--clr-btn-danger-outline-disabled-border-color	Danger outline button disabled border color.
--clr-btn-warning-color	Warning button text color.
--clr-btn-warning-bg-color	Warning button background color.
--clr-btn-warning-border-color	Warning button border color.
--clr-btn-warning-hover-color	Warning button :hover text color.
--clr-btn-warning-hover-bg-color	Warning button :hover background color.
--clr-btn-warning-box-shadow-color	Warning button :active box shadow.
--clr-btn-warning-disabled-color	Warning button disabled text color.
--clr-btn-warning-disabled-bg-color	Warning button disabled color.
--clr-btn-warning-disabled-border-color	Warning button disabled border color.
--clr-btn-warning-outline-color	Warning outline button text color.
--clr-btn-warning-outline-bg-color	Warning outline button background color.
--clr-btn-warning-outline-border-color	Warning outline button border color.
--clr-btn-warning-outline-hover-color	Warning outline button :hover text color.
--clr-btn-warning-outline-hover-bg-color	Warning outline button :hover background color.
--clr-btn-warning-outline-box-shadow-color	Warning outline button :active box shadow.
--clr-btn-warning-outline-disabled-color	Warning outline button disabled text color.
--clr-btn-warning-outline-disabled-bg-color	Warning outline button disabled background color.
--clr-btn-warning-outline-disabled-border-color	Warning outline button disabled border color.
--clr-btn-link-color	Link button text color.
--clr-btn-link-bg-color	Link button background color.
--clr-btn-link-border-color	Link button border color.
--clr-btn-link-hover-color	Link button :hover text color.
--clr-btn-link-hover-bg-color	Link button :hover background color.
--clr-btn-link-disabled-color	Link button disabled text color.
--clr-btn-link-disabled-bg-color	Link button disabled background color.
--clr-btn-link-disabled-border-color	Link button disabled border color.
--clr-btn-inverse-color	Inverse button text color.
--clr-btn-inverse-bg-color	Inverse button background color.
--clr-btn-inverse-border-color	Inverse button border color.
--clr-btn-inverse-hover-color	Inverse button :hover text color.
--clr-btn-inverse-hover-bg-color	Inverse button :hover background color.
--clr-btn-inverse-box-shadow-color	Inverse button :active box shadow.
--clr-btn-inverse-disabled-color	Inverse button disabled text color.
--clr-btn-inverse-disabled-bg-color	Inverse button disabled background color.
--clr-btn-inverse-disabled-border-color	Inverse button disabled border color.
--clr-btn-icon-disabled-color	Icon button disabled text color.
--clr-btn-group-focus-outline	:focus outline color of a checkbox or radio inside a button group button.
--clr-btn-default-checked-color	Checked checkbox default button text color.
--clr-btn-default-checked-bg-color	Checked checkbox default button background color.
--clr-btn-default-outline-checked-color	Checked checkbox default outline button text color.
--clr-btn-default-outline-checked-bg-color	Checked checkbox default outline button background color.
--clr-btn-primary-checked-color	Checked checkbox primary button text color.
--clr-btn-primary-checked-bg-color	Checked checkbox primary button background color.
--clr-btn-success-checked-color	Checked checkbox success button text color.
--clr-btn-success-checked-bg-color	Checked checkbox success button background color.
--clr-btn-success-outline-checked-color	Checked checkbox success outline button text color.
--clr-btn-success-outline-checked-bg-color	Checked checkbox success outline button background color.
--clr-btn-danger-checked-color	Checked checkbox danger button text color.
--clr-btn-danger-checked-bg-color	Checked checkbox danger button background color.
--clr-btn-danger-outline-checked-color	Checked checkbox danger outline button text color.
--clr-btn-danger-outline-checked-bg-color	Checked checkbox danger outline button background color.
--clr-btn-warning-checked-color	Checked checkbox warning button text color.
--clr-btn-warning-checked-bg-color	Checked checkbox warning button background color.
--clr-btn-warning-outline-checked-color	Checked checkbox warning outline button text color.
--clr-btn-warning-outline-checked-bg-color	Checked checkbox warning outline button background color.
--clr-btn-link-checked-color	Checked checkbox link button text color.
--clr-btn-link-checked-bg-color	Checked checkbox link button background color.
--clr-btn-inverse-checked-color	Checked checkbox inverse button text color.
--clr-btn-inverse-checked-bg-color	Checked checkbox inverse button background color.

CSS Classes

Class name	Description
btn	Button. All of the following require this class as well.
btn-info	Info button.
btn-primary	Primary button.
btn-success	Success button.
btn-warning	Warning button.
btn-danger	Danger button.
btn-outline	Outline button.
btn-info-outline	Outline info button.
btn-success-outline	Outline success button.
btn-warning-outline	Outline warning button.
btn-danger-outline	Outline danger button.
btn-small	Small button.
btn-block	Block, full-width button.
btn-inverse	Inverse button.
btn-icon	Icon button.
btn-link	Link button.

Button group

CSS Classes

Class name	Description
btn-group	Button group element class.
btn-group-overflow	Overflow class for button group element.
btn-link	Used with btn-group for flat buttons group.
btn-icon-link	Used with btn-group and btn-link for flat icon buttons group.
clr-icon-title	Button icon title. Visible inside a menu and hidden outside for a11y so it can be read from screen reader.
clr-button-group-menu	Internal class for button group menu content.

Card

CSS Custom Properties

CSS Custom Property	Description
--clr-card-bg-color	Card background color.
--clr-card-divider-color	Card divider color.
--clr-card-title-color	Card text color header.
--clr-card-title-font-weight	Card thickness title.
--clr-card-border-width	Card border width.
--clr-card-border-radius	Card border radius.
--clr-card-border-color	Card border color.
--clr-card-box-shadow-color	Card background shadow color.
--clr-card-clickable-border-color	Clickable cards background color.
--clr-card-clickable-box-shadow-color	Clickable cards shadow color.

CSS Classes

Class	Description
card	A card presents high-level information and can guide the user toward related actions and details.
clickable	Adding the .clickable to a card class makes the entire card clickable, initiating a single action.
card-img	A .card-img can be placed anywhere in the card, or it can occupy the entire card.
card-header	The card's heading element.
card-block	The card's main content.
card-title	A card block's heading element.
card-text	A card block's text content.
list	An ordered (ol) or unordered (ul) list within a card block.
list-unstyled	List with no markers within a card block.
list-group	Full-width list with dividers for each item within a card block.
list-group-item	Item within a list group.
card-divider	Divider within card block.
card-media-block	A card media block contains and image and description.
wrap	Adding the wrap class to a .card-media-block element causes the description to be below the image instead of to the right.
card-media-image	An img within a card media block.
card-media-description	The description within a card media block. It can contain a title and text.
card-media-title	The title of a card media block description.
card-media-text	Text within a card media block description.
card-footer	The footer can contain two actions in form of a button or link. For more actions, use a dropdown.
card-link	A link within a card footer.

Checkbox

CSS Custom Properties

CSS Custom Property	Description
--clr-forms-checkbox-label-color	Font color of checkbox label
--clr-forms-checkbox-background-color	Background color of checkbox
--clr-forms-checkbox-indeterminate-border-color	Border color of indeterminate checkbox
--clr-forms-checkbox-mark-color	Color of checkbox mark
--clr-forms-checkbox-disabled-background-color	Background color of disabled checkbox
--clr-forms-checkbox-disabled-mark-color	Color of disabled checkbox mark
--clr-forms-checkbox-border-radius	Border radius of checkbox
--clr-forms-checkbox-line-height	Line height of the checkbox button wrapper
--clr-forms-checkbox-padding-left	Left padding for checkbox label element
--clr-forms-checkbox-label-height	Height of the checkbox label element

CSS Classes

Class name	Description
clr-checkbox-wrapper	Wrapper class for the checkbox component

Combobox

CSS Custom Properties

CSS Custom Property	Description
--clr-combobox-trigger-color	Combobox trigger color
--clr-combobox-font-size	Combobox font size
--clr-combobox-border-color	Combobox border color
--clr-combobox-border-radius	Combobox corners radius
--clr-combobox-input-background-color	Combobox input background color
--clr-combobox-pill-background-color	Background color of the selected items pills in a multiselect combobox
--clr-combobox-pill-border-color	Border color of the selected items pills in a multiselect combobox
--clr-combobox-pill-border-radius	Border radius of the selected items pills in a multiselect combobox
--clr-combobox-pill-font-color	Text color of the selected items pills in a multiselect combobox
--clr-combobox-filter-highlight	Combobox filter highlight color
--clr-combobox-min-height	Minimal height of the combobox
--clr-combobox-font-size	Combobox input font size
--clr-combobox-font-weight	Combobox input font weight
--clr-combobox-line-height	Combobox input line height
--clr-combobox-text-color	Text color for the combobox input
--clr-combobox-border-radius	Combobox border radius
--clr-combobox-padding-left	Combobox input left padding
--clr-combobox-trigger-padding-left	Combobox trigger/caret left padding
--clr-combobox-trigger-padding-right	Combobox trigger/caret right padding
--clr-combobox-trigger-gap	Gap between the input and caret
--clr-combobox-trigger-font-color	Combobox trigger/caret font color
--clr-combobox-hover-background-color	Background color when hovered or focused
--clr-combobox-active-background-color	Background color of the element selected by keyboard
--clr-combobox-pill-padding	Combobox multiselect pills padding
--clr-combobox-pill-margin	Margin for the combobox multiselection pill element
--clr-combobox-pill-height	Height of the combobox pill element
--clr-combobox-pill-remove-icon-color	Color of the remove pill icon
--clr-combobox-caret-icon-size	Size of the combobox caret icon icon

CSS Classes

Class name	Description
clr-combobox	Combobox element class
clr-combobox-container	Container class for the combobox
clr-combobox-input	Combobox input element
clr-combobox-options	List of combobox options
clr-combobox-option	An option form the combobox suggestion list
clr-combobox-trigger	Combobox trigger/caret button
label-combobox-pill	Combobox selection pill element
clr-combobox-remove-btn	Item remove button for multiselect combobox
clr-combobox-pill-content	Content of the combobox selection pill element
clr-combobox-disabled	Disabled combobox indicator
clr-combobox-wrapper	Internal wrapper class
clr-combobox-input-wrapper	Internal input wrapper class
clr-combobox-form-control	Internal class used for label positioning calculation

Datagrid

CSS Properties

Property Name	Description
--clr-datagrid-font-color	Not used.
--clr-datagrid-default-border-color	Default border color for datagrid detail pane.
--clr-datagrid-icon-color	Default color for expandable, detail caret icons and action toggle icon.
--clr-datagrid-row-hover-color	Background color for datagrid row on hover and active action items.
--clr-datagrid-row-hover-font-color	Font color for active action items.
--clr-datagrid-action-toggle-color	Datagrid action toggle icon color when active.
--clr-datagrid-pagination-btn-color	Color for pagination buttons.
--clr-datagrid-pagination-btn-disabled-color	Color for disabled pagination buttons.
--clr-datagrid-pagination-btn-disabled-opacity	Opacity for disabled pagination buttons.
--clr-datagrid-pagination-input-border-color	Border color for the pagination input field.
--clr-datagrid-pagination-input-border-focus-color	Border color for the pagination input field when focused.
--clr-datagrid-popover-bg-color	Background color for popovers within the datagrid.
--clr-datagrid-popover-border-color	Border color for popovers within the datagrid.
--clr-datagrid-action-popover-hover-color	Background color of action items on hover and focus.
--clr-datagrid-row-selected	Font color for selected rows.
--clr-datagrid-column-switch-header-font-color	Font color for column switch header button icons.
--clr-datagrid-column-switch-header-font-hover-color	Font color for column switch button icons on hover.
--clr-datagrid-detail-caret-icon-open-bg-color	Background color for opened detail caret button.
--clr-datagrid-detail-caret-icon-open-icon-color	Color of opened detail caret icon.
--clr-datagrid-placeholder-color	Font color for empty datagrid placeholder.
--clr-datagrid-placeholder-font-size	Font size for empty datagrid placeholder.
--clr-datagrid-loading-background	Background color for the loading state of the datagrid.
--clr-datagrid-column-toggle-border-color	Border color for column toggle buttons.
--clr-datagrid-column-toggle-fill-color	Background color for column toggle buttons.
--clr-datagrid-column-toggle-text-color	Text color for column toggle buttons.
--clr-datagrid-column-toggle-border-hover-color	Border color for column toggle buttons when hovered.
--clr-datagrid-column-toggle-fill-hover-color	Background color for column toggle buttons when hovered.
--clr-datagrid-column-toggle-text-hover-color	Text color for column toggle buttons when hovered.
--clr-datagrid-column-toggle-border-active-color	Border color for active column toggle buttons.
--clr-datagrid-column-toggle-fill-active-color	Background color for active column toggle buttons.
--clr-datagrid-column-toggle-text-active-color	Text color for active column toggle buttons.
--clr-datagrid-popovers-box-shadow-color	Not used.
--clr-datagrid-popover-padding	Padding for popovers
--clr-datagrid-popover-font-color	Font color for popovers.
--clr-datagrid-pagination-input-size	Width and Height for pagination input
--clr-datagrid-detail-header-padding	Padding for detail header
--clr-datagrid-detail-header-title-padding	Padding for detail header title
--clr-datagrid-detail-pane-close-btn-margin	Margin for detail close button
--clr-datagrid-detail-pane-close-padding	Padding for detail heade close wrapper
--clr-datagrid-detail-body-padding	Padding for detail content body
--clr-datagrid-detail-pane-close-btn-min-width	Minimal width for detail close button
--clr-datagrid-detail-pane-content-padding	Padding for detail panel content
--clr-datagrid-detail-pane-close-icon-size	Width and Height for detail close icon
--clr-datagrid-detail-body-text-color	Font color for detail body
--clr-datagrid-detail-header-title-color	Font color for detail header title
--clr-datagrid-detail-pane-bg-color	Background color for detail panel
--clr-datagrid-detail-pane-border-color	Border color for detail panel
--clr-datagrid-footer-padding	Footer padding
--clr-datagrid-placeholder-padding	Placeholder padding
--clr-datagrid-placeholder-gap	Gap size for placeholder elements
--clr-datagrid-placeholder-font-weight	Font weight for placeholder
--clr-datagrid-placeholder-line-height	Line height for placeholder
--clr-datagrid-placeholder-letter-spacing	Letter spacing for placeholder
--clr-datagrid-placeholder-background-color	Background color for placeholder
--clr-datagrid-column-separator-height	Height for column separator
--clr-datagrid-filter-toggle-size	Width and Height for filter toggle button
--clr-datagrid-row-active-color	Background color for active state on rows
--clr-datagrid-footer-line-height	Line height for footer
--clr-datagrid-fixed-column-size	Size for fixed columns inside datagrid

CSS Classes

Class Name	Description
action-item	Action item within the datagrid's overflow container.
clr-col-null	Prevents clr-col-* classes inside clrForm wrapper.
datagrid-action-overflow	Overflow container for action items.
datagrid-cell	Single cell within a row of the datagrid.
datagrid-column	Main datagrid column element.
datagrid-column-flex	Flex container for the column content.
datagrid-column-handle	Button for resizing the column.
datagrid-column-resize-tracker	Visual indicator for column resizing.
datagrid-column-separator	Separator between columns.
datagrid-container	Internal class set if there are no datagrid cells inside row detail.
datagrid-detail-body	Main datagrid detail body element.
datagrid-detail-header	Main datagrid detail header element.
datagrid-empty	Internal class set on datagrid placeholder if datagrid is empty.
datagrid-expandable-caret	Container for the expandable rows caret button and for datagrid column header for carets.
datagrid-expandable-caret-button	Expandable caret button within the expandable cell.
datagrid-filter	Container for the filter popover.
datagrid-filter-close-wrapper	Wrapper for the close button in the filter popover.
datagrid-filter-open	Applied to the filter toggle button when open.
datagrid-filter-toggle	Toggle button for opening/closing the filter popover.
datagrid-filtered	Applied to the filter toggle button when active.
datagrid-fixed-column	Fixed column.
datagrid-footer	Main datagrid footer element.
datagrid-footer-description	Wrapper for datagrid footer content.
datagrid-footer-select	Select checkbox in the footer.
datagrid-header	Header section of the datagrid.
datagrid-calculate-mode	Internal class used while datagrid is in calculation mode.
datagrid-placeholder	Container for the datagrid placeholder image and content.
datagrid-placeholder-container	Main datagrid placholder element.
datagrid-placeholder-content	Wrapper for datagrid placeholder content.
datagrid-placeholder-image	Image in the placeholder.
datagrid-row	Main datagrid row element.
datagrid-row-actions	Container for the row actions.
datagrid-row-clickable	Internal class used for calculation mode and on wrapper element for the row in selection mode.
datagrid-row-detail	Main datagrid row detail element.
datagrid-row-flex	Internal class for adding flex layout to a row.
datagrid-row-master	Internal class used for calculcation mode and wrapper element for row content.
datagrid-row-scrollable	Scrollable container for the row.
datagrid-scrolling-cells	Container for the scrolling cells within the row.
datagrid-select	Container for the selection checkbox/radio buttons.
datagrid-signpost-trigger	Internal class for datagrid cells if there are signposts in it.
is-open	Applied to the detail caret button when detail row open.
is-replaced	Applied to the scrollable container when row replaced.
pagination	Pagination element.
pagination-current	Current page input.
pagination-description	Pagination description.
pagination-description-compact	The compact description when detail view is opened.
pagination-first	First page button.
pagination-last	Last page button.
pagination-list	Pagination buttons.
pagination-next	Next page button.
pagination-previous	Previous page button.
pagination-size	Wrapper for datagrid page size element.
sort-icon	Sort icon for sortable columns.

Datepicker

CSS Custom Properties

CSS Custom Property	Description
--clr-calendar-background-color	Background color of the calendar
--clr-calendar-border-color	Border color of the calendar
--clr-datepicker-trigger-color	Used in legacy layout which was removed
--clr-datepicker-trigger-hover-color	Used in legacy layout which was removed
--clr-calendar-btn-color	Calendar Buttons color
--clr-calendar-btn-hover-focus-color	Calendar Buttons hover and focus color
--clr-calendar-picker-btn-font-size	Font size for calendar month and year buttons
--clr-calendar-picker-btn-font-weight	Font weight for calendar month and year buttons
--clr-calendar-today-date-cell-color	Font color for today date
--clr-calendar-today-date-cell-font-weight	Font weight for today date
--clr-calendar-active-cell-background-color	Active cell background color
--clr-calendar-active-cell-color	Active cell font color
--clr-calendar-active-focus-cell-background-color	Focused cell background color
--clr-day-font-size	Week day font size. Depricated use clr-calendar-weekday-font-size
--clr-calendar-container-border-width	Calendar container border width
--clr-calendar-container-border-radius	Calendar container border radius
--clr-calendar-container-padding	Calendar container padding
--clr-calendar-container-margin-top	Calendar container margin top
--clr-calendar-container-width	Calendar container width
--clr-calendar-container-height	Calendar container height
--clr-calendar-cell-border-radius	Calendar cell border radius
--clr-calendar-cell-width-height	Calendar cell width and height
--clr-calendar-month-year-button-width	Calendar month and year button width
--clr-calendar-month-year-cell-height	Calendar month and year cell height
--clr-calendar-month-year-cell-width	Calendar month and year cell width
--clr-calendar-year-picker-gap	Calendar year picker gap
--clr-calendar-weekday-font-size	Calendar week day font size
--clr-calendar-weekday-font-weight	Calendar week day font weight
--clr-calendar-weekday-line-height	Calendar week day line height
--clr-calendar-weekday-letter-spacing	Calendar week day letter spacing
--clr-calendar-day-font-size	Calendar day font size
--clr-calendar-day-font-weight	Calendar day font weight
--clr-calendar-day-line-height	Calendar day line height
--clr-calendar-day-letter-spacing	Calendar day letter spacing
--clr-calendar-today-date-cell-font-weight	Calendar toady font weight
--clr-calendar-month-year-font-size-	Calendar month year font size
--clr-calendar-month-year-font-weight	Calendar month year font weight
--clr-calendar-month-year-line-height	Calendar month year line height
--clr-calendar-month-year-letter-spacing	Calendar month year letter spacing
--clr-calendar-picker-btn-font-size	Calendar picker button font size
--clr-calendar-picker-btn-font-weight	Calendar picker button font weight
--clr-calendar-picker-btn-line-height	Calendar picker button line height
--clr-calendar-picker-btn-letter-spacing	Calendar picker button letter spacing

CSS Classes

Class name	Description
datepicker	Main date picker element
date-container	Not used
datepicker-trigger	Not used. Marked as legacy and to be removed
datepicker-trigger-icon	Not used. Marked as legacy and to be removed
date-input	Not used
calendar-header	Calendar header
calendar-table	Calendar table
calendar-row	Calendar row
calendar-cell	Calendar cell
calendar-btn	Calendar button
calendar-pickers	Month and year picker buttons wrapper
calendar-switchers	Month change and today buttons wrapper
daypicker	Main day picker element
day	Main element for day button
day-btn	Day button inside calendar
weekday	Weekday table heading
weekdays	Weekdays table row wrapper
month	Month buttons inside month picker
monthpicker	Main month picker element
monthpicker-trigger	Month picker button trigger
year	Year buttons inside year picker
years	Wrapper for year buttons inside year picker
yearpicker	Main year picker element
yearpicker-trigger	Year picker button trigger
is-today	Set on day button which is equal to current date
is-excluded	Set on day button if the date is excluded
is-selected	Selected day button
is-disabled	Disabled day button
switcher	Switcher button
year-switchers	Wrapper for switcher buttons inside year picker

Dropdown

CSS Custom Properties

CSS Custom Property	Description
--clr-dropdown-active-text-color	The text color of the active dropdown item.
--clr-dropdown-active-background-color	The background color of the active dropdown item.
--clr-dropdown-bg-color	The background color of the dropdown.
--clr-dropdown-border-color	The border color of the dropdown.
--clr-dropdown-divider-color	The color of the divider between dropdown items.
--clr-dropdown-divider-border-width	Width of the dropdown items separator.
--clr-dropdown-divider-margin	Margin of the dropdown divider.
--clr-dropdown-child-border-color	The border color of child dropdown items.
--clr-dropdown-bg-hover-color	The background color of the hovered dropdown item.
--clr-dropdown-selection-color	The color of the selected dropdown item.
--clr-dropdown-box-shadow	The box shadow of the dropdown.
--clr-dropdown-text-color	The text color of the dropdown.
--clr-dropdown-header-color	The color of the dropdown menu header.
--clr-dropdown-header-font-weight	Font weight of the dropdown menu header.
--clr-dropdown-header-font-size	Font size of the dropdown menu header.
--clr-dropdown-header-line-height	Line height of the dropdown menu header.
--clr-dropdown-header-padding	Padding of the dropdown menu header.
--clr-dropdown-header-letter-spacing	Letter spacing of the dropdown menu header.
--clr-dropdown-item-color	The color of the dropdown item.
--clr-dropdown-item-font-weight	Font weight of the dropdown item.
--clr-dropdown-item-padding	Single menu item padding
--clr-dropdown-items-padding	Menu items list overall padding
--clr-dropdown-border-radius	Menu items list border radius
--clr-dropdown-caret-icon-size	Size of the dropdown menu expander caret.
--clr-dropdown-subsection-offset	Offset of elements in menu with header.

CSS Classes

Class	Description
dropdown	The overall dropdown component.
dropdown-toggle	The toggle element inside the dropdown component.
dropdown-menu	The dropdown menu container.
dropdown-header	The header element inside the dropdown menu.
dropdown-item	The individual items in the dropdown menu.
expandable	The expandable dropdown item.
dropdown-divider	The divider element in the dropdown menu.
disabled	Applies the disabled state to the dropdown item.

Grid layout

CSS Classes

Class name	Description
clr-row	Styles a flex row of columns
clr-justify-content-#{POSITION}	Sets justify-content property to #{POSITION}, POSITION is one of 'start', 'center', 'end'
clr-justify-content-between	Sets justify-content property to 'space-between'
clr-justify-content-around	Sets justify-content property to 'space-around'
clr-align-items-start	Horizontally aligns items in a row towards the beginning
clr-align-items-center	Centers items horizontally in a row
clr-align-items-end	Aligns items in a row to the right end
clr-align-items-baseline	Aligns items in a row based on their baselines
clr-align-items-stretch	Expands and evenly distributes items in a row
clr-align-content-#{POSITION}	Aligns content of multiline flex rows to #{POSITION}, POSITION is any of 'start', 'center', 'end'
clr-align-content-between	Evenly distributes the space between the flex columns in a multiline container, leaving no space at the beginning or end of the container
clr-align-content-around	Evenly distributes the space around the flex columns in a multiline container, creating equal spacing between and around the lines
clr-align-content-stretch	Stretches the flex columns in a multiline flex container, causing them to expand vertically and fill the available space
clr-break-row	Breaks the columns in a row with a new line
clr-clearfix	Clears floated content within a container
clr-no-gutters	Removes gaps between column content in a row
clr-col	Styles a column within a row
clr-col-#{SIZE}	Styles a column that spans to #{SIZE}/12 of the row's width, SIZE is an integer in the [1,12] interval
clr-col-#{BREAKPOINT}	Styles a column within a screen with width >= than #{BREAKPOINT}, BREAKPOINT is anything among 'sm', 'md', 'lg', 'xl'
clr-col-#{BREAKPOINT}-#{SIZE}	Styles a column that spans to SIZE/12 of the row's width for a row with width >= BREAKPOINT
clr-col-auto	Styles a column within a row to have auto width
clr-col-#{BREAKPOINT}-auto	Styles a column within a row to have auto width for a small, medium, large and extra large screen
clr-offset-#{OFFSET_SIZE}	Sets left offset to #{OFFSET_SIZE}/12 of the row's width, OFFSET_SIZE is an integer in the [1,11] interval
clr-offset-#{BREAKPOINT}-#{OFFSET_SIZE}	Sets the left offset of the column to #{OFFSET_SIZE}/12 for a screen larger than #{BREAKPOINT}
clr-order-first	Sets the order of the column as first
clr-order-last	Sets the order of the column as last
clr-order-#{ORDER}	Sets the order of the column, ORDER is an integer in the interval [1,12]
clr-order-#{BREAKPOINT}-#{ORDER}	Sets the order of the column
clr-align-self-auto	Sets align-self property of a column to #{POSITION}, POSITION is one of 'auto', 'start', 'end', 'center', 'baseline', 'stretch'
clr-invisible	Sets the visibility of element to hidden
clr-display-#{DISPLAY_VALUE}	Sets the display property of an element to #{DISPLAY_VALUE}, DISPLAY_VALUE is one of 'block', 'inline-block', 'inline'
clr-align-#{POSITION}	Sets vertical-align to #{POSITION}, POSITION is one of 'baseline', 'top', 'middle', 'bottom', 'text-bottom', 'text-top'
clr-flex-#{DIRECTION}	Sets the flex-direction to #{DIRECTION} ('row', 'column', 'row-reverse' or 'column-reverse')
clr-flex-#{FLEX_WRAP_VALUE}	Sets the flex-wrap to #{FLEX_WRAP_VALUE} ('wrap', 'nowrap', 'wrap-reverse')
clr-flex-fill	Makes a flex item expand to fill any remaining space within a flex container, distributing the available space evenly among the flex items
clr-#{FLEXIBILITY}-#{SIZE}	Sets the flexibility (flex-grow or flex-shrink) to #{SIZE} (0 or 1)
clr-float-#{BREAKPOINT}-#{DIRECTION}	Sets the float property to #{DIRECTION}('left', 'right' or 'none') for screens with width bigger than the #{BREAKPOINT} value for 'sm', 'md' or 'lg'

Screen width breakpoints

Breakpoint	Description
sm	>= 576px
md	>= 768px
lg	>= 992px
xl	>= 1200px

Headers

CSS Custom Properties

CSS Custom Property	Description
--clr-header-height	Header overall height
--clr-header-bg-color	Header background color
--clr-header-divider-opacity	Opacity of the header divider
--clr-header-divider-width	Width of the header divider
--clr-header-divider-height	Height of the header divider
--clr-header-nav-opacity	Header nav item opacity
--clr-header-nav-hover-opacity	Header nav item opacity on hover
--clr-header-2-bg-color	Second version of header background color
--clr-header-3-bg-color	Third version of header background color
--clr-header-4-bg-color	Fourth version of header background color
--clr-header-5-bg-color	Fifth version of header background color
--clr-header-6-bg-color	Sixth version of header background color
--clr-header-7-bg-color	Seventh version of header background color
--clr-header-8-bg-color	Eighth version of header background color
--clr-header-font-color	Header text color
--clr-header-font-color-hover	Header hovered item color
--clr-header-title-color	Header branding title text color
--clr-header-title-font-weight	Header branding title text fort weight
--clr-header-title-font-family	Header branding title font family
--clr-header-title-font-size	Header branding title font size
--clr-header-title-line-height	Header branding title line height
--clr-header-title-letter-spacing	Header branding title letter spacing
--clr-header-branding-min-width	Header branding minimal width
--clr-header-branding-padding	Header branding padding
--clr-header-branding-icon-gap	Gap between icon and text in header branding section
--clr-header-branding-logo-size	Size of the logo image in header branding section
--clr-header-nav-link-padding	Header navigation buttons padding
--clr-header-nav-link-line-height	Header navigation buttons line-height
--clr-header-nav-link-font-size	Header navigation buttons font size
--clr-header-nav-text-font-weight	Header navigation buttons font weight
--clr-header-nav-text-font-weight-active	Active header navigation buttons font weight
--clr-header-action-caret-right	Right margin of the header nav action caret
--clr-header-search-height	Header search input height
--clr-header-search-icon-size	Header search icon size
--clr-header-search-margin-left	Header search field left margin
--clr-header-search-margin-right	Header search field right margin
--clr-header-search-gap	Gap between the subelements of the header search field
--clr-header-search-input-font-size	Header search field font size
--clr-header-search-input-font-color	Header search field text color
--clr-header-search-border-active	Border of active/focused search field
--clr-header-search-border-hover	Border of hovered search field
--clr-header-search-placeholder-font-weight	Font weight of the header search placeholder
--clr-header-search-placeholder-text-color	Text color of the header search placeholder

CSS Classes

Class name	Description
clr-header	Application header element
header-hamburger-trigger	Hamburger icon for responsive header
header-actions	Responsive header actions

Input

CSS Custom properties

Class name	Description
--clr-forms-input-padding	Input padding
--clr-forms-input-wrapper-height	Wrapper height

CSS Classes

Class name	Description
clr-input-wrapper	Wrapper for input element
clr-input	Main input element
clr-input-group	Wrapper for multiple form elements
clr-input-group-addon	Input group addon (icon,text)
clr-input-group-icon-action	Input group action. Used on button to add action on the input

Label

CSS Properties

CSS Property Name	Description
--clr-label-font-color-light	Font color for light labels
--clr-label-font-color-dark	Font color for dark labels
--clr-label-default-border-color	Default border color for labels
--clr-label-bg-hover-color	Background color on hover for labels
--clr-label-gray-bg-color	Not used
--clr-label-gray-color	Not used
--clr-label-purple-bg-color	Background color for purple labels
--clr-label-purple-color	Font color for purple labels
--clr-label-blue-bg-color	Background color for blue labels
--clr-label-blue-color	Font color for blue labels
--clr-label-orange-bg-color	Background color for orange labels
--clr-label-orange-color	Font color for orange labels
--clr-label-light-blue-bg-color	Background color for light blue labels
--clr-label-light-blue-color	Font color for light blue labels
--clr-label-info-bg-color	Background color for info labels
--clr-label-info-font-color	Font color for info labels
--clr-label-info-border-color	Border color for info labels
--clr-label-success-bg-color	Background color for success labels
--clr-label-success-font-color	Font color for success labels
--clr-label-success-border-color	Border color for success labels
--clr-label-warning-bg-color	Background color for warning labels
--clr-label-warning-font-color	Font color for warning labels
--clr-label-warning-border-color	Border color for warning labels
--clr-label-danger-bg-color	Background color for danger labels
--clr-label-danger-font-color	Font color for danger labels
--clr-label-danger-border-color	Border color for danger labels
--clr-label-font-size	Font size for labels
--clr-label-font-weight	Font weight for label
--clr-label-letter-spacing	Letter spacing for label
--clr-label-border-radius	Border radius for label
--clr-label-padding	Padding for labels
--clr-label-gap-size	Gap size for labels
--clr-label-line-height	Line height for labels
--clr-label-clickable-font-size	Font size for clickable labels
--clr-label-clickable-font-weight	Font weight for clickable labels
--clr-label-clickable-letter-spacing	Letter spacing for clickable labels
--clr-label-clickable-line-height	Line Height for clickable labels

Classes

Class Name	Description
label	Default label class
label-	Label class with specific color
clickable	Clickable label class

Layout

CSS Custom Properties

CSS Custom Property	Description
--clr-global-app-background	Global application background color

CSS Classes

Class name	Description
main-container	Main application container element
alert-app-level	Application level alert slot
header	Application header
subnav, sub-nav	Secondary top navigation container
content-container	Main content and nav container
clr-vertical-nav	Left navigation container
content-area	Pag content container

Lists

CSS Classes

Class name	Description
list	Sets default sizes to list
compact	Makes a list to use less space, used with .list
list-unstyled	Removes default bullet styling of list items
list-spacer	Sets space before the list contents
list-group	Removes bullets and reduces spacing used inside .card

Login

CSS Custom Properties

CSS Custom Property	Description
--clr-login-title-color	Color of the title.
--clr-login-title-font-weight	Font weight of the title.
--clr-login-title-font-family	Font family of the title.
--clr-login-background-color	Background color.
--clr-login-background	Background image.
--clr-login-error-background-color	Error message background color.
--clr-login-error-border-radius	Error message border radius.
--clr-login-panel-line-color	Color of the divider line.
--clr-login-panel-line-opacity	Opacity to the divider line.

CSS Classes

Class	Description
login	The login form is a predefined form for applications that require authentication.
login-wrapper	Wrapper element.
title	The title section of the login form.
welcome	The heading of the login form.
hint	Hint/helper text within the title of the login form.
login-group	Contains the login form controls.
error	Error message. The error message is hidden by default.
active	Adding the active class to the .error element makes the error message appear.

Modal

CSS Custom Properties

CSS Custom Property	Description
--clr-modal-close-color	Fill color of modal close icon
--clr-modal-bg-color	Background color of modal
--clr-modal-content-box-shadow-color	Shadow color of modal content
--clr-modal-backdrop-color	Color of modal backdrop
--clr-modal-backdrop-opacity	Opacity of modal backdrop
--clr-modal-border-radius	Border radius of a modal
--clr-modal-title-color	Font color of modal title
--clr-modal-title-font-family	Font family of modal title
--clr-modal-title-font-weight	Font weight of modal title
--clr-modal-sm-width	Width of the modal on small layout
--clr-modal-md-width	Width of the modal on medium layout
--clr-modal-lg-width	Width of the modal on large layout
--clr-modal-xl-width	Width of the modal on extra large layout
--clr-modal-text-color	Font color for modal content
--clr-modal-content-box-shadow	Shadow of modal content
--clr-modal-content-border-style	Border style of modal content
--clr-modal-content-border-color	Border color of modal content
--clr-modal-content-border-width	Border width of modal content
--clr-modal-content-border-radius	Border radius of modal content
--clr-modal-title-font-size	Font size for modal title
--clr-modal-title-line-height	Line height for modal title
--clr-modal-footer-gap	Gap size for footer content
--clr-modal-close-icon-size	Size for modal close icon

CSS Classes

Class name	Description
modal	Modal element class (positioning focused)
modal-dialog	Modal dialog box class
modal-sm	Sets modal-dialog to use small width
modal-lg	Sets modal-dialog to use large width
modal-xl	Sets modal-dialog to use extra-large width
modal-content	Content class *should be used in modal-dialog
modal-header	Header class
modal-title	Title class *should be used inside modal-header
modal-title-wrapper	Title wrapper
modal-body-wrapper	Body wrapper
modal-footer	Footer wrapper
modal-backdrop	Backdrop class
modal-nav	Modal nav class used only in wizards

Password

CSS Custom Properties

CSS Custom Property	Description
--clr-forms-password-eye-icon-color	Color of show/hide eye icon
--clr-forms-password-disabled-eye-icon-color	Color of disabled show/hide eye icon

Progress bar

CSS Custom Properties

CSS Custom Property	Description
--clr-progress-default-color	Default color
--clr-progress-alt-color-1	Success color
--clr-progress-alt-color-2	Danger color
--clr-progress-alt-color-3	Warning color
--clr-progress-bg-color	Background color

CSS Classes

Class name	Description
progress	Main progress bar element
progress-static	Main static progress bar element
progress-fade	Fade out animation for progress bar
progress-meter	The bar element in a static progress bar
progress-group	Layout element for multiple progress bars
progress-block	Layout element for progress bar groups
flash	Sets the bar color to success once value of 100 is reached
flash-danger	Sets the bar color to danger once value of 100 is reached
labeled	Used with progress to show display value next to the bar
loop	Loop animation for non-static progress bars
danger	Combined with progress loop or progress-static to set progress color
warning	Combined with progress loop or progress-static to set progress color
success	Combined with progress loop or progress-static to set progress color

Radio

CSS Custom Properties

CSS Custom Properties	Description
--clr-forms-radio-label-color	Color of the label for radio buttons
--clr-forms-radio-disabled-background-color	Background color of disabled radio buttons
--clr-forms-radio-disabled-mark-color	Color of the mark (indicator) for disabled radio buttons
--clr-forms-radio-line-height	Line height of the radio button wrapper
--clr-forms-radio-padding-left	Left padding for radio label element
--clr-forms-radio-label-height	Height of the radio label element

CSS Classes

Class	Description
clr-radio-wrapper	The wrapper container for the radio button and its label
clr-control-label	The label element of the radio button

Range

CSS Custom Properties

CSS Custom Property	Description
--clr-forms-range-progress-fill-color	The color of the range fill progress.
--clr-forms-range-track-color	The background color of the range track.
--clr-forms-range-track-border-color	The border color of the range track.
--clr-forms-range-thumb-height	The height and width of the range thumb.
--clr-forms-range-track-height	The height of the range track.
--clr-forms-range-track-border-radius	The border radius of the range track.
--clr-forms-range-progress-fill-color-disabled	The color of disabled range fill progress.
--clr-forms-range-track-color-disabled	The background color of disabled range track.
--clr-forms-range-track-border-color-disabled	The border color of disabled range.

CSS Classes

Class Name	Description
clr-range-wrapper	Represents the wrapper element for the range input.
fill-input	Represents the progress bar element inside the range input.
clr-range	Represents the range input element.

Select

CSS Custom Properties

CSS Custom Property	Description
--clr-forms-select-option-color	Text color used in the options of a single select
--clr-forms-select-multiple-background-color	Background color used in a multiple select
--clr-forms-select-multiple-border-color	Border color used by multiple select options
--clr-forms-select-multiple-option-color	Text color used by the multiple select options
--clr-forms-select-hover-background	Background color used when select is hovered.
--clr-forms-select-hover-border-color	Border color used when select is hovered.
--clr-forms-select-disabled-border-color	Border color used when select is disabled.

CSS Classes

Class name	Description
clr-select	Select element class
clr-multiselect-wrapper	Internal class that wraps the single selects
clr-select-wrapper	Internal class that wraps the multiple selects

Signpost

CSS Custom Properties

CSS Custom Property	Description
--clr-signpost-content-bg-color	Signpost content background color.
--clr-signpost-content-border-color	Signpost content border color.
--clr-signpost-border-color	Signpost border color.
--clr-signpost-action-color	Signpost action color.
--clr-signpost-action-hover-color	Signpost action hover color.
--clr-signpost-pointer-border	Signpost pointer border.
--clr-signpost-pointer-invisible-border	Signpost pointer invisible border.
--clr-signpost-pointer-psuedo-border	Signpost pointer pseudo border.
--clr-signpost-content-padding	Signpost content padding.
--clr-signpost-content-color	Signpost content color.
--clr-signpost-content-header-position	Signpost content header position.
--clr-signpost-content-header-padding	Signpost content header padding.

CSS Classes

Class name	Description
signpost	Signpost element class.
signpost-content	Content class for the signpost.
signpost-content-header	Content header class for the signpost.
signpost-content-body	Content body class for the signpost.
signpost-trigger	Internal class for opening the signpost.
signpost-wrap	Internal wrapper class.
signpost-action	Internal action class. Used with content close action button.

Spinner

CSS Custom Properties

CSS Custom Property	Description
--clr-spinner-default-size	Size (diameter) of large spinner
--clr-spinner-medium-size	Size of medium spinner
--clr-spinner-small-size	Size of small spinner
--clr-spinner-margin-right	Spacing between spinner and text next to it
--clr-spinner-default-stroke-width	Width (thickness) of stroke of large spinner
--clr-spinner-medium-stroke-width	Width of medium spinner
--clr-spinner-small-stroke-width	Width of small spinner
--clr-spinner-fill-bg-color	Spinner background color
--clr-spinner-fill-inverse-bg-color	Spinner background color for dark background
--clr-spinner-fill-color	Color of rotating part of spinner
--clr-spinner-fill-inverse-color	Spinner background color for dark background
--clr-spinner-border-radius	Spinner border radius

CSS Classes

Class Name	Description
spinner	Default class for all spinners.
spinner-inline	Display the spinner inline.
spinner-inverse	Display the spinner in inverse mode.
spinner-sm	Display the spinner with small size.
spinner-md	Display the spinner with medium size.
spinner-check	Display a checkmark icon spinner.

Stack view

CSS Custom Properties

CSS Custom Property	Description
--clr-stack-view-border-radius	Border radius of stack view
--clr-stack-view-border-color	Border color of stack view
--clr-stack-view-bg-color	Background color of stack view
--clr-stack-view-color	Font color of stack view
--clr-stack-view-stack-block-border-bottom	Bottom border color of stack block
--clr-stack-view-stack-block-label-text-color	Font color of stack block label
--clr-stack-view-border-box-color	Last stack block element shadow color
--clr-stack-block-changed-border-top-color	Changed stack block border top color
--clr-stack-view-stack-block-label-and-content-bg-color	Background color of stack block label and content
--clr-stack-view-stack-children-stack-block-border-bottom-color	Bottom border color of stack block children
--clr-stack-view-stack-children-stack-block-label-and-content-bg-color	Background color of stack block children's label and content
--clr-stack-view-stack-block-expanded-bg-color	Background color of expanded stack block label and content
--clr-stack-view-stack-block-expandable-hover	Background color of expandable stack block label and content on hover
--clr-stack-view-stack-block-content-text-color	Font color of stack block content
--clr-stack-view-stack-block-expanded-text-color	Font color of expanded stack block label and content
--clr-stack-view-stack-block-caret-color	Color of stack block caret
--clr-stack-view-title-color	Stack view title color
--clr-stack-view-stack-block-expandable-bg-hover	Stack view stack block expandable background color
--clr-stack-view-stack-block-expandable-active	Stack view stack block expandable active (opened) color
--clr-stack-view-stack-block-expandable-bg-active	Stack view stack-block expandable active background color
--clr-stack-view-border-width	Stack view border width
--clr-stack-view-stack-block-label-padding	Stack view stack block label padding
--clr-stack-view-key-margin	Stack view key block margin
--clr-stack-view-border-radius	Stack view border radius
--clr-stack-view-stack-block-caret-dimension	Stack view stack block caret dimension
--clr-stack-view-stack-children-block-label-padding-left	Stack view stack children block label padding
--clr-stack-view-stack-title-padding	Stack view stack title padding

CSS Classes

Class name	Description
stack-view	Main stack view element
stack-header	Main stack header element
stack-title	Stack view header title
stack-actions	Wrapper for stack view header actions
stack-action	Main header stack action class
stack-block	Main stack block element
stack-block-changed	Marks a stack block as changed
stack-block-label	Wrapper for stack block label and content
stack-view-key	Stack block view key element
stack-block-content	Stack block content element
stack-block-caret	Stack block caret icon element
stack-children	Wrapper for stack block child blocks
stack-block-expandable	Used with stack-block to add expandable caret icon
stack-block-expanded	Stack block caret icon in expanded state

Table

CSS Custom Properties

CSS Custom Property	Description
--clr-table-bgcolor	Background color of a table
--clr-table-margin	Margin of a table
--clr-thead-bgcolor	Background color of table header
--clr-table-header-border-bottom-color	Not used
--clr-table-footer-border-top-color	Not used in tables. Used for datagrid footer border color
--clr-table-border-color	Border color of a table
--clr-tablerow-bordercolor	Border color for table rows
--clr-table-border-radius	Border radius for а table
--clr-table-borderwidth	Border width for а table
--clr-table-cornercellradius	Border radius for corner cells
--clr-table-font-color	Font color for table rows
--clr-thead-color	Font color for table header

CSS Classes

All other table classes like table, thead, tbody, th, td are not specific to Clarity so they are not included.

Class name	Description
table-vertical	Vertical table
table-noborder	Table with no borders
table-compact	Table with less paddings

Tabs

CSS Custom Properties

CSS Custom Property	Description
--clr-nav-link-active-font-weight	Tabs nav link active font weight
--clr-nav-link-font-weight	Tabs nav link font weight
--clr-nav-link-color	Tabs nav link color
--clr-nav-link-active-color	Tabs nav link active color
--clr-nav-hover-bg-color	Tabs nav hover background color
--clr-nav-active-bg-color	Tabs nav active background color
--clr-nav-selected-bg-color	Tabs nav selected background color
--clr-nav-box-shadow-color	Tabs nav box shadow color
--clr-nav-active-box-shadow-color	Tabs nav active box shadow color
--clr-nav-active-border-color	Tabs nav active border color
--clr-nav-active-border-width	Tabs nav active border width
--clr-nav-selected-hover-background-color	Tabs nav selected background color on hover
--clr-nav-horizontal-gap-size	Tabs nav horizontal gap size
--clr-nav-vertical-gap-size	Tabs nav vertical gap size
--clr-nav-link-dropdown-toggle-padding	Tabs nav dropdown toggle padding
--clr-nav-horizontal-link-padding	Tabs nav horizontal link padding
--clr-nav-vertical-link-padding	Tabs nav vertical link padding
--clr-nav-link-font-size	Tabs nav link font size
--clr-nav-link-line-height	Tabs nav link line height

Class names

Class name	Description
tabs-overflow	Used to grouping tabs in overflow tab.
tabs-vertical	Used to display tabs in vertical orientation.
tab-content	Inner class for the content of the tab.

Textarea

CSS Custom Properties

CSS Custom Property	Description
--clr-forms-textarea-background-color	Background color for textarea.
--clr-forms-textarea-border-radius	Border radius for textarea.
--clr-forms-textarea-padding	Textarea padding all sides.
--clr-forms-textarea-wrapper-margin-top	Parent container of text area margin top.
--clr-forms-textarea-disabled-background	Background color of disabled textarea.

CSS Classes

Class Name	Description
clr-textarea-wrapper	Wrapper class for the textarea
clr-textarea	Class for the textarea element

Timeline

CSS Custom Properties

CSS Custom Property	Description
--clr-timeline-line-color	Timeline line color
--clr-timeline-step-header-color	Timeline step header text color
--clr-timeline-step-title-color	Timeline step title text color
--clr-timeline-step-description-color	Timeline step description text color
--clr-timeline-incomplete-step-color	Incomplete timeline step circle color
--clr-timeline-current-step-color	Current timeline step circle color
--clr-timeline-success-step-color	Successful timeline step circle color
--clr-timeline-error-step-color	Failed timeline step circle color
--clr-timeline-step-title-font-weight	Timeline step title font weight
--clr-timeline-step-title-font-size	Timeline step title font size
--clr-timeline-step-title-line-height	Timeline step title line height
--clr-timeline-step-header-font-weight	Timeline step header font weight
--clr-timeline-step-header-font-size	Timeline step header font size
--clr-timeline-step-header-line-height	Timeline step header line height
--clr-timeline-step-description-font-weight	Timeline step description font weight
--clr-timeline-step-description-font-size	Timeline step description font size
--clr-timeline-step-description-line-height	Timeline step description line height
--clr-timeline-horizontal-line-length	Timeline horizontal line length
--clr-timeline-vertical-line-position	Timeline vertical line position
--clr-timeline-vertical-line-length	Timeline vertical line length
--clr-timeline-vertical-step-body-margin	Timeline vertical step body margin
--clr-timeline-icon-size	Timeline icon size
--clr-timeline-line-width	Timeline line width
--clr-timeline-step-margin	Timeline step outer margin

CSS Classes

Class name	Description
clr-timeline	Main Timeline element
clr-timeline-step	Timeline step element
clr-timeline-step-header	Timeline step header
clr-timeline-step-body	Timeline step body
clr-timeline-step-title	Timeline step title
clr-timeline-step-description	Timeline step description
clr-timeline-vertical	Switches timeline vertical mode

Toggle

CSS Custom Properties

CSS Custom Property	Description
--clr-toggle-bg-color-off	Background color for toggle that is off
--clr-toggle-bg-color-on	Background color for toggle that is on
--clr-toggle-handle-bg-color	Background color of the handle of the toggle
--clr-toggle-disabled-default-border-color	Border color for a disabled toggle
--clr-toggle-disabled-off-border-color	Border color for disabled toggle that is off
--clr-toggle-disabled-off-bg-color	Background color for a disabled toggle that is off
--clr-toggle-disabled-off-handle-border-color	Handle border color for a disabled toggle that is off
--clr-toggle-disabled-on-border-color	Border color for disabled toggle that is on
--clr-toggle-disabled-on-bg-color	Background color for disabled toggle that is on
--clr-toggle-disabled-on-handle-border-color	Handle border color for disabled toggle that is on

CSS Classes

Class name	Description
clr-toggle-wrapper	Wrapper class for the toggle switch component
clr-toggle-right	Class that aligns the toggle switch to the right in the container

Tooltip

CSS Custom Properties

CSS Custom Property	Description
--clr-tooltip-background-color	Tooltip background color
--clr-tooltip-border-radius	Tooltip element corner radius
--clr-tooltip-color	Color of the tooltip text
--clr-tooltip-font-weight	Font weight of the tooltip text
--clr-tooltip-content-padding	Padding of tooltip content
--clr-tooltip-content-line-height	Tooltip content line height
--clr-tooltip-content-margin	Tooltip content margin
--clr-tooltip-arrow-width	Tooltip arrow width
--clr-tooltip-arrow-height	Tooltip arrow height
--clr-tooltip-arrow-horizontal-size	Tooltip arrow horizontal size
--clr-tooltip-arrow-vertical-size	Tooltip arrow vertical size

CSS Classes

Class name	Description
tooltip	Main tooltip component element
tooltip-content	Tooltip content container
tooltip-trigger	Tooltip trigger element
tooltip-#{POSITION}	Tooltip position identifier (top, bottom, left, right, top-left, etc.)
tooltip-#{SIZE}	Tooltip size identifier (sizes: xs, sm, md, lg)

Tree view

CSS Custom Properties

CSS Custom Property	Description
--clr-tree-border-radius	Tree node content border radius
--clr-tree-node-caret-link-hover-color	Caret hover color
--clr-tree-link-hover-color	Tree link hover color
--clr-tree-link-selection-color	Selected link background color
--clr-tree-link-text-color	Tree link default font color
--clr-tree-node-caret-color	Tree link caret color
--clr-tree-node-font-size	Font size of the text
--clr-tree-node-font-weight	Font weight of the text
--clr-tree-node-line-height	Node line height
--clr-tree-node-letter-spacing	Letter spacing of the text
--clr-treenode-content-padding	Deprecated. Padding of tree node content
--clr-tree-node-content-padding	Padding of tree node content

CSS Classes

Class name	Description
clr-tree-node	Main tree node element
clr-tree-node-content-container	Wrapper for tree content and caret elements
clr-treenode-content	Content wrapper for tree node
clr-treenode-caret	Tree node caret button
clr-tree-node-caret-icon	Tree node caret icon
clr-treenode-spinner-container	Wrapper for tree node spinner
clr-treenode-spinner	Tree node spinner
clr-treenode-children	Wrapper for nested child tree nodes
clr-treenode-link	Tree node link

Vertical Nav

CSS Custom Properties

CSS Custom Property	Description
--clr-vertical-nav-icon-active-color	Vertical nav active icon color
--clr-vertical-nav-toggle-icon-color	Vertical nav toggle icon color
--clr-vertical-nav-item-color	Vertical nav item font color
--clr-vertical-nav-item-active-color	Vertical nav item active font color
--clr-vertical-nav-bg-color	Vertical nav background color
--clr-vertical-nav-selected-bg-color	Vertical nav selected background color
--clr-vertical-nav-hover-bg-color	Vertical nav hover background color
--clr-vertical-nav-trigger-divider-border-width	Vertical nav trigger divider border width
--clr-vertical-nav-trigger-divider-border-color	Vertical nav trigger divider border color
--clr-vertical-nav-header-font-weight	Vertical nav header font weight
--clr-vertical-nav-active-bg-color	Vertical nav active background color
--clr-vertical-nav-active-color	Vertical nav active color
--clr-vertical-nav-toggle-icon-hover-color	Vertical nav trigger icon hover color
--clr-vertical-nav-toggle-icon-active-color	Vertical nav trigger icon active color
--clr-vertical-nav-toggle-icon-disabled-color	Vertical nav trigger icon disabled color
--clr-vertical-nav-item-padding	Vertical nav item padding
--clr-vertical-nav-item-child-padding	Vertical nav sub items padding
--clr-vertical-nav-item-height	Vertical nav item height
--clr-vertical-nav-item-line-height	Vertical nav item line height
--clr-vertical-nav-item-font-size	Vertical nav item font size
--clr-vertical-nav-item-font-weight	Vertical nav item font weight
--clr-vertical-nav-content-gap	Vertical nav content gap
--clr-vertical-nav-toggle-button-size	Vertical nav toggle buton size
--clr-vertical-nav-header-padding	Vertical nav header padding
--clr-vertical-nav-header-font-size	Vertical nav header font size
--clr-vertical-nav-header-line-height	Vertical nav header line height

CSS Classes

Class name	Description
clr-vertical-nav	Vertical nav element
nav-content	Navigation content
nav-divider	Navigation content separator
nav-trigger	Navigation trigger button for collapse/expand state
nav-trigger-icon	Navigation trigger icon
nav-trigger--bottom	Move navigation trigger at the bottom
nav-group	main vertical navigation group element
nav-group-content	Wrapper for navigation group content
nav-group-text	Navigation group content wrapper text
nav-group-children	Wrapper for navigation group children elements
nav-group-trigger	Navigation group trigger button for open/close group
nav-group-trigger-icon	Navigation group trigger button icon
nav-btn	Button to expand vertical nav when collapsed
has-icons	Internal class showing if vertical nav has icons
has-nav-groups	Internal class showing if vertical nav has at least 1 nav group

Wizard

CSS Custom Properties

CSS Custom Property	Description
--clr-wizard-main-bgcolor	Wizard background color
--clr-wizard-stepnav-bgcolor	Wizard navigation background color
--clr-wizard-main-text-color	Wizard text color
--clr-wizard-stepnav-text	Wizard navigation text color
--clr-wizard-stepnav-text--active	Wizard navigation text color of the currently active element
--clr-wizard-title-text	Wizard title text color
--clr-wizard-stepnav-border-size	Wizard navigation border size
--clr-wizard-stepnav-item-border-color	Wizard navigation border color
--clr-wizard-stepnav-item-border-color--active	Wizard navigation border color for the currently active element
--clr-wizard-stepnav-active-bgcolor	Wizard navigation background color for the currently active element
--clr-wizard-header-action-color	Wizard header actions color
--clr-wizard-header-action-color--hovered	Wizard header actions color on hover
--clr-wizard-border-radius	Wizard border radius
--clr-wizard-stepnav-active-border-radius	Wizard active navigation element border radius
--clr-wizard-stepnav-border-color	Wizard navigation border color
--clr-wizard-box-shadow	Wizard highlight indication
--clr-wizard-stepnav-link-font-size	Wizard navigation item font size
--clr-wizard-stepnav-link-line-height	Wizard navigation item line height
--clr-wizard-stepnav-item-padding	Wizard navigation item padding
--clr-wizard-stepnav-padding	Wizard navigation padding
--clr-wizard-stepnav-link-padding	Wizard navigation item button padding
--clr-wizard-stepnav-link-suffix-padding	Wizard navigation item button suffix padding
--clr-wizard-stepnav-link-error-icon-color	Wizard navigation item button error icon color
--clr-wizard-stepnav-item-error-border-color	Wizard navigation item error border color
--clr-wizard-page-padding	Wizard page content padding
--clr-wizard-footer-padding	Wizard page footer padding
--clr-wizard-footer-height	Wizard page footer height
--clr-wizard-stepnav-link-hover-bg-color	Wizard navigation item button background color on hover
--clr-wizard-title-padding	Wizard title padding
--clr-wizard-title-font-size	Wizard title font size
--clr-wizard-title-line-height	Wizard title line height
--clr-wizard-content-background-color	Wizard content background color
--clr-wizard-header-padding	Wizard page header padding
--clr-wizard-footer-buttons-wrapper-gap	Wizard page footer gap size between buttons

CSS Classes

Class name	Description
clr-wizard	Main wizard element
clr-wizard-content	Wizard content container
clr-wizard-page	Wizard page container
wizard-#{SIZE}	Wizard size; sizes: [md, lg, xl]
clr-wizard-btn	Wizard control button
clr-wizard-title	Wizard title elelment
clr-wizard-header-action	Wizard header action
clr-wizard-stepnav	Wizard navigation container
clr-wizard-stepnav-list	Wizard navigation list
clr-wizard-stepnav-item	Wizard navigation item
clr-wizard-stepnav-link	Wizard navigation item link indicator
clr-wizard-stepnav-link-suffix	Wizard navigation item link state indicator
clr-wizard-stepnav-item-error-icon	Wizard navigation item error icon
clr-wizard-footer	Wizard footer
clr-wizard-footer-buttons	Wizard footer buttons container
clr-wizard--no-title	Remove wizard dialog title
clr-wizard--no-shadow	Remove wizard dialog shadow
clr-wizard-stepnav-wrapper	Internal wrapper for the wizard navigation
clr-wizard-footer-buttons-wrapper	Internal wrapper for the wizard footer buttons
clr-wizard-btn-wrapper	Internal wrapper for wizard control buttons