office-ui-fabric-core
Version:
The front-end framework for building experiences for Office 365.
430 lines (427 loc) • 19 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="brand-icons">
<h2>Brand and File type Icons</h2>
<div class="docs-IconList">
<h3>Brand Icons</h3>
<ul>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--access"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--access"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--access"></div>
<span>ms-BrandIcon--access</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--excel"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--excel"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--excel"></div>
<span>ms-BrandIcon--excel</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--infopath"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--infopath"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--infopath"></div>
<span>ms-BrandIcon--infopath</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--m365"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--m365"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--m365"></div>
<span>ms-BrandIcon--m365</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--office"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--office"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--office"></div>
<span>ms-BrandIcon--office</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--onedrive"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--onedrive"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--onedrive"></div>
<span>ms-BrandIcon--onedrive</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--onenote"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--onenote"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--onenote"></div>
<span>ms-BrandIcon--onenote</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--outlook"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--outlook"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--outlook"></div>
<span>ms-BrandIcon--outlook</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--powerpoint"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--powerpoint"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--powerpoint"></div>
<span>ms-BrandIcon--powerpoint</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--project"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--project"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--project"></div>
<span>ms-BrandIcon--project</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--sharepoint"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--sharepoint"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--sharepoint"></div>
<span>ms-BrandIcon--sharepoint</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--teams"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--teams"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--teams"></div>
<span>ms-BrandIcon--teams</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--visio"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--visio"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--visio"></div>
<span>ms-BrandIcon--visio</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--word"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--word"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--word"></div>
<span>ms-BrandIcon--word</span>
</li>
</ul>
</div>
<div class="docs-IconList">
<h3>File Type Icons</h3>
<ul>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--accdb"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--accdb"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--accdb"></div>
<span>ms-BrandIcon--accdb</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--archive"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--archive"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--archive"></div>
<span>ms-BrandIcon--archive</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--audio"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--audio"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--audio"></div>
<span>ms-BrandIcon--audio</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--code"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--code"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--code"></div>
<span>ms-BrandIcon--code</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--csv"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--csv"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--csv"></div>
<span>ms-BrandIcon--csv</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--docset"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--docset"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--docset"></div>
<span>ms-BrandIcon--docset</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--docx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--docx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--docx"></div>
<span>ms-BrandIcon--docx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--dotx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--dotx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--dotx"></div>
<span>ms-BrandIcon--dotx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--email"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--email"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--email"></div>
<span>ms-BrandIcon--email</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--exe"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--exe"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--exe"></div>
<span>ms-BrandIcon--exe</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--folder"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--folder"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--folder"></div>
<span>ms-BrandIcon--folder</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--font"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--font"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--font"></div>
<span>ms-BrandIcon--font</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--genericfile"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--genericfile"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--genericfile"></div>
<span>ms-BrandIcon--genericfile</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--html"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--html"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--html"></div>
<span>ms-BrandIcon--html</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--link"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--link"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--link"></div>
<span>ms-BrandIcon--link</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--listitem"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--listitem"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--listitem"></div>
<span>ms-BrandIcon--listitem</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--model"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--model"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--model"></div>
<span>ms-BrandIcon--model</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--mpp"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--mpp"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--mpp"></div>
<span>ms-BrandIcon--mpp</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--mpt"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--mpt"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--mpt"></div>
<span>ms-BrandIcon--mpt</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--one"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--one"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--one"></div>
<span>ms-BrandIcon--one</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--onepkg"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--onepkg"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--onepkg"></div>
<span>ms-BrandIcon--onepkg</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--onetoc"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--onetoc"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--onetoc"></div>
<span>ms-BrandIcon--onetoc</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--pdf"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--pdf"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--pdf"></div>
<span>ms-BrandIcon--pdf</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--photo"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--photo"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--photo"></div>
<span>ms-BrandIcon--photo</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--potx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--potx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--potx"></div>
<span>ms-BrandIcon--potx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--ppsx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--ppsx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--ppsx"></div>
<span>ms-BrandIcon--ppsx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--pptx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--pptx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--pptx"></div>
<span>ms-BrandIcon--pptx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--pub"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--pub"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--pub"></div>
<span>ms-BrandIcon--pub</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--rtf"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--rtf"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--rtf"></div>
<span>ms-BrandIcon--rtf</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--sharedfolder"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--sharedfolder"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--sharedfolder"></div>
<span>ms-BrandIcon--sharedfolder</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--spo"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--spo"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--spo"></div>
<span>ms-BrandIcon--spo</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--sysfile"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--sysfile"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--sysfile"></div>
<span>ms-BrandIcon--sysfile</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--txt"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--txt"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--txt"></div>
<span>ms-BrandIcon--txt</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--vector"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--vector"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--vector"></div>
<span>ms-BrandIcon--vector</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--video"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--video"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--video"></div>
<span>ms-BrandIcon--video</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--vsdx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--vsdx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--vsdx"></div>
<span>ms-BrandIcon--vsdx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--vssx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--vssx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--vssx"></div>
<span>ms-BrandIcon--vssx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--vstx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--vstx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--vstx"></div>
<span>ms-BrandIcon--vstx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--xlsx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--xlsx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--xlsx"></div>
<span>ms-BrandIcon--xlsx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--xls"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--xls"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--xls"></div>
<span>ms-BrandIcon--xls</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--xltx"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--xltx"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--xltx"></div>
<span>ms-BrandIcon--xltx</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--xml"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--xml"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--xml"></div>
<span>ms-BrandIcon--xml</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--xsn"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--xsn"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--xsn"></div>
<span>ms-BrandIcon--xsn</span>
</li>
<li>
<div class="ms-BrandIcon--icon16 ms-BrandIcon--zip"></div>
<div class="ms-BrandIcon--icon48 ms-BrandIcon--zip"></div>
<div class="ms-BrandIcon--icon96 ms-BrandIcon--zip"></div>
<span>ms-BrandIcon--zip</span>
</li>
</ul>
</div>
</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>