Simple – Background colors
Key point: Stylize your content with different background colors by using one of the fragment labels available or creating a custom label with a hex color. 

You can apply a background color to a row (fragment) and/or to a column (fragment).

The colors for the content are automatically chosen according to the Web Content Accessibility Guidelines (Version 2.0).

For developers: Developers can configure custom labels in the label configuration. 

Row available colors*

* To take effect, the row-start fragment label must be set. For example,   row-start. 
  •  Fragment label: row-bg-black
  •  Fragment label: row-bg-white
  •  Fragment label: row-bg-grey
  •  Fragment label: row-bg-grey-lighten-1
  •  Fragment label: row-bg-grey-lighten-2
  •  Fragment label: row-bg-grey-lighten-3
  •  Fragment label: row-bg-grey-lighten-4
  •  Fragment label: row-bg-grey-lighten-5
  •  Fragment label: row-bg-grey-darken-1
  •  Fragment label: row-bg-grey-darken-2
  •  Fragment label: row-bg-grey-darken-3
  •  Fragment label: row-bg-grey-darken-4
  •  Fragment label: row-bg-primary (The theme primary color)
  •  Fragment label: row-bg-secondary (The theme secondary color)
  •  Fragment label: row-bg-accent (The theme accent color)

Fragment available colors

Create a custom fragment label with the prefix: frag-bg-hex-

  •  Fragment label: frag-bg-black
  •  Fragment label: frag-bg-white
  •  Fragment label: frag-bg-grey
  •  Fragment label: frag-bg-grey-lighten-1
  •  Fragment label: frag-bg-grey-lighten-2
  •  Fragment label: frag-bg-grey-lighten-3
  •  Fragment label: frag-bg-grey-lighten-4
  •  Fragment label: frag-bg-grey-darken-1
  •  Fragment label: frag-bg-grey-darken-2
  •  Fragment label: frag-bg-grey-darken-3
  •  Fragment label: frag-bg-grey-darken-4
  •  Fragment label: frag-bg-primary (The theme primary color)
  •  Fragment label: frag-bg-secondary (The theme secondary color)
  •  Fragment label: frag-bg-accent (The theme accent color)

Row and fragment hex

You can also use hex color by creating a custom fragment label with one of the prefixes:

  • row-bg-hex-
  • frag-bg-hex-
  •  Fragment label: row-bg-hex-ff0000 (for red)
  •  Fragment label: frag-bg-hex-0000ff (for blue)

Examples

PSML

  • Fragment label: row-bg-secondary
  • Fragment label: row-bg-white
  • Fragment label: row-bg-primary

Simple website

See in action

View background colors demo.