Samples by Class: sp-css-backgroundColor-*

The sp-css-backgroundColor-* classes apply a background color. Several standard, named, theme, neutral, and more are included.

Samples are grouped by classes used. Expand to see the related samples.

0 samples

sp-css-backgroundColor-BgBlue

0 samples

sp-css-backgroundColor-BgBrown

1 sample 

sp-css-backgroundColor-BgCoral

• Group Header Status Icon and Color

1 sample 

sp-css-backgroundColor-BgCoral30

• Sticky Notes Board

0 samples

sp-css-backgroundColor-BgCornflower40

1 sample 

sp-css-backgroundColor-BgCornflowerBlue

• Group Header Status Icon and Color

0 samples

sp-css-backgroundColor-BgCyan

0 samples

sp-css-backgroundColor-BgCyan30

0 samples

sp-css-backgroundColor-BgDarkBlue

0 samples

sp-css-backgroundColor-BgDarkGreen

0 samples

sp-css-backgroundColor-BgDarkPink

0 samples

sp-css-backgroundColor-BgDarkPurple

0 samples

sp-css-backgroundColor-BgDarkRed

0 samples

sp-css-backgroundColor-BgDustRose

0 samples

sp-css-backgroundColor-BgDustRose30

1 sample 

sp-css-backgroundColor-BgGold

• Group Header Status Icon and Color

1 sample 

sp-css-backgroundColor-BgGold60

• Sticky Notes Board

0 samples

sp-css-backgroundColor-BgGray

0 samples

sp-css-backgroundColor-BgGreen

0 samples

sp-css-backgroundColor-bgLavender

0 samples

sp-css-backgroundColor-BgLightBlue

0 samples

sp-css-backgroundColor-BgLightBlue20

0 samples

sp-css-backgroundColor-BgLightGray

0 samples

sp-css-backgroundColor-BgLightGray30

0 samples

sp-css-backgroundColor-BgLightPurple

1 sample 

sp-css-backgroundColor-BgLightPurple30

• Sticky Notes Board

0 samples

sp-css-backgroundColor-BgLilac

0 samples

sp-css-backgroundColor-BgLilac30

0 samples

sp-css-backgroundColor-BgMauve

0 samples

sp-css-backgroundColor-BgMauve50

1 sample 

sp-css-backgroundColor-BgMintGreen

• Group Header Status Icon and Color

1 sample 

sp-css-backgroundColor-BgMintGreen30

• Sticky Notes Board

0 samples

sp-css-backgroundColor-BgOrange

0 samples

sp-css-backgroundColor-BgPeach40

0 samples

sp-css-backgroundColor-BgPeak

0 samples

sp-css-backgroundColor-BgPurple

0 samples

sp-css-backgroundColor-BgRed

0 samples

sp-css-backgroundColor-BgSage

0 samples

sp-css-backgroundColor-BgSage20

0 samples

sp-css-backgroundColor-BgTeal

0 samples

sp-css-backgroundColor-BgViolet

0 samples

sp-css-backgroundColor-BgViolet40

0 samples

sp-css-backgroundColor-black

0 samples

sp-css-backgroundColor-BlackFont

0 samples

sp-css-backgroundColor-BlackText

1 sample 

sp-css-backgroundColor-blockingBackground

• Employee Onboarding: Steps

0 samples

sp-css-backgroundColor-blockingBackground30

0 samples

sp-css-backgroundColor-blockingBackground40

0 samples

sp-css-backgroundColor-blockingBackground50

2 samples

sp-css-backgroundColor-blue

• Issue Status Pill
• Work Progress Category Pill

3 samples

sp-css-backgroundColor-blueBackground07

• Issue Status Pill
• Issue Tracker: Planner Cards
• Work Progress Category Pill

2 samples

sp-css-backgroundColor-blueBackground17

• Issue Status Pill
• Issue Tracker: Planner Cards

1 sample 

sp-css-backgroundColor-blueBackground27

• Employee Onboarding: Steps

1 sample 

sp-css-backgroundColor-blueBackground37

• Employee Onboarding: Steps

0 samples

sp-css-backgroundColor-blueDark

0 samples

sp-css-backgroundColor-blueLight

0 samples

sp-css-backgroundColor-BlueText

0 samples

sp-css-backgroundColor-bodyBackground

0 samples

sp-css-backgroundColor-bodyDivider

0 samples

sp-css-backgroundColor-bodySubtext

0 samples

sp-css-backgroundColor-bodyText

0 samples

sp-css-backgroundColor-BrownText

0 samples

sp-css-backgroundColor-CoralFont

0 samples

sp-css-backgroundColor-CornflowerBlueFont

0 samples

sp-css-backgroundColor-CyanFont

0 samples

sp-css-backgroundColor-DarkBlueText

0 samples

sp-css-backgroundColor-DarkGreenText

0 samples

sp-css-backgroundColor-DarkPurpleText

0 samples

sp-css-backgroundColor-DarkRedText

0 samples

sp-css-backgroundColor-disabledBackground

0 samples

