office-ui-fabric-core
Version:
The front-end framework for building experiences for Office 365.
620 lines (598 loc) • 143 kB
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Office Fabric UI Core Documentation</title>
<link rel="stylesheet" href="../../css/fabric.css">
<link rel="stylesheet" href="../docs.css">
<link rel="stylesheet"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.2/css/fabric.components.min.css">
</head>
<body class="ms-Fabric">
<div id="body-content">
<div id="Header" class="docs-Header">
<a class="ms-font-xxl ms-fontColor-white" href="/">Office UI Fabric</a>
<div class="Header-buttons">
<a href="https://github.com/OfficeDev/office-ui-fabric-core/"
class="Header-button ms-fontColor-white">Github</a>
</div>
</div>
<div class="docs-Page has-leftNav">
<div class="docs-Page-leftNav">
<div class="LeftNav-links" role="menu" aria-label="Anchor links for navigating this page">
<div class="LeftNav-item">
<a class="Typography LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Typography">Typography</a>
</div>
<div class="LeftNav-item">
<a class="Color LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Color">Color</a>
</div>
<div class="LeftNav-item">
<a class="Icons LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Icons">Icons</a>
</div>
<div class="LeftNav-item">
<a class="Icons LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/BrandIcons">BrandIcons</a>
</div>
<div class="LeftNav-item">
<a class="Animations LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Animations">Animations</a>
</div>
<div class="LeftNav-item">
<a class="Responsive-Grid LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Responsive-Grid">Responsive Grid</a>
</div>
<div class="LeftNav-item">
<a class="Localization LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Localization">Localization</a>
</div>
<div class="LeftNav-item">
<a class="Scoping LeftNav-link ms-border-color-themePrimary ms-font-l ms-font-color-neutralSecondary"
href="/Scoping">Scoping</a>
</div>
</div>
</div>
<div class="docs-Styles-section" id="color">
<h2>Color</h2>
<p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, border, background, and hover states.</p>
<h3>Theme colors</h3>
<p>Use theme colors in wayfinding, navigation, and key interactions like primary actions and current or selected indicators.</p>
<div class="docs-colorContainer" role="grid">
<!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Darker, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeDarker" aria-label="Example for ms-bgColor-themeDarker">
<span class="ms-font-size-m ms-fontColor-white">Theme Darker<br />
#004578</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-themeDarker" aria-label="Example for ms-fontColor-themeDarker">
<span class="ms-font-su ms-fontColor-themeDarker">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeDarker" aria-label="Example for ms-borderColor-themeDarker">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Darker, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeDarker">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeDarker</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeDarker">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeDarker</p>
<!-- Info Button -->
<button class="Typography-infoButton" aria-label="High contrast informatoin for the color Theme Darker"> <i class="ms-Icon ms-Icon--Info ms-fontColor-neutralPrimary" aria-hidden="true"></i> </button>
<div class="ms-Callout docs-ColorSection-swatchCallout ms-Callout--arrowTop">
<div class="ms-Callout-main ms-clearfix">
<div class="ms-Callout-header">
<p class="ms-Callout-title">Acceptable Backgrounds</p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<div class="docs-ColorSection-contrastTextColumn">
<div class="docs-ColorSection-contrastCaption">
<div class="docs-ColorSection-contrastCaptionLeft">
<h4>Background Color Class:</h4></div>
<div class="docs-ColorSection-contrastCaptionRight">
<h4>Ratio:</h4></div>
</div>
<div class="docs-ColorSection-contrastData">
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLight ms-fontColor-themeDarker" title="ms-bgColor-neutralLight">ms-bgColor-neutralLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLight ms-fontColor-themeDarker">7:6:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-themeDarker" title="ms-bgColor-neutralLighter">ms-bgColor-neutralLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-themeDarker">8:3:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-themeDarker" title="ms-bgColor-neutralLightAlt">ms-bgColor-neutralLightAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-themeDarker">8:6:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-themeDarker" title="ms-bgColor-themeLight">ms-bgColor-themeLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-themeDarker">6:7:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-themeDarker" title="ms-bgColor-themeLighter">ms-bgColor-themeLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-themeDarker">7:6:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-themeDarker" title="ms-bgColor-themeLighterAlt">ms-bgColor-themeLighterAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-themeDarker">8:4:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themeDarker" title="ms-bgColor-white">ms-bgColor-white</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themeDarker">9:1:1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeDarker">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeDarker</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Dark, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeDark" aria-label="Example for ms-bgColor-themeDark">
<span class="ms-font-size-m ms-fontColor-white">Theme Dark<br />
#005A9E</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-themeDark" aria-label="Example for ms-fontColor-themeDark">
<span class="ms-font-su ms-fontColor-themeDark">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeDark" aria-label="Example for ms-borderColor-themeDark">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Dark, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeDark">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeDark</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeDark">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeDark</p>
<!-- Info Button -->
<button class="Typography-infoButton" aria-label="High contrast informatoin for the color Theme Dark"> <i class="ms-Icon ms-Icon--Info ms-fontColor-neutralPrimary" aria-hidden="true"></i> </button>
<div class="ms-Callout docs-ColorSection-swatchCallout ms-Callout--arrowTop">
<div class="ms-Callout-main ms-clearfix">
<div class="ms-Callout-header">
<p class="ms-Callout-title">Acceptable Backgrounds</p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<div class="docs-ColorSection-contrastTextColumn">
<div class="docs-ColorSection-contrastCaption">
<div class="docs-ColorSection-contrastCaptionLeft">
<h4>Background Color Class:</h4></div>
<div class="docs-ColorSection-contrastCaptionRight">
<h4>Ratio:</h4></div>
</div>
<div class="docs-ColorSection-contrastData">
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLight ms-fontColor-themeDark" title="ms-bgColor-neutralLight">ms-bgColor-neutralLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLight ms-fontColor-themeDark">5:2:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-themeDark" title="ms-bgColor-neutralLighter">ms-bgColor-neutralLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-themeDark">5:7:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-themeDark" title="ms-bgColor-neutralLightAlt">ms-bgColor-neutralLightAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-themeDark">5:9:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-themeDark" title="ms-bgColor-themeLight">ms-bgColor-themeLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-themeDark">4:6:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-themeDark" title="ms-bgColor-themeLighter">ms-bgColor-themeLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-themeDark">5:2:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-themeDark" title="ms-bgColor-themeLighterAlt">ms-bgColor-themeLighterAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-themeDark">5:7:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themeDark" title="ms-bgColor-white">ms-bgColor-white</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themeDark">6:3:1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeDark">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeDark</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Dark Alt, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeDarkAlt" aria-label="Example for ms-bgColor-themeDarkAlt">
<span class="ms-font-size-m ms-fontColor-white">Theme Dark Alt<br />
#106EBE</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-themeDarkAlt" aria-label="Example for ms-fontColor-themeDarkAlt">
<span class="ms-font-su ms-fontColor-themeDarkAlt">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeDarkAlt" aria-label="Example for ms-borderColor-themeDarkAlt">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Dark Alt, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeDarkAlt">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeDarkAlt</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeDarkAlt">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeDarkAlt</p>
<!-- Info Button -->
<button class="Typography-infoButton" aria-label="High contrast informatoin for the color Theme Dark Alt"> <i class="ms-Icon ms-Icon--Info ms-fontColor-neutralPrimary" aria-hidden="true"></i> </button>
<div class="ms-Callout docs-ColorSection-swatchCallout ms-Callout--arrowTop">
<div class="ms-Callout-main ms-clearfix">
<div class="ms-Callout-header">
<p class="ms-Callout-title">Acceptable Backgrounds</p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<div class="docs-ColorSection-contrastTextColumn">
<div class="docs-ColorSection-contrastCaption">
<div class="docs-ColorSection-contrastCaptionLeft">
<h4>Background Color Class:</h4></div>
<div class="docs-ColorSection-contrastCaptionRight">
<h4>Ratio:</h4></div>
</div>
<div class="docs-ColorSection-contrastData">
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-themeDarkAlt" title="ms-bgColor-neutralLighter">ms-bgColor-neutralLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-themeDarkAlt">4:8:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-themeDarkAlt" title="ms-bgColor-neutralLightAlt">ms-bgColor-neutralLightAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-themeDarkAlt">5:0:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-themeDarkAlt" title="ms-bgColor-themeLighter">ms-bgColor-themeLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-themeDarkAlt">5:2:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-themeDarkAlt" title="ms-bgColor-themeLighterAlt">ms-bgColor-themeLighterAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-themeDarkAlt">4:8:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themeDarkAlt" title="ms-bgColor-white">ms-bgColor-white</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themeDarkAlt">5:6:1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeDarkAlt">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeDarkAlt</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Primary, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themePrimary" aria-label="Example for ms-bgColor-themePrimary">
<span class="ms-font-size-m ms-fontColor-white">Theme Primary<br />
#0078D7</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-themePrimary" aria-label="Example for ms-fontColor-themePrimary">
<span class="ms-font-su ms-fontColor-themePrimary">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themePrimary" aria-label="Example for ms-borderColor-themePrimary">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Primary, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themePrimary">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themePrimary</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themePrimary">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themePrimary</p>
<!-- Info Button -->
<button class="Typography-infoButton" aria-label="High contrast informatoin for the color Theme Primary"> <i class="ms-Icon ms-Icon--Info ms-fontColor-neutralPrimary" aria-hidden="true"></i> </button>
<div class="ms-Callout docs-ColorSection-swatchCallout ms-Callout--arrowTop">
<div class="ms-Callout-main ms-clearfix">
<div class="ms-Callout-header">
<p class="ms-Callout-title">Acceptable Backgrounds</p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<div class="docs-ColorSection-contrastTextColumn">
<div class="docs-ColorSection-contrastCaption">
<div class="docs-ColorSection-contrastCaptionLeft">
<h4>Background Color Class:</h4></div>
<div class="docs-ColorSection-contrastCaptionRight">
<h4>Ratio:</h4></div>
</div>
<div class="docs-ColorSection-contrastData">
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themePrimary" title="ms-bgColor-white">ms-bgColor-white</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-themePrimary">5:0:1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themePrimary">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themePrimary</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Secondary, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeSecondary" aria-label="Example for ms-bgColor-themeSecondary">
<span class="ms-font-size-m ms-fontColor-black">Theme Secondary<br />
#2b88D8</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-themeSecondary" aria-label="Example for ms-fontColor-themeSecondary">
<span class="ms-font-su ms-fontColor-themeSecondary">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeSecondary" aria-label="Example for ms-borderColor-themeSecondary">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Secondary, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeSecondary">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeSecondary</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeSecondary">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeSecondary</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeSecondary">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeSecondary</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Tertiary, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeTertiary" aria-label="Example for ms-bgColor-themeTertiary">
<span class="ms-font-size-m ms-fontColor-black">Theme Tertiary<br />
#71AFE5</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox ms-bgColor-themeDarker docs-colorBox-hasBorder ms-fontColor-themeTertiary" aria-label="Example for ms-fontColor-themeTertiary">
<span class="ms-font-su ms-fontColor-themeTertiary">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeTertiary" aria-label="Example for ms-borderColor-themeTertiary">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Tertiary, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeTertiary">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeTertiary</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeTertiary">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeTertiary</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeTertiary">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeTertiary</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Light, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeLight" aria-label="Example for ms-bgColor-themeLight">
<span class="ms-font-size-m ms-fontColor-black">Theme Light<br />
#C7E0F4</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox ms-bgColor-themeDarker docs-colorBox-hasBorder ms-fontColor-themeLight" aria-label="Example for ms-fontColor-themeLight">
<span class="ms-font-su ms-fontColor-themeLight">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeLight" aria-label="Example for ms-borderColor-themeLight">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Light, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeLight">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeLight</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeLight">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeLight</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeLight">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeLight</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Lighter, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeLighter" aria-label="Example for ms-bgColor-themeLighter">
<span class="ms-font-size-m ms-fontColor-black">Theme Lighter<br />
#DEECF9</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox ms-bgColor-themeDarker docs-colorBox-hasBorder ms-fontColor-themeLighter" aria-label="Example for ms-fontColor-themeLighter">
<span class="ms-font-su ms-fontColor-themeLighter">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeLighter" aria-label="Example for ms-borderColor-themeLighter">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Lighter, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeLighter">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeLighter</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeLighter">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeLighter</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeLighter">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeLighter</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Theme Lighter Alt, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-themeLighterAlt" aria-label="Example for ms-bgColor-themeLighterAlt">
<span class="ms-font-size-m ms-fontColor-black">Theme Lighter Alt<br />
#EFF6FC</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox ms-bgColor-themeDarker docs-colorBox-hasBorder ms-fontColor-themeLighterAlt" aria-label="Example for ms-fontColor-themeLighterAlt">
<span class="ms-font-su ms-fontColor-themeLighterAlt">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-themeLighterAlt" aria-label="Example for ms-borderColor-themeLighterAlt">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Theme Lighter Alt, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-themeLighterAlt">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-themeLighterAlt</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-themeLighterAlt">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-themeLighterAlt</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-themeLighterAlt">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-themeLighterAlt</p>
</div>
</div>
<!-- End Color --> </div>
<h4>Neutral Colors</h4>
<p>Neutral colors include black, gray, and white. Use darker shades of gray for primary content, such as text and titles. Use black sparingly for high-impact strings (labels, names) and hover states. Use lighter shades of gray for supporting graphic elements and page areas.</p>
<div class="docs-colorContainer" role="grid">
<!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Black, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-black" aria-label="Example for ms-bgColor-black">
<span class="ms-font-size-m ms-fontColor-white">Black<br />
#000000</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-black" aria-label="Example for ms-fontColor-black">
<span class="ms-font-su ms-fontColor-black">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-black" aria-label="Example for ms-borderColor-black">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Black, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-black">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-black</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-black">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-black</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-black">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-black</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray220, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray220" aria-label="Example for ms-bgColor-gray220">
<span class="ms-font-size-m ms-fontColor-white">Gray220<br />
#11100f</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-gray220" aria-label="Example for ms-fontColor-gray220">
<span class="ms-font-su ms-fontColor-gray220">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-gray220" aria-label="Example for ms-borderColor-gray220">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Gray220, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-gray220">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-gray220</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-gray220">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-gray220</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-gray220">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-gray220</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray210, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray210" aria-label="Example for ms-bgColor-gray210">
<span class="ms-font-size-m ms-fontColor-white">Gray210<br />
#161514</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-gray210" aria-label="Example for ms-fontColor-gray210">
<span class="ms-font-su ms-fontColor-gray210">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-gray210" aria-label="Example for ms-borderColor-gray210">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Gray210, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-gray210">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-gray210</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-gray210">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-gray210</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-gray210">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-gray210</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray200, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray200" aria-label="Example for ms-bgColor-gray200">
<span class="ms-font-size-m ms-fontColor-white">Gray200<br />
#1b1a19</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-gray200" aria-label="Example for ms-fontColor-gray200">
<span class="ms-font-su ms-fontColor-gray200">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-gray200" aria-label="Example for ms-borderColor-gray200">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Gray200, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-gray200">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-gray200</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-gray200">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-gray200</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-gray200">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-gray200</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray190, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray190" aria-label="Example for ms-bgColor-gray190">
<span class="ms-font-size-m ms-fontColor-white">Gray190<br />
#201f1e</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-gray190" aria-label="Example for ms-fontColor-gray190">
<span class="ms-font-su ms-fontColor-gray190">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-gray190" aria-label="Example for ms-borderColor-gray190">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Gray190, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-gray190">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-gray190</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-gray190">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-gray190</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-gray190">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-gray190</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray180, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray180" aria-label="Example for ms-bgColor-gray180">
<span class="ms-font-size-m ms-fontColor-white">Gray180<br />
#252423</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-gray180" aria-label="Example for ms-fontColor-gray180">
<span class="ms-font-su ms-fontColor-gray180">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-gray180" aria-label="Example for ms-borderColor-gray180">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Gray180, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-gray180">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-gray180</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-gray180">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-gray180</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-gray180">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-gray180</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray170, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray170" aria-label="Example for ms-bgColor-gray170">
<span class="ms-font-size-m ms-fontColor-white">Gray170<br />
#292827</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-gray170" aria-label="Example for ms-fontColor-gray170">
<span class="ms-font-su ms-fontColor-gray170">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-gray170" aria-label="Example for ms-borderColor-gray170">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Gray170, this row has the specific class names listed for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Background class ms-bgColor-gray170">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-gray170</p>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Font class ms-fontColor-gray170">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-gray170</p>
<!-- Info Button -->
<!-- End Info Button -->
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder" aria-label="Border class ms-borderColor-gray170">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-gray170</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Gray160, this row of the color example shows an example for background color, border color, and font color">
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBoxBG ms-bgColor-gray160" aria-label="Example for ms-bgColor-gray160">
<span class="ms-font-size-m m