Customizing Grid

The following table lists the available variables for customization.

Name Type Default value Computed value
$grid-bg $component-bg map-get($theme, component-bg)
Description
Background color of the grid component
$grid-text $component-text map-get($theme, component-text)
Description
Text color of the grid component
$grid-border $component-border map-get($theme, component-border)
Description
Border color of the grid component
$grid-header-bg transparent transparent
Description
Background color of grid header
$grid-header-text if($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-border map-get($theme, component-border)
Description
Border color of grid header
$grid-header-gradient null null
Description
Background gradient of grid header
$grid-alt-bg transparent transparent
Description
Background color of alternating rows in grid
$grid-alt-text null null
Description
Text color of alternating rows in grid
$grid-alt-border null null
Description
Text color of alternating rows in grid
$grid-hovered-bg rgba( contrast-wcag( $grid-bg ), .07 ) rgba( contrast-wcag( $grid-bg ), .07 )
Description
Background color of hovered rows in grid
$grid-hovered-text $grid-text map-get($theme, component-text)
Description
Text color of hovered rows in grid
$grid-hovered-border $grid-border map-get($theme, component-border)
Description
Border color of hovered rows in grid
$grid-selected-bg rgba( 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-border map-get($theme, component-border)
Description
Border color of selected rows in grid

In this article