sp-css-backgroundColor-disabledSubtext

0 samples

sp-css-backgroundColor-disabledText

0 samples

sp-css-backgroundColor-DustRoseFont

4 samples

sp-css-backgroundColor-errorBackground

• Employee Onboarding: Steps
• Issue Status Pill
• Issue Tracker: Planner Cards
• Work Progress Category Pill

0 samples

sp-css-backgroundColor-errorBackground30

1 sample 

sp-css-backgroundColor-errorBackground40

• Conditional Progress Color

2 samples

sp-css-backgroundColor-errorBackground50

• Issue Status Pill
• Issue Tracker: Planner Cards

0 samples

sp-css-backgroundColor-errorText

0 samples

sp-css-backgroundColor-GoldFont

0 samples

sp-css-backgroundColor-GrayText

0 samples

sp-css-backgroundColor-green

0 samples

sp-css-backgroundColor-greenLight

0 samples

sp-css-backgroundColor-GreenText

0 samples

sp-css-backgroundColor-LavenderText

0 samples

sp-css-backgroundColor-LightBlueFont

0 samples

sp-css-backgroundColor-LightGrayFont

0 samples

sp-css-backgroundColor-LightPurpleFont

0 samples

sp-css-backgroundColor-LightPurpleText

0 samples

sp-css-backgroundColor-LilacFont

0 samples

sp-css-backgroundColor-listBackground

0 samples

sp-css-backgroundColor-listItemBackgroundChecked

0 samples

sp-css-backgroundColor-listTextColor

0 samples

sp-css-backgroundColor-MauveFont

0 samples

sp-css-backgroundColor-MintGreenFont

2 samples

sp-css-backgroundColor-neutralBackground

• Employee Onboarding: Steps
• Work Progress Category Pill

2 samples

sp-css-backgroundColor-neutralBackground10

• Issue Status Pill
• Issue Tracker: Planner Cards

0 samples

sp-css-backgroundColor-neutralBackground20

0 samples

sp-css-backgroundColor-neutralBackground30

0 samples

sp-css-backgroundColor-neutralDark

0 samples

sp-css-backgroundColor-neutralLight

0 samples

sp-css-backgroundColor-neutralLighter

1 sample 

sp-css-backgroundColor-neutralLighterAlt

• Board Tags

0 samples

sp-css-backgroundColor-neutralPrimary

0 samples

sp-css-backgroundColor-neutralPrimaryAlt

0 samples

sp-css-backgroundColor-neutralQuaternary

0 samples

sp-css-backgroundColor-neutralQuaternaryAlt

0 samples

sp-css-backgroundColor-neutralSecondary

0 samples

sp-css-backgroundColor-neutralTertiary

0 samples

sp-css-backgroundColor-neutralTertiaryAlt

1 sample 

sp-css-backgroundColor-noFill

• Employee Onboarding: Steps

0 samples

sp-css-backgroundColor-OrangeText

0 samples

sp-css-backgroundColor-PeachFont

0 samples

sp-css-backgroundColor-purple

0 samples

sp-css-backgroundColor-PurpleText

1 sample 

sp-css-backgroundColor-red

• Roll Dice

0 samples

sp-css-backgroundColor-redDark

0 samples

sp-css-backgroundColor-RedText

0 samples

sp-css-backgroundColor-SageFont

1 sample 

sp-css-backgroundColor-successBackground

• Work Progress Category Pill

0 samples

sp-css-backgroundColor-successBackground30

3 samples

sp-css-backgroundColor-successBackground40

• Conditional Progress Color
• Issue Status Pill
• Issue Tracker: Planner Cards

1 sample 

sp-css-backgroundColor-successBackground50

• Employee Onboarding: Steps

0 samples

sp-css-backgroundColor-TealText

0 samples

sp-css-backgroundColor-themeDark

0 samples

sp-css-backgroundColor-themeDarkAlt

0 samples

sp-css-backgroundColor-themeDarker

0 samples

sp-css-backgroundColor-themeLight

0 samples

sp-css-backgroundColor-themeLighter

0 samples

sp-css-backgroundColor-themeLighterAlt

0 samples

sp-css-backgroundColor-themePrimary

0 samples

sp-css-backgroundColor-themeSeconary

0 samples

sp-css-backgroundColor-themeTertiary

0 samples

sp-css-backgroundColor-VioletFont

1 sample 

sp-css-backgroundColor-warningBackground

• Work Progress Category Pill

0 samples

sp-css-backgroundColor-warningBackground30

1 sample 

sp-css-backgroundColor-warningBackground40

• Conditional Progress Color

3 samples

sp-css-backgroundColor-warningBackground50

• Employee Onboarding: Steps
• Issue Status Pill
• Issue Tracker: Planner Cards

0 samples

sp-css-backgroundColor-white

0 samples

sp-css-backgroundColor-WhiteFont

0 samples

sp-css-backgroundColor-WhiteText

0 samples

sp-css-backgroundColor-yellow

0 samples

sp-css-backgroundColor-yellowLight