office-ui-fabric-core
Version:
The front-end framework for building experiences for Office 365.
388 lines (377 loc) • 21.5 kB
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="typography">
<h2>Typography</h2>
<p>Fabric includes 10 base font classes that represent the type ramp for the Office Design Language. Each base class sets a default <strong>size, weight, and color</strong>.</p>
<ul class="ms-Grid docs-ListTable" aria-label="Typography classes table">
<li class="ms-Grid-row" aria-label="Information for font class ms-font-su">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-su">
<span class="ms-font-su">ms-font-su</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-su uses the font size 42px">
<p class="msfont-size-m">42px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-su uses the font weight Segoe UI Light">
<p class="ms-font-size-m">Segoe UI Light</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-su uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-xxl">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-xxl">
<span class="ms-font-xxl">ms-font-xxl</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xxl uses the font size 28px">
<p class="msfont-size-m">28px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xxl uses the font weight Segoe UI Light">
<p class="ms-font-size-m">Segoe UI Light</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-xxl uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-xl-plus">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-xl-plus">
<span class="ms-font-xl-plus">ms-font-xl-plus</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xl-plus uses the font size 24px">
<p class="msfont-size-m">24px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xl-plus uses the font weight Segoe UI Light">
<p class="ms-font-size-m">Segoe UI Light</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-xl-plus uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-xl">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-xl">
<span class="ms-font-xl">ms-font-xl</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xl uses the font size 21px">
<p class="msfont-size-m">21px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xl uses the font weight Segoe UI Light">
<p class="ms-font-size-m">Segoe UI Light</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-xl uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-l">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-l">
<span class="ms-font-l">ms-font-l</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-l uses the font size 17px">
<p class="msfont-size-m">17px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-l uses the font weight Segoe UI Semilight">
<p class="ms-font-size-m">Segoe UI Semilight</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-l uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-m-plus">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-m-plus">
<span class="ms-font-m-plus">ms-font-m-plus</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-m-plus uses the font size 15px">
<p class="msfont-size-m">15px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-m-plus uses the font weight Segoe UI Regular">
<p class="ms-font-size-m">Segoe UI Regular</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-m-plus uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-m">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-m">
<span class="ms-font-m">ms-font-m</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-m uses the font size 14px">
<p class="msfont-size-m">14px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-m uses the font weight Segoe UI Regular">
<p class="ms-font-size-m">Segoe UI Regular</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-m uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-s-plus">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-s-plus">
<span class="ms-font-s-plus">ms-font-s-plus</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-s-plus uses the font size 13px">
<p class="msfont-size-m">13px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-s-plus uses the font weight Segoe UI Regular">
<p class="ms-font-size-m">Segoe UI Regular</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-s-plus uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-s">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-s">
<span class="ms-font-s">ms-font-s</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-s uses the font size 12px">
<p class="msfont-size-m">12px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-s uses the font weight Segoe UI Regular">
<p class="ms-font-size-m">Segoe UI Regular</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-s uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-xs">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-xs">
<span class="ms-font-xs">ms-font-xs</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xs uses the font size 11px">
<p class="msfont-size-m">11px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-xs uses the font weight Segoe UI Regular">
<p class="ms-font-size-m">Segoe UI Regular</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-xs uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> <li class="ms-Grid-row" aria-label="Information for font class ms-font-mi">
<div class="ms-Grid-col ms-sm12 ms-lg5" aria-label="Class name ms-font-mi">
<span class="ms-font-mi">ms-font-mi</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-mi uses the font size 10px">
<p class="msfont-size-m">10px</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg2" aria-label="Class ms-font-mi uses the font weight Segoe UI Semibold">
<p class="ms-font-size-m">Segoe UI Semibold</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" aria-label="Class ms-font-mi uses the color class ms-color-neutralPrimary">
<p class="ms-font-size-m">ms-color-neutralPrimary</p>
</div>
</li> </ul>
<h3>Font weight</h3>
<p>Use these classes to set the font weight, independent of its size and color.</p>
<div class="ms-Grid" role="grid">
<div class="ms-Grid-row docs-HelperClasses">
<div class="ms-Grid-row docs-TypeHeader" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5 docs-HelperHeader" role="columnheader">
<p class="ms-font-l docs-subHeading ms-fontWeight-semibold">Class</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3 docs-HelperHeader" role="columnheader">
<p class="ms-font-l docs-subHeading ms-fontWeight-semibold">Weight</p>
</div>
</div>
<div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<p class="ms-font-xl ms-fontWeight-light">ms-fontWeight-light</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<p class="font-size-m">Light</p>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<p class="ms-font-xl ms-fontWeight-semilight">ms-fontWeight-semilight</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<p class="font-size-m">Semilight</p>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<p class="ms-font-xl ms-fontWeight-regular">ms-fontWeight-regular</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<p class="font-size-m">Regular</p>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<p class="ms-font-xl ms-fontWeight-semibold">ms-fontWeight-semibold</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<p class="font-size-m">Semi Bold</p>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<p class="ms-font-xl ms-fontWeight-bold">ms-fontWeight-bold</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<p class="font-size-m">Bold</p>
</div>
</div> </div>
</div>
<h3>Font size</h3>
<p>Use these classes to set the font size, independent of its weight and color.</p>
<div class="ms-Grid" role="grid">
<div class="ms-Grid-row docs-HelperClasses">
<div class="ms-Grid-row docs-TypeHeader" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5 docs-HelperHeader" role="columnheader">
<p class="ms-font-l docs-subHeading ms-fontWeight-semibold">Class</p>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3 docs-HelperHeader" role="columnheader">
<p class="ms-font-l docs-subHeading ms-fontWeight-semibold">Size</p>
</div>
</div>
<div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-su">ms-fontSize-su</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">42px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-xxl">ms-fontSize-xxl</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">28px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-xlPlus">ms-fontSize-xlPlus</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">24px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-xl">ms-fontSize-xl</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">21px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-l">ms-fontSize-l</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">17px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-mPlus">ms-fontSize-mPlus</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">15px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-m">ms-fontSize-m</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">14px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-sPlus">ms-fontSize-sPlus</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">13px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-s">ms-fontSize-s</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">12px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-xs">ms-fontSize-xs</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">11px</span>
</div>
</div> <div class="ms-Grid-row" role="row">
<div class="ms-Grid-col ms-sm12 ms-lg5" role="gridcell">
<span class="ms-fontSize-mi">ms-fontSize-mi</span>
</div>
<div class="ms-Grid-col ms-sm12 ms-lg3" role="gridcell">
<span class="ms-fontSize-m">10px</span>
</div>
</div> </div>
</div>
<h3>Alternative fonts</h3>
<p>Usage of Fabric's default web font, Segoe UI, is subject to the <a href="https://aka.ms/fabric-assets-license/">assets license</a>. If your app does not meet these requirements, you can substitute another font in place of Segoe UI. There are two methods available:</p>
<ol class="ms-font-l">
<li>
Use <a href="https://github.com/Microsoft/Selawik">Selawik</a>, an open source alternative to Segoe UI from Microsoft. With support for this font built-in to Fabric, it's as simple as applying an additional class to the root "ms-Fabric" class that wraps your application. If Segoe UI is not installed on the user's system, Selawik will be used instead.
<pre><code class="hljs"><div class="ms-Fabric ms-Fabric--selawik">...</div></code></pre>
<div class="ms-Fabric ms-Fabric--selawik">
<h4 class="ms-font-xl">This text is now in Selawik.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper leo a elit malesuada scelerisque. Nam et accumsan nibh. Nulla facilisi. Nulla commodo vestibulum lobortis. Mauris interdum vitae mi a blandit. Duis odio mi, gravida et velit sit amet, pulvinar porta magna. Ut fermentum erat tortor, eu bibendum felis laoreet vel. Nulla vitae erat lacinia, mollis felis id, mollis risus. Integer in metus lacus. Ut ac ligula nunc. Vivamus sed lacinia ante.</p>
</div>
</li>
<li>
Specify a custom font for your application. This can be a commonly-installed local font, such as Helvetica, or a web font that you have included a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face?redirectlocale=en-US&redirectslug=CSS%2F%40font-face">@font-face declaration</a> for.
<pre><code class="hljs">.ms-Fabric {
font-family: Helvetica, Arial, sans-serif;
}</code></pre>
<div class="ms-Fabric" style="font-family: Helvetica, Arial, sans-serif;">
<h4 class="ms-font-xl">This text is now in Helvetica.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper leo a elit malesuada scelerisque. Nam et accumsan nibh. Nulla facilisi. Nulla commodo vestibulum lobortis. Mauris interdum vitae mi a blandit. Duis odio mi, gravida et velit sit amet, pulvinar porta magna. Ut fermentum erat tortor, eu bibendum felis laoreet vel. Nulla vitae erat lacinia, mollis felis id, mollis risus. Integer in metus lacus. Ut ac ligula nunc. Vivamus sed lacinia ante.</p>
</div>
</li>
</ol>
</div>
</div>
</div>
<script>
var currPage = window.location.pathname.replace(/\//g, '');
if (currPage) {
document.getElementsByClassName(currPage)[0].classList.add('LeftNav-link--active');
}
</script>
</body>
</html>