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¶
1 sample
ms-bgColor-black--hover¶
6 samples
ms-bgColor-blue¶
- Approval Status Icons and Colors
- Butterfly Chart
- Event Registration
- Linkinbio_Instagram
- Payments
- Stat Comparison Chart
0 samples
ms-bgColor-blue--hover¶
0 samples
ms-bgColor-blueDark¶
2 samples
ms-bgColor-blueDark--hover¶
2 samples
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¶
1 sample
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¶
1 sample
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¶
1 sample
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¶
1 sample
ms-bgColor-gray10--hover¶
0 samples
ms-bgColor-gray100¶
0 samples
ms-bgColor-gray100--hover¶
0 samples
ms-bgColor-gray110¶
0 samples
ms-bgColor-gray110--hover¶
0 samples
ms-bgColor-gray120¶
0 samples
ms-bgColor-gray120--hover¶
1 sample
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¶
0 samples
ms-bgColor-gray20¶
0 samples
ms-bgColor-gray20--hover¶
0 samples
ms-bgColor-gray200¶
0 samples
ms-bgColor-gray200--hover¶
0 samples
ms-bgColor-gray210¶
0 samples
ms-bgColor-gray210--hover¶
0 samples
ms-bgColor-gray220¶
0 samples
ms-bgColor-gray220--hover¶
2 samples
ms-bgColor-gray30¶
4 samples
ms-bgColor-gray30--hover¶
1 sample
ms-bgColor-gray40¶
0 samples
ms-bgColor-gray40--hover¶
0 samples
ms-bgColor-gray50¶
1 sample
ms-bgColor-gray50--hover¶
0 samples
ms-bgColor-gray60¶
3 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
1 sample
ms-bgColor-green--hover¶
0 samples
ms-bgColor-greenDark¶
0 samples
ms-bgColor-greenDark--hover¶
4 samples
ms-bgColor-greenLight¶
1 sample
ms-bgColor-greenLight--hover¶
0 samples
ms-bgColor-info¶
3 samples
ms-bgColor-info--hover¶
0 samples
ms-bgColor-magenta¶
1 sample
ms-bgColor-magenta--hover¶
0 samples
ms-bgColor-magentaDark¶
0 samples
ms-bgColor-magentaDark--hover¶
1 sample
ms-bgColor-magentaLight¶
0 samples
ms-bgColor-magentaLight--hover¶
0 samples
ms-bgColor-neutralDark¶
0 samples
ms-bgColor-neutralDark--hover¶
19 samples
ms-bgColor-neutralLight¶
- Assign to Me
- Board Tags
- Display Comma-Separated Text as Tags
- Display Created and Modified Information in the Footer
- Elf Progress Board
- Exam Bundle Tracker
- Linkinbio
- Modern Event Tiles
- Multi-Person Facepile
- Multi-Person inline edit pill
- Picture Quick Links
- Pie Chart
- Project Gantt Chart
- Project Gantt Chart
- Project Health Dashboard
- Rating in Tiles
- Status Header and Footer
- Student & Class Learning Tracker
- Video Gallery
10 samples
ms-bgColor-neutralLight--hover¶
- Bookmarks
- Discussion Board
- Issue Tracker: Planner Cards
- Modern Event Cards
- Person Cards
- photo-gallery-with-likes
- Speed Dial
- Team Poll
- To-Do List
- User Profile Card
11 samples
ms-bgColor-neutralLighter¶
- Contact Cards
- Elf Progress Board
- Links to Search Page
- Message Chat Bubbles
- Numbered List Card
- Request Sign-off
- Resource Catalog Sample
- Retail Accounts
- Team Poll
- Testimonials
- Video Embed Codes
3 samples
ms-bgColor-neutralLighter--hover¶
5 samples
ms-bgColor-neutralLighterAlt¶
0 samples
ms-bgColor-neutralLighterAlt--hover¶
3 samples
ms-bgColor-neutralPrimary¶
2 samples
ms-bgColor-neutralPrimary--hover¶
0 samples
ms-bgColor-neutralPrimaryAlt¶
0 samples
ms-bgColor-neutralPrimaryAlt--hover¶
1 sample
ms-bgColor-neutralQuaternary¶
2 samples
ms-bgColor-neutralQuaternary--hover¶
2 samples
ms-bgColor-neutralQuaternaryAlt¶
0 samples
ms-bgColor-neutralQuaternaryAlt--hover¶
2 samples
ms-bgColor-neutralSecondary¶
1 sample
ms-bgColor-neutralSecondary--hover¶
2 samples
ms-bgColor-neutralSecondaryAlt¶
0 samples
ms-bgColor-neutralSecondaryAlt--hover¶
4 samples
ms-bgColor-neutralTertiary¶
2 samples
ms-bgColor-neutralTertiary--hover¶
2 samples
ms-bgColor-neutralTertiaryAlt¶
1 sample
ms-bgColor-neutralTertiaryAlt--hover¶
2 samples
ms-bgColor-orange¶
1 sample
ms-bgColor-orange--hover¶
3 samples
ms-bgColor-orangeLight¶
1 sample
ms-bgColor-orangeLight--hover¶
6 samples
ms-bgColor-orangeLighter¶
1 sample
ms-bgColor-orangeLighter--hover¶
2 samples
ms-bgColor-purple¶
0 samples
ms-bgColor-purple--hover¶
0 samples
ms-bgColor-purpleDark¶
3 samples
ms-bgColor-purpleDark--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
2 samples
ms-bgColor-red--hover¶
4 samples
ms-bgColor-redDark¶
4 samples
ms-bgColor-redDark--hover¶
1 sample
ms-bgColor-severeWarning¶
1 sample
ms-bgColor-severeWarning--hover¶
0 samples
ms-bgColor-sharedBlue10¶
0 samples
ms-bgColor-sharedBlue10--hover¶
3 samples
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¶
1 sample
ms-bgColor-sharedCyanBlue20--hover¶
1 sample
ms-bgColor-sharedGray10¶
2 samples
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¶
1 sample
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¶
3 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¶
1 sample
ms-bgColor-sharedYellowGreen10¶
0 samples
ms-bgColor-sharedYellowGreen10--hover¶
0 samples
ms-bgColor-success¶
1 sample
ms-bgColor-success--hover¶
1 sample
ms-bgColor-teal¶
2 samples
ms-bgColor-teal--hover¶
0 samples
ms-bgColor-tealDark¶
0 samples
ms-bgColor-tealDark--hover¶
4 samples
ms-bgColor-tealLight¶
0 samples
ms-bgColor-tealLight--hover¶
1 sample
ms-bgColor-themeDark¶
6 samples
ms-bgColor-themeDark--hover¶
- Display Count Up and Count Down Buttons
- Field Value Update Button
- Piano
- Student & Class Learning Tracker
- Travel Tweets Board
- Yes/No Icon Color
0 samples
ms-bgColor-themeDarkAlt¶
0 samples
ms-bgColor-themeDarkAlt--hover¶
4 samples
ms-bgColor-themeDarker¶
0 samples
ms-bgColor-themeDarker--hover¶
14 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)
- Gantt Chart
- Hyperlink long addresses
- Multi-Choice Links
- Multi-Choice Links
- Multiple hyperlinks in single field
- Number Battery
- Number Circle in Circle
- Project Gantt Chart
- Travel Requests
- World Current Time
- World Time
12 samples
ms-bgColor-themeLight--hover¶
- Alternating Rows
- Bulletin Board
- Calculator
- Custom Hover Card (View)
- Display QR Code
- Exam Bundle Tracker
- Highlight rows on current day of the week
- Hyperlink long addresses
- Multiple hyperlinks in single field
- Project Gantt Chart
- Tic-tac-toe
- Yearly Gantt Chart
26 samples
ms-bgColor-themeLighter¶
- Advent Calendar
- Alternating Rows
- Assign to Me
- 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
- Department Members List
- Display a User's Photo in Group Header
- Display Link to Google Maps
- Display User Properties in the Group Header
- Elf Progress Board
- Exam Bundle Tracker
- File Preview Callout with the embed Action
- Highlight rows on current day of the week
- Likes Count Row Class
- Link Collection using Emojis
- Message Chat Bubbles
- Multilingual Quotes
- Multiple hyperlinks in single field
- Picture Link Tiles
- Picture Link Tiles Doc Lib
- Rating in Tiles
- Team Poll
11 samples
ms-bgColor-themeLighter--hover¶
- Bulletin Board
- Context Menu
- Demote News to Site Page
- Gantt Chart
- Links to Search Page
- Links to Search Page
- Multi-Choice Links
- Multi-Choice Links
- Piano
- Praise Cards
- Vertical Mega Menu
9 samples
ms-bgColor-themeLighterAlt¶
- Bar Graph
- Birthdays
- Column Graph
- Document Library Thumbnails
- FAQ Accordion
- Icon Link Tiles
- Multi-Choice Links
- Out of Office
- Picture Link Tiles Doc Lib
3 samples
ms-bgColor-themeLighterAlt--hover¶
58 samples
ms-bgColor-themePrimary¶
- 0 to 10 Rating Scale
- Board Tags
- Bulletin Board
- Calculator
- Chronological Items
- Context Menu
- Count the Number of Clicks on a Link
- Custom Header
- Dashed Line Header
- Demote News to Site Page
- Department Members List
- Discussion Board
- Display Count Up and Count Down Buttons
- Display Tags
- Download File Button
- Download Image from SharePoint Image column
- Event Itinerary Header
- Event Registration
- FAQs
- Field Value Update Button
- Gantt Chart
- Glossary View Formatters
- Highlight Selected List Item Rows
- Liked By Users
- Link Collection using Emojis
- Location Bing Maps
- Managed Metadata Tag Icon
- Modern Event Cards
- Multi-Choice forEach
- Number Battery
- Numbered List Card
- One Point Chart
- Page-a-day Calendar
- Payments
- Per 100 People Grid
- Person circle Header
- Piano
- Picture Link Tiles
- Praise Cards
- Pricing Table
- Project Gantt Chart
- Ribbon Header
- Staff Rota Shifts with CSS Table
- Student & Class Learning Tracker
- Teams Group Chat Links
- Tic-tac-toe
- Timeline
- Timeline Format
- Timeline in Board View
- To-Do List
- Travel Requests
- Travel Tweets Board
- Video Gallery
- World Current Time
- World Time
- Yearly Gantt Chart
- Yes/No Column Toggle
- Yes/No Icon Color
11 samples
ms-bgColor-themePrimary--hover¶
- Bar Graph
- Column Graph
- Count the Number of Clicks on a Link
- Display Link to Google Maps
- Document Library Thumbnails
- Field Value Update Button
- File Preview Callout with the embed Action
- Icon Link Tiles
- Linkinbio_Instagram
- Published Version
- World Time
0 samples
ms-bgColor-themeSecondary¶
0 samples
ms-bgColor-themeSecondary--hover¶
7 samples
ms-bgColor-themeTertiary¶
- Current Year Row Class
- Flow Status
- Liked By Users
- Project Gantt Chart
- 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¶
1 sample
ms-bgColor-warning--hover¶
35 samples
ms-bgColor-white¶
- Approval Status Icons and Colors
- Board Tags
- Bulletin Board
- Content Navigator
- ContentType Variations
- Demote News to Site Page
- Disable default click action on a tile list view
- Display Tags
- Elf Progress Board
- Employee Onboarding: Steps
- Event Itinerary Header
- Flashcards
- Flow Status
- Glossary View Formatters
- Issue Tracker: Planner Cards
- Link Collection using Emojis
- London Underground Line Status
- Menu Style List
- Modern Event Cards
- Modern Event Tiles
- Multi-Person Displays
- Number Circle in Circle
- photo-gallery-with-likes
- Picture Link Tiles
- Pricing Table
- Prompt Cards
- Published Version
- Rating in Tiles
- Reorder and Expand Board Items
- Sticky Notes Board
- Team Poll
- Travel Requests
- Travel Tweets Board
- Wordle
- Yes/No Column Toggle
1 sample
ms-bgColor-white--hover¶
10 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
- Two Column Logo Header
1 sample
ms-bgColor-yellow--hover¶
0 samples
ms-bgColor-yellowLight¶
0 samples