office-ui-fabric-core
Version:
The front-end framework for building experiences for Office 365.
592 lines (574 loc) • 135 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="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 -->
<button class="Typography-infoButton" aria-label="High contrast informatoin for the color Black"> <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-black" title="ms-bgColor-neutralLight">ms-bgColor-neutralLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLight ms-fontColor-black">17:5:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-black" title="ms-bgColor-neutralLighter">ms-bgColor-neutralLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-black">19:9:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-black" title="ms-bgColor-neutralLightAlt">ms-bgColor-neutralLightAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-black">19:8:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-black" title="ms-bgColor-themeLight">ms-bgColor-themeLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-black">15:4:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-black" title="ms-bgColor-themeLighter">ms-bgColor-themeLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighter ms-fontColor-black">17:5:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-black" title="ms-bgColor-themeLighterAlt">ms-bgColor-themeLighterAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-black">19:3:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-black" title="ms-bgColor-white">ms-bgColor-white</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-black">21: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-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 Neutral 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-neutralDark" aria-label="Example for ms-bgColor-neutralDark">
<span class="ms-font-size-m ms-fontColor-white">Neutral Dark<br />
#212121</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-neutralDark" aria-label="Example for ms-fontColor-neutralDark">
<span class="ms-font-su ms-fontColor-neutralDark">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-neutralDark" aria-label="Example for ms-borderColor-neutralDark">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Neutral 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-neutralDark">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-neutralDark</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-neutralDark">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-neutralDark</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-neutralDark">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-neutralDark</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Neutral 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-neutralPrimary" aria-label="Example for ms-bgColor-neutralPrimary">
<span class="ms-font-size-m ms-fontColor-white">Neutral Primary<br />
#333333</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-neutralPrimary" aria-label="Example for ms-fontColor-neutralPrimary">
<span class="ms-font-su ms-fontColor-neutralPrimary">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-neutralPrimary" aria-label="Example for ms-borderColor-neutralPrimary">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Neutral 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-neutralPrimary">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-neutralPrimary</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-neutralPrimary">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-neutralPrimary</p>
<!-- Info Button -->
<button class="Typography-infoButton" aria-label="High contrast informatoin for the color Neutral 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-neutralLight ms-fontColor-neutralPrimary" title="ms-bgColor-neutralLight">ms-bgColor-neutralLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLight ms-fontColor-neutralPrimary">10:5:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-neutralPrimary" title="ms-bgColor-neutralLighter">ms-bgColor-neutralLighter</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLighter ms-fontColor-neutralPrimary">11:5:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-neutralPrimary" title="ms-bgColor-neutralLightAlt">ms-bgColor-neutralLightAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-neutralLightAlt ms-fontColor-neutralPrimary">11:9:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-neutralPrimary" title="ms-bgColor-themeLight">ms-bgColor-themeLight</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLight ms-fontColor-neutralPrimary">9:3:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-neutralPrimary" title="ms-bgColor-themeLighterAlt">ms-bgColor-themeLighterAlt</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-themeLighterAlt ms-fontColor-neutralPrimary">11:6:1</div>
<div class="docs-ColorSection-contrastText docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-neutralPrimary" title="ms-bgColor-white">ms-bgColor-white</div>
<div class="docs-ColorSection-contrastRatio docs-ColorSection-swatchCode ms-bgColor-white ms-fontColor-neutralPrimary">12: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-neutralPrimary">
<p class="ms-font-size-m"><span class="mobileText">Border<br /></span> ms-borderColor-neutralPrimary</p>
</div>
</div>
<!-- End Color --> <!-- Start Color -->
<div class="ms-Grid-row" aria-label="First row of the color example for Neutral Primary 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-neutralPrimaryAlt" aria-label="Example for ms-bgColor-neutralPrimaryAlt">
<span class="ms-font-size-m ms-fontColor-white">Neutral Primary Alt<br />
#3C3C3C</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBox-hasBorder ms-fontColor-neutralPrimaryAlt" aria-label="Example for ms-fontColor-neutralPrimaryAlt">
<span class="ms-font-su ms-fontColor-neutralPrimaryAlt">Aa</span>
</div>
<div class="ms-Grid-col ms-sm4 ms-lg4 docs-colorBox docs-colorBox-hasBg docs-colorBoxBorder ms-borderColor-neutralPrimaryAlt" aria-label="Example for ms-borderColor-neutralPrimaryAlt">
</div>
</div>
<div class="ms-Grid-row docs-colorBottomRow" aria-label="Second row of the color example Neutral Primary 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-neutralPrimaryAlt">
<p class="ms-font-size-m"><span class="mobileText">Background<br/></span> ms-bgColor-neutralPrimaryAlt</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-neutralPrimaryAlt">
<p class="ms-font-size-m"><span class="mobileText">Font<br /></span> ms-fontColor-neutralPrimaryAlt</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-neutralPrimaryAlt">
<p class="ms-font-size-m"><span class="mobileText">Border<b