Samples by Class: ms-bgColor-*¶
The ms-bgColor-* classes apply a background color. Several standard, shared, theme, neutral, and more are included.
Samples are grouped by classes used. Expand to see the related samples.
Complimentary Classes
These classes compliment the ms-borderColor-* and ms-fontColor-* classes and except where noted below contain equivalent colors.
Warning
The named color alert does not have a ms-bgColor- equivalent despite being present elsewhere
3 samples
ms-bgColor-black¶
0 samples
ms-bgColor-black--hover¶
4 samples
ms-bgColor-blue¶
0 samples
ms-bgColor-blueDark¶
2 samples
ms-bgColor-blueDark--hover¶
0 samples
ms-bgColor-blue--hover¶
1 sample
ms-bgColor-blueLight¶
0 samples
ms-bgColor-blueLight--hover¶
0 samples
ms-bgColor-blueMid¶
0 samples
ms-bgColor-blueMid--hover¶
0 samples
ms-bgColor-communicationPrimary¶
0 samples
ms-bgColor-communicationPrimary--hover¶
0 samples
ms-bgColor-communicationShade10¶
0 samples
ms-bgColor-communicationShade10--hover¶
0 samples
ms-bgColor-communicationShade20¶
0 samples
ms-bgColor-communicationShade20--hover¶
0 samples
ms-bgColor-communicationShade30¶
0 samples
ms-bgColor-communicationShade30--hover¶
0 samples
ms-bgColor-communicationTint10¶
0 samples
ms-bgColor-communicationTint10--hover¶
0 samples
ms-bgColor-communicationTint20¶
2 samples
ms-bgColor-communicationTint20--hover¶
0 samples
ms-bgColor-communicationTint30¶
0 samples
ms-bgColor-communicationTint30--hover¶
2 samples
ms-bgColor-communicationTint40¶
0 samples
ms-bgColor-communicationTint40--hover¶
0 samples
ms-bgColor-contrastBlackDisabled¶
0 samples
ms-bgColor-contrastBlackDisabled--hover¶
0 samples
ms-bgColor-contrastBlackSelected¶
0 samples
ms-bgColor-contrastBlackSelected--hover¶
0 samples
ms-bgColor-contrastWhiteDisabled¶
0 samples
ms-bgColor-contrastWhiteDisabled--hover¶
0 samples
ms-bgColor-contrastWhiteSelected¶
0 samples
ms-bgColor-contrastWhiteSelected--hover¶
0 samples
ms-bgColor-error¶
0 samples
ms-bgColor-error--hover¶
0 samples
ms-bgColor-gray10¶
0 samples
ms-bgColor-gray100¶
0 samples
ms-bgColor-gray100--hover¶
1 sample
ms-bgColor-gray10--hover¶
0 samples
ms-bgColor-gray110¶
0 samples
ms-bgColor-gray110--hover¶
0 samples
ms-bgColor-gray120¶
0 samples
ms-bgColor-gray120--hover¶
0 samples
ms-bgColor-gray130¶
0 samples
ms-bgColor-gray130--hover¶
0 samples
ms-bgColor-gray140¶
0 samples
ms-bgColor-gray140--hover¶
0 samples
ms-bgColor-gray150¶
0 samples
ms-bgColor-gray150--hover¶
0 samples
ms-bgColor-gray160¶
0 samples
ms-bgColor-gray160--hover¶
0 samples
ms-bgColor-gray170¶
0 samples
ms-bgColor-gray170--hover¶
0 samples
ms-bgColor-gray180¶
0 samples
ms-bgColor-gray180--hover¶
0 samples
ms-bgColor-gray190¶
0 samples
ms-bgColor-gray190--hover¶
1 sample
ms-bgColor-gray20¶
0 samples
ms-bgColor-gray200¶
0 samples
ms-bgColor-gray200--hover¶
0 samples
ms-bgColor-gray20--hover¶
0 samples
ms-bgColor-gray210¶
0 samples
ms-bgColor-gray210--hover¶
0 samples
ms-bgColor-gray220¶
0 samples
ms-bgColor-gray220--hover¶
1 sample
ms-bgColor-gray30¶
3 samples
ms-bgColor-gray30--hover¶
1 sample
ms-bgColor-gray40¶
0 samples
ms-bgColor-gray40--hover¶
0 samples
ms-bgColor-gray50¶
0 samples
ms-bgColor-gray50--hover¶
0 samples
ms-bgColor-gray60¶
0 samples
ms-bgColor-gray60--hover¶
0 samples
ms-bgColor-gray70¶
0 samples
ms-bgColor-gray70--hover¶
0 samples
ms-bgColor-gray80¶
0 samples
ms-bgColor-gray80--hover¶
0 samples
ms-bgColor-gray90¶
0 samples
ms-bgColor-gray90--hover¶
9 samples
ms-bgColor-green¶
- Event Registration
- Payments
- Project Health Dashboard
- Project Indicator Formats
- Request Sign-off
- Retail Accounts
- Risk Score Indicator
- RYG Status
- Traffic Light (Red-Yellow-Green) Status Indicator
0 samples
ms-bgColor-greenDark¶
0 samples
ms-bgColor-greenDark--hover¶
0 samples
ms-bgColor-green--hover¶
3 samples
ms-bgColor-greenLight¶
1 sample
ms-bgColor-greenLight--hover¶
0 samples
ms-bgColor-info¶
2 samples
ms-bgColor-info--hover¶
0 samples
ms-bgColor-magenta¶
0 samples
ms-bgColor-magentaDark¶
0 samples
ms-bgColor-magentaDark--hover¶
0 samples
ms-bgColor-magenta--hover¶
0 samples
ms-bgColor-magentaLight¶
0 samples
ms-bgColor-magentaLight--hover¶
0 samples
ms-bgColor-neutralDark¶
0 samples
ms-bgColor-neutralDark--hover¶
8 samples
ms-bgColor-neutralLight¶
- Board Tags
- Elf Progress Board
- Modern Event Tiles
- Multi-Person Facepile
- Pie Chart
- Project Health Dashboard
- Status Header and Footer
- Video Gallery
8 samples
ms-bgColor-neutralLighter¶
- Contact Cards
- Elf Progress Board
- Message Chat Bubbles
- Request Sign-off
- Resource Catalog Sample
- Retail Accounts
- Testimonials
- Video Embed Codes
4 samples
ms-bgColor-neutralLighterAlt¶
0 samples
ms-bgColor-neutralLighterAlt--hover¶
1 sample
ms-bgColor-neutralLighter--hover¶
5 samples
ms-bgColor-neutralLight--hover¶
3 samples
ms-bgColor-neutralPrimary¶
0 samples
ms-bgColor-neutralPrimaryAlt¶
0 samples
ms-bgColor-neutralPrimaryAlt--hover¶
1 sample
ms-bgColor-neutralPrimary--hover¶
1 sample
ms-bgColor-neutralQuaternary¶
1 sample
ms-bgColor-neutralQuaternaryAlt¶
0 samples
ms-bgColor-neutralQuaternaryAlt--hover¶
0 samples
ms-bgColor-neutralQuaternary--hover¶
2 samples
ms-bgColor-neutralSecondary¶
2 samples
ms-bgColor-neutralSecondaryAlt¶
0 samples
ms-bgColor-neutralSecondaryAlt--hover¶
0 samples
ms-bgColor-neutralSecondary--hover¶
1 sample
ms-bgColor-neutralTertiary¶
2 samples
ms-bgColor-neutralTertiaryAlt¶
1 sample
ms-bgColor-neutralTertiaryAlt--hover¶
0 samples
ms-bgColor-neutralTertiary--hover¶
2 samples
ms-bgColor-orange¶
0 samples
ms-bgColor-orange--hover¶
3 samples
ms-bgColor-orangeLight¶
5 samples
ms-bgColor-orangeLighter¶
1 sample
ms-bgColor-orangeLighter--hover¶
0 samples
ms-bgColor-orangeLight--hover¶
2 samples
ms-bgColor-purple¶
0 samples
ms-bgColor-purpleDark¶
1 sample
ms-bgColor-purpleDark--hover¶
0 samples
ms-bgColor-purple--hover¶
0 samples
ms-bgColor-purpleLight¶
0 samples
ms-bgColor-purpleLight--hover¶
13 samples
ms-bgColor-red¶
- Butterfly Chart
- Event Registration
- Field Value Update Button
- Issue Tracker: Planner Cards
- Like/Dislike Bar
- Number Battery
- Payments
- Project Indicator Formats
- Risk Score Indicator
- Roll Dice
- RYG Status
- Stat Comparison Chart
- Traffic Light (Red-Yellow-Green) Status Indicator
3 samples
ms-bgColor-redDark¶
4 samples
ms-bgColor-redDark--hover¶
2 samples
ms-bgColor-red--hover¶
0 samples
ms-bgColor-severeWarning¶
0 samples
ms-bgColor-severeWarning--hover¶
0 samples
ms-bgColor-sharedBlue10¶
0 samples
ms-bgColor-sharedBlue10--hover¶
1 sample
ms-bgColor-sharedBlueMagenta10¶
0 samples
ms-bgColor-sharedBlueMagenta10--hover¶
0 samples
ms-bgColor-sharedBlueMagenta20¶
0 samples
ms-bgColor-sharedBlueMagenta20--hover¶
0 samples
ms-bgColor-sharedBlueMagenta30¶
0 samples
ms-bgColor-sharedBlueMagenta30--hover¶
0 samples
ms-bgColor-sharedBlueMagenta40¶
0 samples
ms-bgColor-sharedBlueMagenta40--hover¶
1 sample
ms-bgColor-sharedCyan10¶
0 samples
ms-bgColor-sharedCyan10--hover¶
0 samples
ms-bgColor-sharedCyan20¶
0 samples
ms-bgColor-sharedCyan20--hover¶
0 samples
ms-bgColor-sharedCyan30¶
0 samples
ms-bgColor-sharedCyan30--hover¶
0 samples
ms-bgColor-sharedCyan40¶
0 samples
ms-bgColor-sharedCyan40--hover¶
2 samples
ms-bgColor-sharedCyanBlue10¶
0 samples
ms-bgColor-sharedCyanBlue10--hover¶
0 samples
ms-bgColor-sharedCyanBlue20¶
0 samples
ms-bgColor-sharedCyanBlue20--hover¶
1 sample
ms-bgColor-sharedGray10¶
1 sample
ms-bgColor-sharedGray10--hover¶
0 samples
ms-bgColor-sharedGray20¶
0 samples
ms-bgColor-sharedGray20--hover¶
0 samples
ms-bgColor-sharedGray30¶
0 samples
ms-bgColor-sharedGray30--hover¶
0 samples
ms-bgColor-sharedGray40¶
0 samples
ms-bgColor-sharedGray40--hover¶
0 samples
ms-bgColor-sharedGreen10¶
0 samples
ms-bgColor-sharedGreen10--hover¶
0 samples
ms-bgColor-sharedGreen20¶
0 samples
ms-bgColor-sharedGreen20--hover¶
1 sample
ms-bgColor-sharedGreenCyan10¶
0 samples
ms-bgColor-sharedGreenCyan10--hover¶
0 samples
ms-bgColor-sharedMagenta10¶
0 samples
ms-bgColor-sharedMagenta10--hover¶
0 samples
ms-bgColor-sharedMagenta20¶
0 samples
ms-bgColor-sharedMagenta20--hover¶
0 samples
ms-bgColor-sharedMagentaPink10¶
0 samples
ms-bgColor-sharedMagentaPink10--hover¶
0 samples
ms-bgColor-sharedMagentaPink20¶
0 samples
ms-bgColor-sharedMagentaPink20--hover¶
2 samples
ms-bgColor-sharedOrange10¶
0 samples
ms-bgColor-sharedOrange10--hover¶
0 samples
ms-bgColor-sharedOrange20¶
1 sample
ms-bgColor-sharedOrange20--hover¶
0 samples
ms-bgColor-sharedOrange30¶
0 samples
ms-bgColor-sharedOrange30--hover¶
1 sample
ms-bgColor-sharedOrangeYellow10¶
0 samples
ms-bgColor-sharedOrangeYellow10--hover¶
0 samples
ms-bgColor-sharedOrangeYellow20¶
0 samples
ms-bgColor-sharedOrangeYellow20--hover¶
0 samples
ms-bgColor-sharedPinkRed10¶
0 samples
ms-bgColor-sharedPinkRed10--hover¶
2 samples
ms-bgColor-sharedRed10¶
0 samples
ms-bgColor-sharedRed10--hover¶
1 sample
ms-bgColor-sharedRed20¶
0 samples
ms-bgColor-sharedRed20--hover¶
1 sample
ms-bgColor-sharedRedOrange10¶
0 samples
ms-bgColor-sharedRedOrange10--hover¶
0 samples
ms-bgColor-sharedRedOrange20¶
0 samples
ms-bgColor-sharedRedOrange20--hover¶
4 samples
ms-bgColor-sharedYellow10¶
0 samples
ms-bgColor-sharedYellow10--hover¶
2 samples
ms-bgColor-sharedYellowGreen10¶
0 samples
ms-bgColor-sharedYellowGreen10--hover¶
0 samples
ms-bgColor-success¶
0 samples
ms-bgColor-success--hover¶
0 samples
ms-bgColor-teal¶
0 samples
ms-bgColor-tealDark¶
0 samples
ms-bgColor-tealDark--hover¶
2 samples
ms-bgColor-teal--hover¶
3 samples
ms-bgColor-tealLight¶
0 samples
ms-bgColor-tealLight--hover¶
1 sample
ms-bgColor-themeDark¶
0 samples
ms-bgColor-themeDarkAlt¶
0 samples
ms-bgColor-themeDarkAlt--hover¶
3 samples
ms-bgColor-themeDarker¶
0 samples
ms-bgColor-themeDarker--hover¶
4 samples
ms-bgColor-themeDark--hover¶
8 samples
ms-bgColor-themeLight¶
- Count the Number of Clicks on a Link
- Current User's Rows
- Current User's Rows (Using a Multi-Person Column)
- Multi-Choice Links
- Multi-Choice Links
- Number Battery
- Number Circle in Circle
- World Time
14 samples
ms-bgColor-themeLighter¶
- Advent Calendar
- Alternating Rows
- Average Rating Row Class
- Calculator
- Count the Number of Clicks on a Link
- Current User Liked Row Class
- Decimal to Binary Conversion
- Demote News to Site Page
- Display a User's Photo in Group Header
- Display User Properties in the Group Header
- Elf Progress Board
- Likes Count Row Class
- Link Collection using Emojis
- Message Chat Bubbles
8 samples
ms-bgColor-themeLighterAlt¶
- Bar Graph
- Birthdays
- Column Graph
- Document Library Thumbnails
- FAQ Accordion
- Icon Link Tiles
- Multi-Choice Links
- Out of Office
2 samples
ms-bgColor-themeLighterAlt--hover¶
6 samples
ms-bgColor-themeLighter--hover¶
5 samples
ms-bgColor-themeLight--hover¶
38 samples
ms-bgColor-themePrimary¶
- Board Tags
- Bulletin Board
- Calculator
- Chronological Items
- Count the Number of Clicks on a Link
- Custom Header
- Dashed Line Header
- Demote News to Site Page
- Display Count Up and Count Down Buttons
- Download File Button
- Event Itinerary Header
- Event Registration
- FAQs
- Field Value Update Button
- Liked By Users
- Link Collection using Emojis
- Location Bing Maps
- Managed Metadata Tag Icon
- Multi-Choice forEach
- Number Battery
- One Point Chart
- Page-a-day Calendar
- Payments
- Piano
- Praise Cards
- Ribbon Header
- Staff Rota Shifts with CSS Table
- Teams Group Chat Links
- Tic-tac-toe
- Timeline
- Timeline Format
- Timeline in Board View
- To-Do List
- Video Gallery
- World Time
- Yearly Gantt Chart
- Yes/No Column Toggle
- Yes/No Icon Color
6 samples
ms-bgColor-themePrimary--hover¶
- Bar Graph
- Column Graph
- Count the Number of Clicks on a Link
- Document Library Thumbnails
- Field Value Update Button
- Icon Link Tiles
0 samples
ms-bgColor-themeSecondary¶
0 samples
ms-bgColor-themeSecondary--hover¶
6 samples
ms-bgColor-themeTertiary¶
- Current Year Row Class
- Flow Status
- Liked By Users
- Shaded Backgrounds
- Teams Group Chat Links
- Yearly Gantt Chart
5 samples
ms-bgColor-themeTertiary--hover¶
- Flow Status
- Liked By Users
- Reacting and displaying users who have reacted
- Teams Group Chat Links
- Yearly Gantt Chart
0 samples
ms-bgColor-warning¶
0 samples
ms-bgColor-warning--hover¶
20 samples
ms-bgColor-white¶
- Board Tags
- Bulletin Board
- Content Navigator
- ContentType Variations
- Demote News to Site Page
- Elf Progress Board
- Employee Onboarding: Steps
- Event Itinerary Header
- Flashcards
- Flow Status
- Issue Tracker: Planner Cards
- Link Collection using Emojis
- London Underground Line Status
- Modern Event Tiles
- Multi-Person Displays
- Number Circle in Circle
- Reorder and Expand Board Items
- Sticky Notes Board
- Wordle
- Yes/No Column Toggle
1 sample
ms-bgColor-white--hover¶
9 samples
ms-bgColor-yellow¶
- Number Battery
- Number Level Bar
- Project Health Dashboard
- Project Indicator Formats
- Request Sign-off
- Risk Score Indicator
- RYG Status
- Status Header and Footer
- Traffic Light (Red-Yellow-Green) Status Indicator
1 sample
ms-bgColor-yellow--hover¶
0 samples
ms-bgColor-yellowLight¶
0 samples