Customizing Grid

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$grid-bg$component-bgmap-get($theme, component-bg)
Description
Background color of the grid component
$grid-text$component-textmap-get($theme, component-text)
Description
Text color of the grid component
$grid-border$component-bordermap-get($theme, component-border)
Description
Border color of the grid component
$grid-header-bgtransparenttransparent
Description
Background color of grid header
$grid-header-textif($theme-type == dark, $light-secondary-text, $dark-secondary-text)if($theme-type == dark, $light-secondary-text, $dark-secondary-text)
Description
Background color of grid header
$grid-header-border$grid-bordermap-get($theme, component-border)
Description
Border color of grid header
$grid-header-gradientnullnull
Description
Background gradient of grid header
$grid-alt-bgtransparenttransparent
Description
Background color of alternating rows in grid
$grid-alt-textnullnull
Description
Text color of alternating rows in grid
$grid-alt-bordernullnull
Description
Text color of alternating rows in grid
$grid-hovered-bgrgba( contrast-wcag( $grid-bg ), .07 )rgba( contrast-wcag( $grid-bg ), .07 )
Description
Background color of hovered rows in grid
$grid-hovered-text$grid-textmap-get($theme, component-text)
Description
Text color of hovered rows in grid
$grid-hovered-border$grid-bordermap-get($theme, component-border)
Description
Border color of hovered rows in grid
$grid-selected-bgrgba( contrast-wcag( $grid-bg ), .04 )rgba( contrast-wcag( $grid-bg ), .04 )
Description
Background color of selected rows in grid
$grid-selected-text#000000#000000
Description
Text color of selected rows in grid
$grid-selected-border$grid-bordermap-get($theme, component-border)
Description
Border color of selected rows in grid

In this article

Not finding the help you need?