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¶
1 sample
sp-css-backgroundColor-BgCoral30¶
0 samples
sp-css-backgroundColor-BgCornflower40¶
1 sample
sp-css-backgroundColor-BgCornflowerBlue¶
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¶
1 sample
sp-css-backgroundColor-BgGold60¶
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¶
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¶
1 sample
sp-css-backgroundColor-BgMintGreen30¶
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¶
0 samples
sp-css-backgroundColor-blockingBackground30¶
0 samples
sp-css-backgroundColor-blockingBackground40¶
0 samples
sp-css-backgroundColor-blockingBackground50¶
2 samples
sp-css-backgroundColor-blue¶
3 samples
sp-css-backgroundColor-blueBackground07¶
2 samples
sp-css-backgroundColor-blueBackground17¶
1 sample
sp-css-backgroundColor-blueBackground27¶
1 sample
sp-css-backgroundColor-blueBackground37¶
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¶
2 samples
sp-css-backgroundColor-errorBackground50¶
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¶
2 samples
sp-css-backgroundColor-neutralBackground10¶
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¶
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¶
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¶
0 samples
sp-css-backgroundColor-redDark¶
0 samples
sp-css-backgroundColor-RedText¶
0 samples
sp-css-backgroundColor-SageFont¶
1 sample
sp-css-backgroundColor-successBackground¶
0 samples
sp-css-backgroundColor-successBackground30¶
3 samples
sp-css-backgroundColor-successBackground40¶
1 sample
sp-css-backgroundColor-successBackground50¶
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¶
0 samples
sp-css-backgroundColor-warningBackground30¶
1 sample
sp-css-backgroundColor-warningBackground40¶
3 samples
sp-css-backgroundColor-warningBackground50¶
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