Samples by Class: ms-fontColor-*¶
The ms-fontColor-* classes apply a font 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-bgColor-* classes and except where noted (on those pages) contain equivalent colors.
1 sample
ms-fontColor-alert¶
0 samples
ms-fontColor-alert--hover¶
13 samples
ms-fontColor-black¶
- Approval Status Hover Card
- Custom Hover Card (Column)
- Custom Hover Card (View)
- Event Registration
- Expand Collapse Format
- Icon Overlays
- London Underground Line Status
- Modern Event Tiles
- Multi-Person Displays
- Payments
- Stat Comparison Chart
- Twitter Timeline
- Video Gallery
1 sample
ms-fontColor-black--hover¶
4 samples
ms-fontColor-blue¶
2 samples
ms-fontColor-blueDark¶
0 samples
ms-fontColor-blueDark--hover¶
0 samples
ms-fontColor-blue--hover¶
0 samples
ms-fontColor-blueLight¶
0 samples
ms-fontColor-blueLight--hover¶
0 samples
ms-fontColor-blueMid¶
0 samples
ms-fontColor-blueMid--hover¶
0 samples
ms-fontColor-communicationPrimary¶
0 samples
ms-fontColor-communicationPrimary--hover¶
0 samples
ms-fontColor-communicationShade10¶
0 samples
ms-fontColor-communicationShade10--hover¶
0 samples
ms-fontColor-communicationShade20¶
0 samples
ms-fontColor-communicationShade20--hover¶
0 samples
ms-fontColor-communicationShade30¶
0 samples
ms-fontColor-communicationShade30--hover¶
0 samples
ms-fontColor-communicationTint10¶
0 samples
ms-fontColor-communicationTint10--hover¶
0 samples
ms-fontColor-communicationTint20¶
0 samples
ms-fontColor-communicationTint20--hover¶
0 samples
ms-fontColor-communicationTint30¶
0 samples
ms-fontColor-communicationTint30--hover¶
0 samples
ms-fontColor-communicationTint40¶
0 samples
ms-fontColor-communicationTint40--hover¶
0 samples
ms-fontColor-contrastBlackDisabled¶
0 samples
ms-fontColor-contrastBlackDisabled--hover¶
0 samples
ms-fontColor-contrastBlackSelected¶
0 samples
ms-fontColor-contrastBlackSelected--hover¶
0 samples
ms-fontColor-contrastWhiteDisabled¶
0 samples
ms-fontColor-contrastWhiteDisabled--hover¶
0 samples
ms-fontColor-contrastWhiteSelected¶
0 samples
ms-fontColor-contrastWhiteSelected--hover¶
0 samples
ms-fontColor-error¶
0 samples
ms-fontColor-error--hover¶
0 samples
ms-fontColor-gray10¶
5 samples
ms-fontColor-gray100¶
0 samples
ms-fontColor-gray100--hover¶
0 samples
ms-fontColor-gray10--hover¶
0 samples
ms-fontColor-gray110¶
0 samples
ms-fontColor-gray110--hover¶
1 sample
ms-fontColor-gray120¶
0 samples
ms-fontColor-gray120--hover¶
0 samples
ms-fontColor-gray130¶
0 samples
ms-fontColor-gray130--hover¶
0 samples
ms-fontColor-gray140¶
0 samples
ms-fontColor-gray140--hover¶
0 samples
ms-fontColor-gray150¶
0 samples
ms-fontColor-gray150--hover¶
0 samples
ms-fontColor-gray160¶
0 samples
ms-fontColor-gray160--hover¶
0 samples
ms-fontColor-gray170¶
0 samples
ms-fontColor-gray170--hover¶
0 samples
ms-fontColor-gray180¶
0 samples
ms-fontColor-gray180--hover¶
0 samples
ms-fontColor-gray190¶
0 samples
ms-fontColor-gray190--hover¶
0 samples
ms-fontColor-gray20¶
0 samples
ms-fontColor-gray200¶
0 samples
ms-fontColor-gray200--hover¶
0 samples
ms-fontColor-gray20--hover¶
0 samples
ms-fontColor-gray210¶
0 samples
ms-fontColor-gray210--hover¶
0 samples
ms-fontColor-gray220¶
0 samples
ms-fontColor-gray220--hover¶
0 samples
ms-fontColor-gray30¶
0 samples
ms-fontColor-gray30--hover¶
0 samples
ms-fontColor-gray40¶
0 samples
ms-fontColor-gray40--hover¶
0 samples
ms-fontColor-gray50¶
0 samples
ms-fontColor-gray50--hover¶
0 samples
ms-fontColor-gray60¶
0 samples
ms-fontColor-gray60--hover¶
0 samples
ms-fontColor-gray70¶
0 samples
ms-fontColor-gray70--hover¶
0 samples
ms-fontColor-gray80¶
0 samples
ms-fontColor-gray80--hover¶
1 sample
ms-fontColor-gray90¶
0 samples
ms-fontColor-gray90--hover¶
9 samples
ms-fontColor-green¶
- Approval Status Hover Card
- ContentType Variations
- Custom Hover Card (Column)
- Custom Hover Card (View)
- Employee Onboarding: Steps
- Icon Overlays
- Icon Progress Bar
- Project Health Dashboard
- Substring Status
0 samples
ms-fontColor-greenDark¶
1 sample
ms-fontColor-greenDark--hover¶
0 samples
ms-fontColor-green--hover¶
1 sample
ms-fontColor-greenLight¶
0 samples
ms-fontColor-greenLight--hover¶
0 samples
ms-fontColor-info¶
0 samples
ms-fontColor-info--hover¶
0 samples
ms-fontColor-magenta¶
0 samples
ms-fontColor-magentaDark¶
0 samples
ms-fontColor-magentaDark--hover¶
0 samples
ms-fontColor-magenta--hover¶
2 samples
ms-fontColor-magentaLight¶
0 samples
ms-fontColor-magentaLight--hover¶
1 sample
ms-fontColor-neutralDark¶
0 samples
ms-fontColor-neutralDark--hover¶
5 samples
ms-fontColor-neutralLight¶
0 samples
ms-fontColor-neutralLighter¶
0 samples
ms-fontColor-neutralLighterAlt¶
0 samples
ms-fontColor-neutralLighterAlt--hover¶
0 samples
ms-fontColor-neutralLighter--hover¶
0 samples
ms-fontColor-neutralLight--hover¶
25 samples
ms-fontColor-neutralPrimary¶
- Birthdays
- Chronological Items
- Contact Cards
- Content Navigator
- Elf Progress Board
- Flashcards
- Flow Status
- Grouped FAQs
- Horse Crests
- Issue Tracker: Planner Cards
- Link Collection using Emojis
- Modern Event Tiles
- Multi-Choice Links
- Number Battery
- Number Level Bar
- Out of Office
- Pie Chart
- Planner Inspired Task Cards
- Reorder and Expand Board Items
- Request Sign-off
- Row Index Drawing
- Status Header and Footer
- Strikethrough on Completion
- Testimonials
- Yes/No Checkbox
0 samples
ms-fontColor-neutralPrimaryAlt¶
0 samples
ms-fontColor-neutralPrimaryAlt--hover¶
1 sample
ms-fontColor-neutralPrimary--hover¶
1 sample
ms-fontColor-neutralQuaternary¶
2 samples
ms-fontColor-neutralQuaternaryAlt¶
0 samples
ms-fontColor-neutralQuaternaryAlt--hover¶
0 samples
ms-fontColor-neutralQuaternary--hover¶
24 samples
ms-fontColor-neutralSecondary¶
- Birthdays
- Board Tags
- Chronological Items
- Conditional Text Formatting (Severity)
- Contact Cards
- Display a User's Photo in Group Header
- Document Library Thumbnails
- Elf Progress Board
- Employee Onboarding: Steps
- Flow Status
- Issue Tracker: Planner Cards
- Modern Event Tiles
- Multi-Choice Links
- Multi-Person Facepile
- Out of Office
- Praise Cards
- Project Health Dashboard
- Red-Amber-Green (RAG) Bars Based on Date Ranges
- Red-Amber-Green (RAG) Bars Based on Date Ranges
- Reorder and Expand Board Items
- Sticky Notes Board
- Video Gallery
- Yes/No Checkmark
- Yes/No Icon Color
5 samples
ms-fontColor-neutralSecondaryAlt¶
- Approval Status Hover Card
- Custom Hover Card (Column)
- Custom Hover Card (View)
- Sticky Notes Board
- Wordle
0 samples
ms-fontColor-neutralSecondaryAlt--hover¶
2 samples
ms-fontColor-neutralSecondary--hover¶
8 samples
ms-fontColor-neutralTertiary¶
- Birthdays
- Chronological Items
- Comment Count
- Contact Cards
- Elf Progress Board
- Heat Map
- Workflow Progress Header
- Yes/No Checkbox
6 samples
ms-fontColor-neutralTertiaryAlt¶
- Issue Tracker: Planner Cards
- Link Collection using Emojis
- Praise Cards
- Star Rating
- Wordle
- Yes/No Column Toggle
0 samples
ms-fontColor-neutralTertiaryAlt--hover¶
0 samples
ms-fontColor-neutralTertiary--hover¶
3 samples
ms-fontColor-orange¶
0 samples
ms-fontColor-orange--hover¶
3 samples
ms-fontColor-orangeLight¶
0 samples
ms-fontColor-orangeLighter¶
0 samples
ms-fontColor-orangeLighter--hover¶
0 samples
ms-fontColor-orangeLight--hover¶
0 samples
ms-fontColor-purple¶
0 samples
ms-fontColor-purpleDark¶
0 samples
ms-fontColor-purpleDark--hover¶
0 samples
ms-fontColor-purple--hover¶
0 samples
ms-fontColor-purpleLight¶
0 samples
ms-fontColor-purpleLight--hover¶
10 samples
ms-fontColor-red¶
- Approval Status Hover Card
- Butterfly Chart
- Field Value Update Button
- Icon Overlays
- Issue Tracker: Planner Cards
- Like/Dislike Bar
- Number Localization
- Payments
- Roll Dice
- Stat Comparison Chart
9 samples
ms-fontColor-redDark¶
- Conditionally Launch Flow for Item
- ContentType Variations
- Custom Header
- Icon Overlays
- Number Localization
- Overdue Date
- Request Sign-off
- Substring Status
- Text Contains
0 samples
ms-fontColor-redDark--hover¶
3 samples
ms-fontColor-red--hover¶
0 samples
ms-fontColor-severeWarning¶
0 samples
ms-fontColor-severeWarning--hover¶
0 samples
ms-fontColor-sharedBlue10¶
0 samples
ms-fontColor-sharedBlue10--hover¶
0 samples
ms-fontColor-sharedBlueMagenta10¶
0 samples
ms-fontColor-sharedBlueMagenta10--hover¶
0 samples
ms-fontColor-sharedBlueMagenta20¶
0 samples
ms-fontColor-sharedBlueMagenta20--hover¶
0 samples
ms-fontColor-sharedBlueMagenta30¶
0 samples
ms-fontColor-sharedBlueMagenta30--hover¶
0 samples
ms-fontColor-sharedBlueMagenta40¶
0 samples
ms-fontColor-sharedBlueMagenta40--hover¶
0 samples
ms-fontColor-sharedCyan10¶
0 samples
ms-fontColor-sharedCyan10--hover¶
0 samples
ms-fontColor-sharedCyan20¶
0 samples
ms-fontColor-sharedCyan20--hover¶
0 samples
ms-fontColor-sharedCyan30¶
0 samples
ms-fontColor-sharedCyan30--hover¶
0 samples
ms-fontColor-sharedCyan40¶
0 samples
ms-fontColor-sharedCyan40--hover¶
0 samples
ms-fontColor-sharedCyanBlue10¶
0 samples
ms-fontColor-sharedCyanBlue10--hover¶
1 sample
ms-fontColor-sharedCyanBlue20¶
0 samples
ms-fontColor-sharedCyanBlue20--hover¶
1 sample
ms-fontColor-sharedGray10¶
0 samples
ms-fontColor-sharedGray10--hover¶
0 samples
ms-fontColor-sharedGray20¶
0 samples
ms-fontColor-sharedGray20--hover¶
0 samples
ms-fontColor-sharedGray30¶
0 samples
ms-fontColor-sharedGray30--hover¶
0 samples
ms-fontColor-sharedGray40¶
0 samples
ms-fontColor-sharedGray40--hover¶
0 samples
ms-fontColor-sharedGreen10¶
0 samples
ms-fontColor-sharedGreen10--hover¶
1 sample
ms-fontColor-sharedGreen20¶
0 samples
ms-fontColor-sharedGreen20--hover¶
2 samples
ms-fontColor-sharedGreenCyan10¶
0 samples
ms-fontColor-sharedGreenCyan10--hover¶
0 samples
ms-fontColor-sharedMagenta10¶
0 samples
ms-fontColor-sharedMagenta10--hover¶
0 samples
ms-fontColor-sharedMagenta20¶
0 samples
ms-fontColor-sharedMagenta20--hover¶
0 samples
ms-fontColor-sharedMagentaPink10¶
0 samples
ms-fontColor-sharedMagentaPink10--hover¶
0 samples
ms-fontColor-sharedMagentaPink20¶
0 samples
ms-fontColor-sharedMagentaPink20--hover¶
0 samples
ms-fontColor-sharedOrange10¶
0 samples
ms-fontColor-sharedOrange10--hover¶
1 sample
ms-fontColor-sharedOrange20¶
0 samples
ms-fontColor-sharedOrange20--hover¶
0 samples
ms-fontColor-sharedOrange30¶
0 samples
ms-fontColor-sharedOrange30--hover¶
1 sample
ms-fontColor-sharedOrangeYellow10¶
0 samples
ms-fontColor-sharedOrangeYellow10--hover¶
0 samples
ms-fontColor-sharedOrangeYellow20¶
0 samples
ms-fontColor-sharedOrangeYellow20--hover¶
0 samples
ms-fontColor-sharedPinkRed10¶
0 samples
ms-fontColor-sharedPinkRed10--hover¶
0 samples
ms-fontColor-sharedRed10¶
0 samples
ms-fontColor-sharedRed10--hover¶
2 samples
ms-fontColor-sharedRed20¶
0 samples
ms-fontColor-sharedRed20--hover¶
1 sample
ms-fontColor-sharedRedOrange10¶
0 samples
ms-fontColor-sharedRedOrange10--hover¶
0 samples
ms-fontColor-sharedRedOrange20¶
0 samples
ms-fontColor-sharedRedOrange20--hover¶
1 sample
ms-fontColor-sharedYellow10¶
0 samples
ms-fontColor-sharedYellow10--hover¶
0 samples
ms-fontColor-sharedYellowGreen10¶
0 samples
ms-fontColor-sharedYellowGreen10--hover¶
1 sample
ms-fontColor-success¶
0 samples
ms-fontColor-success--hover¶
2 samples
ms-fontColor-teal¶
0 samples
ms-fontColor-tealDark¶
0 samples
ms-fontColor-tealDark--hover¶
0 samples
ms-fontColor-teal--hover¶
1 sample
ms-fontColor-tealLight¶
0 samples
ms-fontColor-tealLight--hover¶
12 samples
ms-fontColor-themeDark¶
- Approval Status Hover Card
- Bar Graph
- Column Graph
- File Preview
- Launch a Flow for a Selected Item
- Launch Power App Button
- MailTo Button
- Multi-Choice Icons
- Multi-Choice Links
- Multi-Choice Links
- Ribbon Header
- Row Actions
0 samples
ms-fontColor-themeDarkAlt¶
0 samples
ms-fontColor-themeDarkAlt--hover¶
4 samples
ms-fontColor-themeDarker¶
- Approval Status Hover Card
- Display Hourglass
- Launch a Flow for a Selected Item
- Number Circle in Circle
6 samples
ms-fontColor-themeDarker--hover¶
- Approval Status Hover Card
- Course Registration
- Inline Approval
- Launch a Flow for a Selected Item
- Like / Dislike - Unique reaction
- Project Gantt Chart
8 samples
ms-fontColor-themeDark--hover¶
- Bulletin Board
- Display Hourglass
- File Preview
- Launch Power App Button
- MailTo Button
- Multi-Person Teams Chat Link
- Praise Cards
- Row Actions
3 samples
ms-fontColor-themeLight¶
1 sample
ms-fontColor-themeLighter¶
0 samples
ms-fontColor-themeLighterAlt¶
0 samples
ms-fontColor-themeLighterAlt--hover¶
0 samples
ms-fontColor-themeLighter--hover¶
3 samples
ms-fontColor-themeLight--hover¶
2 samples
ms-fontColor-themeSecondary¶
0 samples
ms-fontColor-themeSecondary--hover¶
2 samples
ms-fontColor-themeTertiary¶
2 samples
ms-fontColor-themeTertiary--hover¶
0 samples
ms-fontColor-warning¶
0 samples
ms-fontColor-warning--hover¶
49 samples
ms-fontColor-white¶
- Bar Graph
- Board Tags
- Bulletin Board
- Calculator
- Column Graph
- Count the Number of Clicks on a Link
- Custom Header
- Dashed Line Header
- Demote News to Site Page
- Discussion Board
- Display Count Up and Count Down Buttons
- Download File Button
- Employee Onboarding: Steps
- Event Itinerary Header
- Event Registration
- FAQs
- Field Value Update Button
- Field Value Update Button
- Honeycomb Links
- Image Lightbox
- Image Slider
- Issue Tracker: Planner Cards
- Liked By Users
- Location Bing Maps
- London Underground Line Status
- Managed Metadata Tag Icon
- Multi-Choice forEach
- Multi-Person Displays
- Page-a-day Calendar
- Payments
- Piano
- Praise Cards
- Project Health Dashboard
- Project Indicator Formats
- Random Item
- Retail Accounts
- Ribbon Header
- Risk Score Indicator
- Roll Dice
- Rounded Fill Checkbox
- RYG Status
- Staff Rota Shifts with CSS Table
- Stat Comparison Chart
- Teams Group Chat Links
- To-Do List
- Video Gallery
- Wordle
- World Time
- Yes/No Icon Color
8 samples
ms-fontColor-white--hover¶
- Bar Graph
- Column Graph
- ContentType Variations
- Count the Number of Clicks on a Link
- Document Library Thumbnails
- Field Value Update Button
- Icon Link Tiles
- Menu Link Tiles
4 samples
ms-fontColor-yellow¶
0 samples
ms-fontColor-yellow--hover¶
0 samples
ms-fontColor-yellowLight¶
0 samples
ms-fontColor-yellowLight--hover¶
0 samples
themePrimary¶
0 samples