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.