The FOX UI Kit is a reference for developers of enterprise-grade apps. It's based on the Lightning Design System (SLDS) and documents the following:
If you're used to working with Bootstrap, please refer to the Bootstrap version of this guide.
The design team at FOX created this guide to help the effort of standardizing internal tools across the company with the same look & feel. The goal is for new and existing applications to use this as a starting place when thinking about layout and user interface components so that there's a high degree of cohesion across the organization.
This kit is based on Salesforce's Lightning Design System (SLDS) and documents best practices and components available for use.
SLDS is, at its core, an HTML and CSS component library to build enterprise look-and-feel web applications. It ships with many of the same features of Bootstrap (grids, layout utilities, typography) and can be used for any kind of app development, but it really shines in applications that have lots of data to work with.
We have pre-packaged a copy of SLDS with this guide, customized to use FOX's brand colors. Download it here:
HTML Usage: <link rel="stylesheet" href="/assets/styles/salesforce-lightning-design-system.min.css">
Unlike Bootstrap, SLDS doesn't make an assumption about the Javascript tier: it only provides UI building blocks. There are front-end frameworks available to fill this gap:
An Angular framework that provides native components & directives.
An open-source React framework developed and maintained by Salesforce.
A low-level Web Components-based framework from Salesforce that relies on native Javascript.
There are two paths for building a new app using SLDS:
Integrate the SLDS files into your existing app's static assets directory and include the CSS file.
From there, audit your app for places to switch to using SLDS components and FOX styleguide colors. Some questions you can ask yourself:
Below are examples of page layouts using many SLDS components to form familiar Salesforce page layouts, as well as alternate versions to suit different kinds of applications.
They are built from HTML samples in the SLDS component reference library, and use the FOX-branded version of SLDS as detailed above.
Components in use:
Uses the optimal 2/3rd–1/3rd content split.
Nothing needs your attention right now. Check back later.
Below is the bare HTML outline for the above page layout. It uses the standard HTML for each component as documented in the SLDS reference guide. View in browser.
<body style="padding-top: 5.5rem;">
<header class="slds-global-header_container">
<div class="slds-global-header">
…standard global header markup
</div>
<div class="slds-context-bar">
…standard global menu items
</div>
</header>
<main class="slds-m-around_medium">
<div class="slds-page-header slds-m-bottom_medium">
Page header (optional)
</div>
<div class="slds-grid slds-gutters_x-small">
<div class="slds-col slds-size_2-of-3">
<div class="slds-box slds-theme_default">
Main content area
</div>
</div>
<div class="slds-col slds-size_1-of-3">
<div class="slds-box slds-theme_default">
Right-rail content
</div>
</div>
</div>
</main>
</body>Example of a full-width page layout with limited global navigation.
Below is the bare HTML outline for the above page layout. View in browser.
<body style="padding-top: 2.5rem;">
<header class="slds-global-header_container">
<div class="slds-context-bar">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-no-hover">
<div class="slds-global-header__logo" style="width: 5rem"></div>
</div>
<div class="slds-context-bar__item slds-no-hover">
<span class="slds-context-bar__label-action slds-context-bar__app-name">App Name</span>
</div>
</div>
<nav class="slds-context-bar__secondary" role="navigation">
<ul class="slds-grid">
<li class="slds-context-bar__item">
<a class="slds-context-bar__label-action">Menu item</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="slds-box slds-theme_default slds-m-around_medium">
Main content area
</main>
</body>Example of a page layout with an alternate left nav.
Below is the bare HTML outline for the above page layout. View in browser.
<body style="padding-top: 2.5rem;">
<header class="slds-global-header_container">
<div class="slds-context-bar">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-no-hover">
<div class="slds-global-header__logo" style="width: 5rem"></div>
</div>
<div class="slds-context-bar__item slds-no-hover">
<span class="slds-context-bar__label-action slds-context-bar__app-name">App Name</span>
</div>
</div>
</div>
</header>
<main class="slds-grid slds-gutters_x-small slds-m-vertical_medium">
<div class="slds-col slds-size_1-of-4">
<div class="slds-theme_default" style="margin-left: -1rem; border-radius: 0 .25rem .25rem 0;">
<nav class="slds-nav-vertical">
<div class="slds-nav-vertical__section">
<h2 class="slds-nav-vertical__title">Nav header</h2>
<ul>
<li class="slds-nav-vertical__item slds-is-active">
<a class="slds-nav-vertical__action">Nav link</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="slds-col slds-size_3-of-4">
<div class="slds-box slds-theme_default">
Main content
</div>
</div>
</main>
</body>Lightning Design System ships with UI utilities, many of which will be familiar to Bootstrap users.
Documentation: Grid utility
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_2-of-3"><span>1</span></div>
<div class="slds-col slds-size_1-of-3"><span>2</span></div>
</div>
<div class="slds-grid slds-gutters_x-small">
<div class="slds-col slds-size_1-of-5"><span>1</span></div>
<div class="slds-col slds-size_1-of-5"><span>2</span></div>
<div class="slds-col slds-size_1-of-5"><span>3</span></div>
<div class="slds-col slds-size_1-of-5"><span>4</span></div>
<div class="slds-col slds-size_1-of-5"><span>5</span></div>
</div>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-12"><span>1</span></div>
<div class="slds-col slds-size_1-of-12"><span>2</span></div>
<div class="slds-col slds-size_1-of-12"><span>3</span></div>
<div class="slds-col slds-size_1-of-12"><span>4</span></div>
<div class="slds-col slds-size_1-of-12"><span>5</span></div>
<div class="slds-col slds-size_1-of-12"><span>6</span></div>
<div class="slds-col slds-size_1-of-12"><span>7</span></div>
<div class="slds-col slds-size_1-of-12"><span>8</span></div>
<div class="slds-col slds-size_1-of-12"><span>9</span></div>
<div class="slds-col slds-size_1-of-12"><span>10</span></div>
<div class="slds-col slds-size_1-of-12"><span>11</span></div>
<div class="slds-col slds-size_1-of-12"><span>12</span></div>
</div>Documentation: Margin utilities • Padding utilities
<div class="slds-theme_default slds-m-top_none">margin none</div>
<div class="slds-theme_default slds-m-top_xx-small slds-p-left_small">margin top xx-small, padding left small</div>
<div class="slds-theme_default slds-m-vertical_x-large slds-p-around_large">verticle x-large, padding around large</div>
<div class="slds-theme_default slds-m-left_large slds-p-bottom_large">margin left large, padding bottom large</div>
<div class="slds-theme_default slds-m-top_large">margin top large</div>Documentation: Box utility • Cards
<div class="demo-container slds-p-around_medium">
<div class="slds-box slds-card slds-m-bottom_medium">
<p>This is a box+card</p>
</div>
<div class="slds-box slds-m-bottom_medium">
<p>This is a regular-sized box.</p>
</div>
<div class="slds-box slds-box_small slds-m-bottom_medium">
<p>This is a small box.</p>
</div>
<div class="slds-box slds-box_x-small">
<p>This is an extra-small box.</p>
</div>
</div>Documentation: Layout utilities
<div>
<div class="slds-card slds-has-bottom-magnet">
<div class="slds-p-around_medium">My Component</div>
</div>
<div class="slds-card slds-has-top-magnet">
<div class="slds-p-around_medium">My Component</div>
</div>
</div>Documentation: Media Objects • Tiles
<div class="demo-only" style="width: 500px">
<div class="slds-media slds-m-bottom_large slds-box slds-theme_default">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar_large">
<img alt="Person name" src="/assets/images/avatar3.jpg" title="User avatar" />
</span>
</div>
<div class="slds-media__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat minus molestias reprehenderit consequuntur sapiente. Modi veritatis totam accusantium numquam assumenda.</p>
</div>
</div>
<article class="slds-tile slds-media slds-m-bottom_large slds-box slds-theme_default">
<div class="slds-media__figure">
<span class="slds-icon_container" title="description of icon when needed">
<svg class="slds-icon slds-icon-standard-groups" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#groups"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<h3 class="slds-tile__title slds-truncate" title="Salesforce UX">
<a href="javascript:void(0);">Salesforce UX</a>
</h3>
<div class="slds-tile__detail">
<dl class="slds-list_horizontal slds-wrap">
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for second label">Description for second label</dd>
</dl>
</div>
</div>
</article>
<article class="slds-tile slds-media slds-m-bottom_large slds-box slds-theme_default">
<div class="slds-media__figure">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-5" value="checkbox-5" />
<label class="slds-checkbox__label" for="checkbox-5">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Did you complete the task: Contact Trammel Crow Company?</span>
</label>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-tile__title slds-truncate" title="Contact Trammel Crow Company">
<a href="javascript:void(0);">Contact Trammel Crow Company</a>
</h3>
<div class="slds-tile__detail">
<p class="slds-truncate" title="Assignee">Assignee</p>
</div>
</div>
</article>
<article class="slds-tile slds-box slds-theme_default">
<h3 class="slds-tile__title slds-truncate" title="Company One beats Company Two to the 200-mile affordable electric car">
<a href="javascript:void(0);">Company One beats Company Two to the 200-mile affordable electric car</a>
</h3>
<div class="slds-tile__detail">
<p class="slds-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
<ul class="slds-list_horizontal slds-has-dividers_right slds-m-top_xx-small slds-text-color_weak slds-text-body_small">
<li class="slds-item">Published 2/15/19</li>
<li class="slds-item">How to Guide</li>
</ul>
<ul class="slds-list_horizontal slds-m-top_xx-small">
<li class="slds-m-right_small">
<button class="slds-button slds-button_icon" aria-pressed="false">
<svg class="slds-button__icon slds-button__icon_left slds-button_icon-x-small" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use></svg>
1320
</button>
</li>
<li>
<button class="slds-button slds-button_icon" aria-pressed="false">
<svg class="slds-button__icon slds-button__icon_left slds-button_icon-x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#dislike"></use>
</svg>362
</button>
</li>
</ul>
</div>
</article>
</div>Documentation: Theme utility • Default SLDS Colors • Appendix: FOX Colors
<div class="slds-box slds-theme_default slds-m-bottom_medium">
<p>This is the <strong>default</strong> theme: #fdfeff</p>
</div>
<div class="slds-box slds-theme_info slds-theme_alert-texture slds-m-bottom_medium">
<p>This is the <strong>info</strong> theme with the <strong>alert texture</strong> added: #706e6b</p>
</div>
<div class="slds-box slds-theme_inverse slds-m-bottom_medium">
<p>This is the <strong>inverse</strong> theme: #00263e</p>
</div>
<div class="slds-box slds-theme_error slds-theme_alert-texture slds-m-bottom_medium">
<p>This is the <strong>error</strong> theme with the <strong>alert texture</strong> added: #c23934</p>
</div>
<div class="slds-box slds-theme_warning slds-m-bottom_medium">
<p>This is the <strong>warning</strong> theme: #ffb75d</p>
</div>
<div class="slds-box slds-theme_success slds-m-bottom_medium">
<p>This is the <strong>success</strong> theme: #04844b</p>
</div>
<ul class="slds-has-dividers_bottom-space">
<li class="slds-text-color_default">This text is the default color: #080707</li>
<li class="slds-text-color_weak">This text is the weak color: #3e3e3c</li>
<li class="slds-text-color_success">This text is the success color: #027e46</li>
<li class="slds-text-color_error">This text is the error color: #d2232a</li>
<li class="slds-text-color_inverse"><span class="slds-theme_inverse">This text is the inverse color: #fff</span></li>
<li> </li>
<li style="color: #232222">This is the FOX color <strong>black resin</strong>: #232222</li>
<li style="color: #00263e">This is the FOX color <strong>dark blue</strong>: #00263e</li>
<li style="color: #004c97">This is the FOX color <strong>pop blue</strong>: #004c97</li>
<li style="color: #008bcd">This is the FOX color <strong>light blue</strong>: #008bcd</li>
<li style="color: #d2232a">This is the FOX color <strong>red</strong>: #d2232a</li>
<li style="color: #830b0d">This is the FOX color <strong>dark red</strong>: #830b0d</li>
<li style="color: #e5e5e5"><span class="slds-theme_inverse">This is the FOX color <strong>gray</strong>: #e5e5e5</span></li>
<li> </li>
<li>
<span class="slds-badge slds-theme_success">Success Badge</span>
<span class="slds-badge slds-theme_warning">Warning Badge</span>
<span class="slds-badge slds-theme_error">Error Badge</span>
<span class="slds-badge slds-theme_inverse">Inverse Badge</span>
</li>
</ul>Documentation: Text
<div class="slds-text-heading_large">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-heading_medium">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-heading_small">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-title_caps">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-body_regular">The quick brown fox jumps over the lazy dog.</div>
<hr>
<div class="slds-text-longform">
<h3 class="slds-text-heading_small">Heading</h3>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
<li>The quick brown fox jumps over the lazy dog.
<ul>
<li>The quick brown fox jumps over the lazy dog.
<ul>
<li>The quick brown fox jumps over the lazy dog.</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>The quick brown fox jumps over the lazy dog.
<ol>
<li>The quick brown fox jumps over the lazy dog.
<ol>
<li>The quick brown fox jumps over the lazy dog.</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>SLDS ships with hundreds of icons, ready to use. The full list is available here, with reference instructions here.
<span class="slds-icon_container" title="Description of icon when needed">
<svg class="slds-icon slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
</svg>
<span class="slds-assistive-text">Description of icon when needed</span>
</span><span class="slds-icon_container slds-icon_container_circle">
<svg class="slds-icon slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#announcement"></use>
</svg>
</span>
<span class="slds-icon_container">
<svg class="slds-icon slds-icon-text-success" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#announcement"></use>
</svg>
</span>
<span class="slds-icon_container">
<svg class="slds-icon slds-icon-text-error" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#announcement"></use>
</svg>
</span>
<span class="slds-icon_container">
<svg class="slds-icon slds-icon-text-warning" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#announcement"></use>
</svg>
</span>
<span class="slds-icon_container">
<svg class="slds-icon slds-icon-text-light" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#announcement"></use>
</svg>
</span>
<span class="slds-icon_container">
<svg class="slds-icon slds-icon-text-default slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#announcement"></use>
</svg>
</span>Documentation: Buttons
<button class="slds-button">Button</button>
<button class="slds-button slds-button_neutral">Neutral Button</button>
<button class="slds-button slds-button_brand">Brand Button</button>
<button class="slds-button slds-button_brand" disabled>Disabled Brand Button</button>
<button class="slds-button slds-button_outline-brand">Outline Brand Button</button><br><br>
<button class="slds-button slds-button_success">Success Button</button>
<button class="slds-button slds-button_destructive">Destructive Button</button>
<button class="slds-button slds-button_text-destructive">Text Destructive Button</button><br><br>
<button class="slds-button slds-button_neutral">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#download"></use>
</svg>Button Neutral
</button>
<button class="slds-button slds-button_brand">Button Brand
<svg class="slds-button__icon slds-button__icon_right" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#download"></use>
</svg>
</button>When the user clicks the button, use JavaScript to toggle the class from slds-not-selected to slds-is-selected-clicked. As soon as focus leaves the button, use JavaScript to toggle the class from slds-is-selected-clicked to
slds-is-selected.
<button class="slds-button slds-button_neutral slds-button_stateful slds-not-selected" aria-live="assertive">
<span class="slds-text-not-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>Follow</span>
<span class="slds-text-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Following</span>
<span class="slds-text-selected-focus">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>Unfollow</span>
</button>
<button class="slds-button slds-button_neutral slds-button_stateful slds-is-selected-clicked" aria-live="assertive">
<span class="slds-text-not-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>Follow</span>
<span class="slds-text-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Following</span>
<span class="slds-text-selected-focus">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>Unfollow</span>
</button>
<button class="slds-button slds-button_neutral slds-button_stateful slds-is-selected" aria-live="assertive">
<span class="slds-text-not-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>Follow</span>
<span class="slds-text-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Following</span>
<span class="slds-text-selected-focus">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>Unfollow</span>
</button>Documentation: Button Icons
<div class="demo-container" style="height: 12rem">
<button class="slds-button slds-button_icon" title="Settings">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<span class="slds-assistive-text">Settings</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-brand" title="Search">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
<span class="slds-assistive-text">Search</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-pressed="false" disabled="" title="Pin">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pin"></use>
</svg>
<span class="slds-assistive-text">Pin</span>
</button>
<button class="slds-button slds-button_icon slds-is-selected slds-button_icon-border-filled" aria-pressed="true" disabled="" title="Pin">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pinned"></use>
</svg>
<span class="slds-assistive-text">Pin</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-pressed="false" title="Like">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
</svg>
<span class="slds-assistive-text">Like</span>
</button>
<button class="slds-button slds-button_icon slds-is-selected slds-button_icon-border-filled" aria-pressed="true" title="Like">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
</svg>
<span class="slds-assistive-text">Like</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="More Options">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" title="More Options">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-border slds-button_icon-xx-small" title="More Options">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
<button class="slds-button slds-button_icon slds-button_icon-more slds-button_icon-border-filled" aria-haspopup="true" title="More Options">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<button class="slds-button slds-button_icon slds-button_icon-more slds-button_icon-border-filled slds-is-selected" aria-haspopup="true" title="Show More" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_left">
<ul class="slds-dropdown__list" role="menu" aria-label="Show More">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Menu Item One">Menu Item One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Menu Item Two">Menu Item Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Menu Item Three">Menu Item Three</span>
</a>
</li>
<li class="slds-has-divider_top-space" role="separator"></li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Menu Item Four">Menu Item Four</span>
</a>
</li>
</ul>
</div>
</div>
</div>Documentation: Button Groups
<div class="demo-container" style="height:8.75rem">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button_neutral">Refresh</button>
<button class="slds-button slds-button_neutral" disabled>Edit</button>
<button class="slds-button slds-button_neutral">Save</button>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last slds-is-open">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-is-selected" aria-haspopup="true" title="Show More" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_right slds-dropdown_actions">
<ul class="slds-dropdown__list" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Overflow Item One">Overflow Item One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Overflow Item Two">Overflow Item Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Overflow Item Three">Overflow Item Three</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Documentation: Badges
<div class="demo-container">
<span class="slds-badge">Default Badge</span>
<span class="slds-badge slds-theme_success">Success Badge</span>
<span class="slds-badge slds-theme_warning">Warning Badge</span>
<span class="slds-badge slds-theme_error">Error Badge</span>
<span class="slds-badge slds-theme_inverse">Inverse Badge</span>
<hr>
<span class="slds-badge">
<span class="slds-badge__icon slds-badge__icon_left">
<span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">
<svg class="slds-icon slds-icon_xx-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"></use>
</svg>
</span>
</span>423 Credits Available</span>
<span class="slds-badge slds-badge_lightest">
<span class="slds-badge__icon slds-badge__icon_left">
<span class="slds-icon_container slds-icon-utility-moneybag slds-current-color" title="Description of icon when needed">
<svg class="slds-icon slds-icon_xx-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#moneybag"></use>
</svg>
</span>
</span>423 Credits Available</span>
</div>Documentation: Pills
<span class="slds-pill slds-pill_link">
<a href="javascript:void(0);" class="slds-pill__action" title="Full pill label verbiage mirrored here">
<span class="slds-pill__label">Pill Label</span>
</a>
<button class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Remove</span>
</button>
</span>
<span class="slds-pill slds-pill_link">
<span class="slds-pill__icon_container">
<span class="slds-icon_container slds-icon-standard-account" title="Account">
<svg class="slds-icon" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
<span class="slds-assistive-text">Account</span>
</span>
</span>
<a href="javascript:void(0);" class="slds-pill__action" title="Full pill label verbiage mirrored here">
<span class="slds-pill__label">Pill Label</span>
</a>
<button class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Remove</span>
</button>
</span>Documentation: Breadcrumbs
<div class="demo-container" style="height:12rem">
<nav role="navigation" aria-label="Breadcrumbs" class="slds-m-bottom_large">
<ol class="slds-breadcrumb slds-list_horizontal slds-wrap">
<li class="slds-breadcrumb__item">
<a href="javascript:void(0);">Parent Entity</a>
</li>
<li class="slds-breadcrumb__item">
<a href="javascript:void(0);">Parent Record Name</a>
</li>
</ol>
</nav>
<nav role="navigation" aria-label="Breadcrumbs">
<ol class="slds-breadcrumb slds-list_horizontal slds-wrap slds-grid_vertical-align-center">
<li class="slds-breadcrumb__item">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small slds-is-selected" aria-haspopup="true" title="Show More" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#threedots"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_left slds-dropdown_actions">
<ul class="slds-dropdown__list" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Menu Item One">Menu Item One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Menu Item Two">Menu Item Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Menu Item Three">Menu Item Three</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="slds-breadcrumb__item">
<a href="javascript:void(0);">Parent Entity</a>
</li>
<li class="slds-breadcrumb__item">
<a href="javascript:void(0);">Parent Record Name</a>
</li>
</ol>
</nav>
</div>Documentation: Tabs
<div class="demo-container" style="height:12rem; margin-bottom: 1rem">
<div class="slds-tabs_default">
<ul class="slds-tabs_default__nav" role="tablist">
<li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
</li>
<li class="slds-tabs_default__item" title="Item Two" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
</li>
<li class="slds-tabs_default__item" title="Item Three" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a>
</li>
<li class="slds-tabs_default__item" title="Item Four" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">Item Four</a>
</li>
<li class="slds-tabs_default__item" title="Item Five" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-5" id="tab-default-5__item">Item Five</a>
</li>
<li class="slds-tabs_default__item slds-tabs_default__overflow-button" title="More Tabs" role="presentation">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<button class="slds-button" aria-haspopup="true" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">More
<svg class="slds-button__icon slds-button__icon_x-small slds-button__icon_right" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
</button>
<div class="slds-dropdown slds-dropdown_right">
<ul class="slds-dropdown__list slds-dropdown_length-with-icon-10" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Accounts">Accounts</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Approvals">Approvals</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Lead">Leads</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div id="tab-default-1" style="height: 10rem" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
<h2>Item One Content</h2>
</div>
<div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
<h2>Item Two Content</h2>
</div>
<div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
<h2>Item Three Content</h2>
</div>
<div id="tab-default-4" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">
<h2>Item Four Content</h2>
</div>
<div id="tab-default-5" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-5__item">
<h2>Item Five Content</h2>
</div>
</div>
</div>
<div class="demo-container" style="height:12rem; margin-bottom: 1rem">
<div class="slds-tabs_default">
<ul class="slds-tabs_default__nav" role="tablist">
<li class="slds-tabs_default__item slds-is-active" title="Opportunities" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">
<span class="slds-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-opportunity" title="Opportunities">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
</svg>
</span>
</span>Opportunities</a>
</li>
<li class="slds-tabs_default__item" title="Cases" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">
<span class="slds-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-case" title="Cases">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
</svg>
</span>
</span>Cases</a>
</li>
<li class="slds-tabs_default__item" title="Products" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">
<span class="slds-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-product" title="Products">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#product"></use>
</svg>
</span>
</span>Products</a>
</li>
<li class="slds-tabs_default__item" title="Price Books" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">
<span class="slds-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-pricebook" title="Price Books">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#pricebook"></use>
</svg>
</span>
</span>Price Books</a>
</li>
<li class="slds-tabs_default__item" title="Contacts" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-5" id="tab-default-5__item">
<span class="slds-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-contact" title="Contacts">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
</svg>
</span>
</span>Contacts</a>
</li>
<li class="slds-tabs_default__item slds-tabs_default__overflow-button" title="More Tabs" role="presentation">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<button class="slds-button" aria-haspopup="true" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">More
<svg class="slds-button__icon slds-button__icon_x-small slds-button__icon_right" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
</button>
<div class="slds-dropdown slds-dropdown_right">
<ul class="slds-dropdown__list slds-dropdown_length-with-icon-10" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Accounts">
<span class="slds-media slds-media_center">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">Accounts</span>
</span>
</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Approvals">
<span class="slds-media slds-media_center">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-approval" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#approval"></use>
</svg>
</span>
</span>
<span class="slds-media__body">Approvals</span>
</span>
</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Lead">
<span class="slds-media slds-media_center">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-lead" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
</svg>
</span>
</span>
<span class="slds-media__body">Leads</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div id="tab-default-1" style="height: 10rem" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
<h2>Item One Content</h2>
</div>
<div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
<h2>Item Two Content</h2>
</div>
<div id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
<h2>Item Three Content</h2>
</div>
<div id="tab-default-4" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">
<h2>Item Four Content</h2>
</div>
<div id="tab-default-5" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-5__item">
<h2>Item Five Content</h2>
</div>
</div>
</div>Documentation: Scoped Tabs
<div class="demo-container" style="height:12rem">
<div class="slds-tabs_scoped">
<ul class="slds-tabs_scoped__nav" role="tablist">
<li class="slds-tabs_scoped__item slds-is-active" title="Item One" role="presentation">
<a class="slds-tabs_scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item">Item One</a>
</li>
<li class="slds-tabs_scoped__item" title="Item Two" role="presentation">
<a class="slds-tabs_scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item">Item Two</a>
</li>
<li class="slds-tabs_scoped__item" title="Item Three" role="presentation">
<a class="slds-tabs_scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item">Item Three</a>
</li>
<li class="slds-tabs_scoped__item slds-tabs_scoped__overflow-button" title="More Tabs" role="presentation">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<button class="slds-button" aria-haspopup="true" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">More
<svg class="slds-button__icon slds-button__icon_x-small slds-button__icon_right" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
</button>
<div class="slds-dropdown slds-dropdown_right">
<ul class="slds-dropdown__list slds-dropdown_length-with-icon-10" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Item Four">Item Four</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Item Five">Item Five</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Item Six">Item Six</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div id="tab-scoped-1" class="slds-tabs_scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">Item One Content</div>
<div id="tab-scoped-2" class="slds-tabs_scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">Item Two Content</div>
<div id="tab-scoped-3" class="slds-tabs_scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">Item Three Content</div>
</div>
</div>Documentation: Vertical Tabs
<div class="slds-vertical-tabs" style="margin-bottom: 1rem">
<ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
<li class="slds-vertical-tabs__nav-item slds-is-active" title="Tab 1" role="presentation">
<a class="slds-vertical-tabs__link" href="javascript:void(0)" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">
<span class="slds-vertical-tabs__left-icon"></span>
<span class="slds-truncate" title="Tab 1">Tab 1</span>
<span class="slds-vertical-tabs__right-icon"></span>
</a>
</li>
<li class="slds-vertical-tabs__nav-item" title="Tab 2" role="presentation">
<a class="slds-vertical-tabs__link" href="javascript:void(0)" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-1" id="slds-vertical-tabs-1__nav">
<span class="slds-vertical-tabs__left-icon"></span>
<span class="slds-truncate" title="Tab 2">Tab 2</span>
<span class="slds-vertical-tabs__right-icon"></span>
</a>
</li>
<li class="slds-vertical-tabs__nav-item" title="Tab 3 has a really long label and can wrap or truncate" role="presentation">
<a class="slds-vertical-tabs__link" href="javascript:void(0)" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-2" id="slds-vertical-tabs-2__nav">
<span class="slds-vertical-tabs__left-icon"></span>
<span class="slds-truncate" title="Tab 3 has a really long label and can wrap or truncate">Tab 3 has a really long label and can wrap or truncate</span>
<span class="slds-vertical-tabs__right-icon"></span>
</a>
</li>
</ul>
<div class="slds-vertical-tabs__content slds-show" id="slds-vertical-tabs-0" role="tabpanel" aria-labelledby="slds-vertical-tabs-0__nav">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
</div>
<div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-1" role="tabpanel" aria-labelledby="slds-vertical-tabs-1__nav">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
</div>
<div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-2" role="tabpanel" aria-labelledby="slds-vertical-tabs-2__nav">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
</div>
</div>
<div class="slds-vertical-tabs">
<ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical">
<li class="slds-vertical-tabs__nav-item slds-is-active" title="Opportunities" role="presentation">
<a class="slds-vertical-tabs__link" href="javascript:void(0)" role="tab" tabindex="0" aria-selected="true" aria-controls="slds-vertical-tabs-0" id="slds-vertical-tabs-0__nav">
<span class="slds-vertical-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-opportunity" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
</svg>
</span>
</span>
<span class="slds-truncate" title="Opportunities">Opportunities</span>
<span class="slds-vertical-tabs__right-icon"></span>
</a>
</li>
<li class="slds-vertical-tabs__nav-item" title="Cases" role="presentation">
<a class="slds-vertical-tabs__link" href="javascript:void(0)" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-1" id="slds-vertical-tabs-1__nav">
<span class="slds-vertical-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-case" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
</svg>
</span>
</span>
<span class="slds-truncate" title="Cases">Cases</span>
<span class="slds-vertical-tabs__right-icon">
<span class="slds-badge slds-badge_inverse">New</span>
</span>
</a>
</li>
<li class="slds-vertical-tabs__nav-item" title="Accounts" role="presentation">
<a class="slds-vertical-tabs__link" href="javascript:void(0)" role="tab" tabindex="-1" aria-selected="false" aria-controls="slds-vertical-tabs-2" id="slds-vertical-tabs-2__nav">
<span class="slds-vertical-tabs__left-icon">
<span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-truncate" title="Accounts">Accounts</span>
<span class="slds-vertical-tabs__right-icon"></span>
</a>
</li>
</ul>
<div class="slds-vertical-tabs__content slds-show" id="slds-vertical-tabs-0" role="tabpanel" aria-labelledby="slds-vertical-tabs-0__nav">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
</div>
<div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-1" role="tabpanel" aria-labelledby="slds-vertical-tabs-1__nav">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
</div>
<div class="slds-vertical-tabs__content slds-hide" id="slds-vertical-tabs-2" role="tabpanel" aria-labelledby="slds-vertical-tabs-2__nav">
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
</div>
</div>Documentation: Input • Select • Textarea
<div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-01">Form Label</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-01" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="select-01">Select Label</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="select-01">
<option value="">Please select</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="textarea-id-01">Textarea Label</label>
<div class="slds-form-element__control">
<textarea id="textarea-id-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
</div>
</div><div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-03">
<abbr class="slds-required" title="required">* </abbr>Form Label</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-03" placeholder="Placeholder Text" required="" class="slds-input" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="select-01">
<abbr class="slds-required" title="required">* </abbr>Select Label</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="select-01" required="">
<option value="">Please select</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="textarea-id-01">
<abbr class="slds-required" title="required">* </abbr>Textarea Label</label>
<div class="slds-form-element__control">
<textarea id="textarea-id-01" required="" class="slds-textarea" placeholder="Placeholder Text"></textarea>
</div>
</div><div class="slds-form-element slds-has-error">
<label class="slds-form-element__label" for="form-element-05">
<abbr class="slds-required" title="required">* </abbr>Form Label</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-05" placeholder="Placeholder Text" required="" aria-describedby="form-error-01" class="slds-input" />
</div>
<div class="slds-form-element__help" id="form-error-01">This field is required</div>
</div>
<div class="slds-form-element slds-has-error">
<label class="slds-form-element__label" for="select-01">
<abbr class="slds-required" title="required">* </abbr>Select Label</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select aria-describedby="error-01" class="slds-select" id="select-01" required="">
<option value="">Please select</option>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
</div>
</div>
<div class="slds-form-element__help" id="error-01">This field is required</div>
</div>
<div class="slds-form-element slds-has-error">
<label class="slds-form-element__label" for="textarea-id-01">
<abbr class="slds-required" title="required">* </abbr>Textarea Label</label>
<div class="slds-form-element__control">
<textarea id="textarea-id-01" required="" aria-describedby="error-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
</div>
<div class="slds-form-element__help" id="error-01">This field is required</div>
</div>Documentation:
<div class="demo-container">
<div class="slds-form-element">
<label class="slds-checkbox_toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom_none">Checkbox Toggle Label</span>
<input name="checkbox-toggle-1" type="checkbox" aria-describedby="checkbox-toggle-1" value="checkbox-toggle-1">
<span id="checkbox-toggle-1" class="slds-checkbox_faux_container" aria-live="assertive">
<span class="slds-checkbox_faux"></span>
<span class="slds-checkbox_on">Enabled</span>
<span class="slds-checkbox_off">Disabled</span>
</span>
</label>
</div>
</div>
<div class="demo-container">
<div class="slds-checkbox_add-button">
<input class="slds-assistive-text" type="checkbox" id="add-checkbox-42" value="add-checkbox-42">
<label for="add-checkbox-42" class="slds-checkbox_faux">
<span class="slds-assistive-text">Add product</span>
</label>
</div>
</div>
<div class="demo-container slds-m-top_large">
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Radio Button Group Label</legend>
<div class="slds-form-element__control">
<div class="slds-radio_button-group">
<span class="slds-button slds-radio_button">
<input type="radio" name="radio" id="monday1" value="monday" />
<label class="slds-radio_button__label" for="monday1">
<span class="slds-radio_faux">Mon</span>
</label>
</span>
<span class="slds-button slds-radio_button">
<input type="radio" name="radio" id="tuesday1" value="tuesday" />
<label class="slds-radio_button__label" for="tuesday1">
<span class="slds-radio_faux">Tue</span>
</label>
</span>
<span class="slds-button slds-radio_button">
<input type="radio" name="radio" id="wednesday1" value="wednesday" />
<label class="slds-radio_button__label" for="wednesday1">
<span class="slds-radio_faux">Wed</span>
</label>
</span>
<span class="slds-button slds-radio_button">
<input type="radio" name="radio" id="thursday1" value="thursday" />
<label class="slds-radio_button__label" for="thursday1">
<span class="slds-radio_faux">Thu</span>
</label>
</span>
<span class="slds-button slds-radio_button">
<input type="radio" name="radio" id="friday1" value="friday" />
<label class="slds-radio_button__label" for="friday1">
<span class="slds-radio_faux">Fri</span>
</label>
</span>
</div>
</div>
</fieldset>
</div>
<div class="demo-container slds-m-top_large">
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Checkbox Button Group Label</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox_button-group">
<span class="slds-button slds-checkbox_button">
<input type="checkbox" id="monday" value="monday" name="checkbox" />
<label class="slds-checkbox_button__label" for="monday">
<span class="slds-checkbox_faux">Mon</span>
</label>
</span>
<span class="slds-button slds-checkbox_button">
<input type="checkbox" id="tuesday" value="tuesday" name="checkbox" />
<label class="slds-checkbox_button__label" for="tuesday">
<span class="slds-checkbox_faux">Tue</span>
</label>
</span>
<span class="slds-button slds-checkbox_button">
<input type="checkbox" id="wednesday" value="wednesday" name="checkbox" />
<label class="slds-checkbox_button__label" for="wednesday">
<span class="slds-checkbox_faux">Wed</span>
</label>
</span>
<span class="slds-button slds-checkbox_button">
<input type="checkbox" id="thursday" value="thursday" name="checkbox" />
<label class="slds-checkbox_button__label" for="thursday">
<span class="slds-checkbox_faux">Thu</span>
</label>
</span>
<span class="slds-button slds-checkbox_button">
<input type="checkbox" id="friday" value="friday" name="checkbox" />
<label class="slds-checkbox_button__label" for="friday">
<span class="slds-checkbox_faux">Fri</span>
</label>
</span>
</div>
</div>
</fieldset>
</div>
<div class="demo-container slds-m-top_large">
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
<div class="slds-form-element__control">
<span class="slds-radio">
<input type="radio" id="radio-14" name="options" value="radio-14">
<label class="slds-radio__label" for="radio-14">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-15" name="options" value="radio-15">
<label class="slds-radio__label" for="radio-15">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
</fieldset>
</div>
<div class="demo-container slds-m-top_large">
<fieldset class="slds-form-element slds-has-error">
<legend class="slds-form-element__legend slds-form-element__label">
<abbr class="slds-required" title="required">*</abbr> Radio Group Label</legend>
<div class="slds-form-element__control">
<span class="slds-radio">
<input type="radio" id="radio-1351" value="radio-135" name="options1" aria-describedby="error_01" />
<label class="slds-radio__label" for="radio-1351">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-1361" value="radio-136" name="options1" aria-describedby="error_01" />
<label class="slds-radio__label" for="radio-1361">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
<div id="error_01" class="slds-form-element__help">This field is required</div>
</fieldset>
</div>
<div class="demo-container slds-m-top_large">
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Checkbox Group Label</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-270" value="checkbox-270" />
<label class="slds-checkbox__label" for="checkbox-270">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Checkbox Label</span>
</label>
</div>
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-271" value="checkbox-271" />
<label class="slds-checkbox__label" for="checkbox-271">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Checkbox Label</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="demo-container slds-m-top_large">
<fieldset class="slds-form-element slds-has-error">
<legend class="slds-form-element__legend slds-form-element__label">
<abbr class="slds-required" title="required">*</abbr> Checkbox Group Label</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-282" value="checkbox-282" aria-describedby="error_01" />
<label class="slds-checkbox__label" for="checkbox-282">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Checkbox Label</span>
</label>
</div>
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-283" value="checkbox-283" aria-describedby="error_01" />
<label class="slds-checkbox__label" for="checkbox-283">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">Checkbox Label</span>
</label>
</div>
</div>
<div id="error_01" class="slds-form-element__help">This field is required</div>
</fieldset>
</div>Documentation: Picklist
<div class="demo-container" style="height: 12rem">
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-unique-id-2">Search</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container slds-size_small">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-picklist" aria-expanded="false" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id-2" aria-controls="listbox-unique-id" autoComplete="off" role="textbox" placeholder="Select an Option" readonly="" onFocus="this.parentElement.parentElement.classList.add('slds-is-open')"
onBlur="this.parentElement.parentElement.classList.remove('slds-is-open')" />
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right" title="Description of icon when needed">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Description of icon when needed</span>
</span>
</div>
<div id="listbox-unique-id" role="listbox" class="slds-dropdown slds-dropdown_fluid">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="Option A"> Option A</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-02" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="Option B"> Option B</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-03" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"> Option C</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Documentation: Lookups
<div class="demo-container" style="width: 240px; height: 13rem; overflow: hidden">
<div style="height:15rem">
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-id-1">Relate to</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input" id="combobox-id-1" aria-autocomplete="list" aria-controls="listbox-id-1" autoComplete="off" role="textbox" placeholder="Search..." onFocus="this.parentElement.parentElement.classList.add('slds-is-open')"
onBlur="this.parentElement.parentElement.classList.remove('slds-is-open')" />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
</span>
</div>
<div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div id="option1" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Burlington Textiles Corp of America</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Burlington, NC</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option2" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Dickenson plc</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Lawrence, KS</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option3" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Edge Communications</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Austin, TX</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Documentation: Forms
<div class="form-demo-container">
<div class="slds-form">
<div class="slds-form-element slds-form-element_horizontal">
<label class="slds-form-element__label" for="horizontal-input-id-01">Text Input</label>
<div class="slds-form-element__control">
<input type="text" id="horizontal-input-id-01" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
<div class="slds-form-element slds-form-element_horizontal">
<label class="slds-form-element__label" for="horizontal-input-id-02">Textarea Input</label>
<div class="slds-form-element__control">
<textarea id="horizontal-input-id-02" placeholder="Placeholder Text" class="slds-textarea"></textarea>
</div>
</div>
<fieldset class="slds-form-element slds-form-element_horizontal">
<legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox">
<input type="checkbox" name="default" id="checkbox-9" value="checkbox-9" />
<label class="slds-checkbox__label" for="checkbox-9">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">All opportunities owned by you</span>
</label>
</div>
<div class="slds-checkbox">
<input type="checkbox" name="default" id="checkbox-10" value="checkbox-10" />
<label class="slds-checkbox__label" for="checkbox-10">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">All contacts in the account owned by you</span>
</label>
</div>
</div>
</fieldset>
<fieldset class="slds-form-element slds-form-element_horizontal">
<legend class="slds-form-element__legend slds-form-element__label">Radio Group label</legend>
<div class="slds-form-element__control">
<span class="slds-radio">
<input type="radio" id="radio-9" value="radio-9" name="options" />
<label class="slds-radio__label" for="radio-9">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Lead Generation</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-10" value="radio-10" name="options" />
<label class="slds-radio__label" for="radio-10">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Education Leads</span>
</label>
</span>
</div>
</fieldset>
</div>
</div><div class="form-demo-container">
<div class="slds-form" role="list">
<div class="slds-form__row">
<div class="slds-form__item" role="listitem">
<div class="slds-form-element slds-form-element_horizontal slds-is-editing">
<label class="slds-form-element__label" for="single-form-element-id-02">Label</label>
<div class="slds-form-element__control">
<input type="text" id="single-form-element-id-02" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
</div>
<div class="slds-form__item" role="listitem">
<div class="slds-form-element slds-form-element_horizontal slds-is-editing">
<label class="slds-form-element__label" for="single-form-element-id-03">Label</label>
<div class="slds-form-element__control">
<input type="text" id="single-form-element-id-03" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
</div>
</div>
<div class="slds-form__row">
<div class="slds-form__item" role="listitem">
<div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col">
<label class="slds-form-element__label" for="single-form-element-id-04">Description</label>
<div class="slds-form-element__control">
<textarea id="single-form-element-id-04" placeholder="Placeholder Text" class="slds-textarea">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</textarea>
</div>
</div>
</div>
</div>
</div>
</div>Note: These are complex, refer to the documentation for additional information.
<div class="form-demo-container">
<fieldset class="slds-form-element slds-form-element_compound">
<legend class="slds-form-element__legend slds-form-element__label">Location</legend>
<div class="slds-form-element__control">
<div class="slds-form-element__row">
<div class="slds-size_1-of-2">
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-01">Latitude</label>
<div class="slds-form-element__control">
<input type="text" id="input-01" class="slds-input" />
</div>
</div>
</div>
<div class="slds-size_1-of-2">
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-02">Longitude</label>
<div class="slds-form-element__control">
<input type="text" id="input-02" class="slds-input" />
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
<legend class="slds-form-element__legend slds-form-element__label">Billing Address</legend>
<div class="slds-form-element__control">
<div class="slds-form-element__row">
<div class="slds-size_1-of-1">
<div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-id-04">Billing Street</label>
<div class="slds-form-element__control">
<textarea id="form-element-id-04" required="" class="slds-textarea" placeholder="Placeholder Text">525 S. Lexington Ave</textarea>
</div>
</div>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-size_4-of-6">
<div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-id-05">Billing City</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-id-05" required="" class="slds-input" value="Burlington" />
</div>
</div>
</div>
<div class="slds-size_2-of-6">
<div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-id-06">Billing State/Province</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-id-06" required="" class="slds-input" value="NC" />
</div>
</div>
</div>
</div>
<div class="slds-form-element__row">
<div class="slds-size_4-of-6">
<div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-id-07">Billing Zip/Postal Code</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-id-07" required="" class="slds-input" value="27215" />
</div>
</div>
</div>
<div class="slds-size_2-of-6">
<div class="slds-form-element">
<label class="slds-form-element__label" for="form-element-id-08">Billing Country</label>
<div class="slds-form-element__control">
<input type="text" id="form-element-id-08" required="" class="slds-input" value="USA" />
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div><div class="form-demo-container" style="height: 7rem; padding-top: 3rem">
<div class="slds-form-element">
<label class="slds-form-element__label" for="tooltip-showing-form-element-help-01">Status</label>
<div class="slds-form-element__icon">
<button class="slds-button slds-button_icon" aria-describedby="help" onClick="this.nextElementSibling.classList.toggle('slds-hide')">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg>
<span class="slds-assistive-text">Help</span>
</button>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:-45px;left:-15px;width:170px">
<div class="slds-popover__body">Some helpful information</div>
</div>
</div>
<div class="slds-form-element__control">
<input type="text" id="tooltip-showing-form-element-help-01" placeholder="Placeholder Text" class="slds-input" />
</div>
</div>
</div>Documentation: Data tables
<div class="demo-container" style="padding-bottom: 1rem">
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Close Date">Close Date</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Stage">Stage</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Confidence">Confidence</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Amount">Amount</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Contact">Contact</div>
</th>
</tr>
</thead>
<tbody>
<tr class="slds-hint-parent">
<th data-label="Opportunity Name" scope="row">
<div class="slds-truncate" title="Cloudhub">
<a href="javascript:void(0);" tabindex="-1">Cloudhub</a>
</div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com">
<a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
</div>
</td>
</tr>
<tr class="slds-hint-parent">
<th data-label="Opportunity Name" scope="row">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
<a href="javascript:void(0);" tabindex="-1">Cloudhub + Anypoint Connectors</a>
</div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com">
<a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
</div>
</td>
</tr>
<tr class="slds-hint-parent">
<th data-label="Opportunity Name" scope="row">
<div class="slds-truncate" title="Cloudhub">
<a href="javascript:void(0);" tabindex="-1">Cloudhub</a>
</div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td data-label="Confidence">
<div class="slds-truncate" title="20%">20%</div>
</td>
<td data-label="Amount">
<div class="slds-truncate" title="$25k">$25k</div>
</td>
<td data-label="Contact">
<div class="slds-truncate" title="jrogers@cloudhub.com">
<a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>Supports column sorting and row selection
<div class="demo-container form-actionable-demo" style="overflow: hidden; padding-bottom: 1rem">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-align_right" scope="col" style="width:3.25rem">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-5" value="checkbox-5" tabindex="0" aria-labelledby="check-select-all-label column-group-header" onChange="document.querySelectorAll('.form-actionable-demo tbody input[type=checkbox]').forEach((el) => { el.checked = this.checked; el.dispatchEvent(new Event('change')) })" />
<label class="slds-checkbox__label" for="checkbox-5" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Name" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Name">Name</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-8" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Account Name" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Account Name">Account Name</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-9" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Close Date" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Close Date">Close Date</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Close Date column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-10" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Stage" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Stage">Stage</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Stage column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-11" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Confidence" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Confidence">Confidence</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Confidence column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-12" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Amount" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Amount">Amount</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Amount column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-13" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Contact" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Contact">Contact</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Contact column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-14" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width:3.25rem">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-01" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" onChange="this.parentElement.parentElement.parentElement.classList.toggle('slds-is-selected', this.checked)" />
<label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="Acme - 1,200 Widgets">
<a href="javascript:void(0);" tabindex="0">Acme - 1,200 Widgets</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="4/10/15">4/10/15</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="Value Proposition">Value Proposition</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="30%">30%</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="$25,000,000">$25,000,000</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="jrogers@acme.com">
<a href="javascript:void(0);" tabindex="0">jrogers@acme.com</a>
</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-02" value="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" onChange="this.parentElement.parentElement.parentElement.classList.toggle('slds-is-selected', this.checked)" />
<label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="Acme - 200 Widgets">
<a href="javascript:void(0);" tabindex="0">Acme - 200 Widgets</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="Acme">Acme</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="1/31/15">1/31/15</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="Prospecting">Prospecting</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="60%">60%</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="$5,000,000">$5,000,000</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="bob@acme.com">
<a href="javascript:void(0);" tabindex="0">bob@acme.com</a>
</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 200 Widgets</span>
</button>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-text-align_right" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-03" value="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" onChange="this.parentElement.parentElement.parentElement.classList.toggle('slds-is-selected', this.checked)" />
<label class="slds-checkbox__label" for="checkbox-03" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th scope="row">
<div class="slds-truncate" title="salesforce.com - 1,000 Widgets">
<a href="javascript:void(0);" tabindex="0">salesforce.com - 1,000 Widgets</a>
</div>
</th>
<td role="gridcell">
<div class="slds-truncate" title="salesforce.com">salesforce.com</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="Id. Decision Makers">Id. Decision Makers</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="70%">70%</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="$25,000">$25,000</div>
</td>
<td role="gridcell">
<div class="slds-truncate" title="nathan@salesforce.com">
<a href="javascript:void(0);" tabindex="0">nathan@salesforce.com</a>
</div>
</td>
<td role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for salesforce.com - 1,000 Widgets</span>
</button>
</td>
</tr>
</tbody>
</table>
</div><div class="demo-container" style="overflow-y: hidden; overflow-x: auto; padding-bottom: 1rem">
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col" style="width:3.75rem">
<div class="slds-truncate slds-assistive-text" title="Errors">Errors</div>
</th>
<th class="" scope="col" style="width:2rem">
<span id="column-group-header" class="slds-assistive-text">Choose a row</span>
<div class="slds-th__action slds-th__action_form">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-173" value="checkbox-173" tabindex="0" aria-labelledby="check-select-all-label column-group-header" />
<label class="slds-checkbox__label" for="checkbox-173" id="check-select-all-label">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select All</span>
</label>
</div>
</div>
</th>
<th aria-label="Name" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Name">Name</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-323" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Account Name" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Account Name">Account Name</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Account Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-324" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Close Date" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Close Date">Close Date</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Close Date column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-325" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Stage" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Stage">Stage</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Stage column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-326" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Confidence" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Confidence">Confidence</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Confidence column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-327" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Amount" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Amount">Amount</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Amount column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-328" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th aria-label="Contact" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col" style="width:8.75rem">
<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="0">
<span class="slds-assistive-text">Sort by: </span>
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Contact">Contact</span>
<span class="slds-icon_container slds-icon-utility-arrowdown">
<svg class="slds-icon slds-icon-text-default slds-is-sortable__icon " aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
</svg>
</span>
</div>
</a>
<div class="slds-resizable">
<input type="range" aria-label="Contact column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-329" max="1000" min="20" tabindex="0" />
<span class="slds-resizable__handle">
<span class="slds-resizable__divider"></span>
</span>
</div>
</th>
<th class="" scope="col" style="width:3.25rem">
<div class="slds-truncate slds-assistive-text" title="Actions">Actions</div>
</th>
</tr>
</thead>
<tbody>
<tr aria-selected="false" class="slds-hint-parent slds-is-selected">
<td class="slds-cell-edit slds-cell-error" role="gridcell">
<button id="error-01" class="slds-button slds-button_icon slds-button_icon-error slds-m-horizontal_xxx-small slds-hidden" aria-hidden="true" tabindex="0" title="Item 1 has errors">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
</svg>
<span class="slds-assistive-text">Item 1 has errors</span>
</button>
<span class="slds-row-number slds-text-body_small slds-text-color_weak"></span>
</td>
<td class="slds-cell-edit" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-011" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-011" id="check-button-label-01">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 1</span>
</label>
</div>
</td>
<th class="slds-cell-edit" scope="row">
<span class="slds-grid slds-grid_align-spread">
<a class="slds-truncate" href="javascript:void(0);" id="link-01" tabindex="0" title="Acme - 1,200 Widgets">Acme - 1,200 Widgets</a>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Name of Acme - 1,200 Widgets</span>
</button>
</span>
</th>
<td aria-selected="true" class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="Acme">Acme</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Account Name of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Account Name of Acme - 1,200 Widgets</span>
</button>
</span>
<section aria-describedby="dialog-body-id-2" class="slds-popover slds-popover slds-popover_edit" role="dialog" style="position:absolute;top:0;left:0.0625rem">
<div class="slds-popover__body" id="dialog-body-id-2">
<div class="slds-form-element slds-grid slds-wrap">
<label class="slds-form-element__label slds-form-element__label_edit slds-no-flex" for="company-01">
<span class="slds-assistive-text">Company</span>
</label>
<div class="slds-form-element__control slds-grow">
<input type="text" class="slds-input" id="company-01" value="Acme Enterprises" />
</div>
</div>
</div>
</section>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="4/10/15">4/10/15</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Close Date of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Close Date of Acme - 1,200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="Value Proposition">Value Proposition</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Stage of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Stage of Acme - 1,200 Widgets</span>
</button>
</span>
</td>
<td aria-readonly="true" class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="30%">30%</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" disabled="" tabindex="0" title="Edit Confidence of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
</svg>
<span class="slds-assistive-text">Edit Confidence of Acme - 1,200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="$25,000,000">$25,000,000</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Amount of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Amount of Acme - 1,200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="jrogers@acme.com">jrogers@acme.com</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Contact of Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Contact of Acme - 1,200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 1,200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 1,200 Widgets</span>
</button>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-cell-edit slds-cell-error" role="gridcell">
<button id="error-02" class="slds-button slds-button_icon slds-button_icon-error slds-m-horizontal_xxx-small slds-hidden" aria-hidden="true" tabindex="0" title="Item 2 has errors">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
</svg>
<span class="slds-assistive-text">Item 2 has errors</span>
</button>
<span class="slds-row-number slds-text-body_small slds-text-color_weak"></span>
</td>
<td class="slds-cell-edit" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-021" value="checkbox-02" tabindex="0" aria-labelledby="check-button-label-02 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-021" id="check-button-label-02">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 2</span>
</label>
</div>
</td>
<th class="slds-cell-edit" scope="row">
<span class="slds-grid slds-grid_align-spread">
<a class="slds-truncate" href="javascript:void(0);" id="link-02" tabindex="0" title="Acme - 200 Widgets">Acme - 200 Widgets</a>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Name of Acme - 200 Widgets</span>
</button>
</span>
</th>
<td aria-selected="false" class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="Acme">Acme</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Account Name of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Account Name of Acme - 200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="1/31/15">1/31/15</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Close Date of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Close Date of Acme - 200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="Prospecting">Prospecting</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Stage of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Stage of Acme - 200 Widgets</span>
</button>
</span>
</td>
<td aria-readonly="true" class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="60%">60%</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" disabled="" tabindex="0" title="Edit Confidence of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
</svg>
<span class="slds-assistive-text">Edit Confidence of Acme - 200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="$5,000,000">$5,000,000</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Amount of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Amount of Acme - 200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="bob@acme.com">bob@acme.com</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Contact of Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Contact of Acme - 200 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for Acme - 200 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for Acme - 200 Widgets</span>
</button>
</td>
</tr>
<tr aria-selected="false" class="slds-hint-parent">
<td class="slds-cell-edit slds-cell-error" role="gridcell">
<button id="error-03" class="slds-button slds-button_icon slds-button_icon-error slds-m-horizontal_xxx-small slds-hidden" aria-hidden="true" tabindex="0" title="Item 3 has errors">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>
</svg>
<span class="slds-assistive-text">Item 3 has errors</span>
</button>
<span class="slds-row-number slds-text-body_small slds-text-color_weak"></span>
</td>
<td class="slds-cell-edit" role="gridcell">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-031" value="checkbox-03" tabindex="0" aria-labelledby="check-button-label-03 column-group-header" />
<label class="slds-checkbox__label" for="checkbox-031" id="check-button-label-03">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Select item 3</span>
</label>
</div>
</td>
<th class="slds-cell-edit" scope="row">
<span class="slds-grid slds-grid_align-spread">
<a class="slds-truncate" href="javascript:void(0);" id="link-03" tabindex="0" title="salesforce.com - 1,000 Widgets">salesforce.com - 1,000 Widgets</a>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Name of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Name of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</th>
<td aria-selected="false" class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="salesforce.com">salesforce.com</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Account Name of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Account Name of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Close Date of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Close Date of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="Id. Decision Makers">Id. Decision Makers</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Stage of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Stage of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</td>
<td aria-readonly="true" class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="70%">70%</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" disabled="" tabindex="0" title="Edit Confidence of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
</svg>
<span class="slds-assistive-text">Edit Confidence of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="$25,000">$25,000</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Amount of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Amount of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<span class="slds-grid slds-grid_align-spread">
<span class="slds-truncate" title="nathan@salesforce.com">nathan@salesforce.com</span>
<button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Contact of salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_edit" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit Contact of salesforce.com - 1,000 Widgets</span>
</button>
</span>
</td>
<td class="slds-cell-edit" role="gridcell">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" tabindex="0" title="More actions for salesforce.com - 1,000 Widgets">
<svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More actions for salesforce.com - 1,000 Widgets</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>Documentation: Page headers
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity" title="opportunity">
<svg class="slds-icon slds-page-header__icon" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
</svg>
<span class="slds-assistive-text">opportunity</span>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span class="slds-page-header__title slds-truncate" title="Rohde Corp - 80,000 Widgets">Rohde Corp - 80,000 Widgets</span>
</h1>
</div>
</div>
<p class="slds-page-header__name-meta">Mark Jaeckal • Unlimited Customer • 11/13/15</p>
</div>
</div>
</div>
</div>
</div>
<div class="slds-page-header slds-m-top_x-large">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<svg class="slds-icon slds-page-header__icon" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Opportunities</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">Recently Viewed</span>
</h1>
</div>
<div class="slds-page-header__name-switcher">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-small" aria-haspopup="true" title="Switch list view">
<svg class="slds-button__icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Switch list view</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slds-page-header__col-actions">
<div class="slds-page-header__controls">
<div class="slds-page-header__control">
<ul class="slds-button-group-list">
<li>
<button class="slds-button slds-button_neutral">New</button>
</li>
<li>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="More Actions">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Actions</span>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slds-page-header__row">
<div class="slds-page-header__col-meta">
<p class="slds-page-header__meta-text">10 items • Updated 13 minutes ago</p>
</div>
<div class="slds-page-header__col-controls">
<div class="slds-page-header__controls">
<div class="slds-page-header__control">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-more" aria-haspopup="true" title="List View Controls">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
</svg>
<svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">List View Controls</span>
</button>
</div>
</div>
<div class="slds-page-header__control">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-more" aria-haspopup="true" title="Change view">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#table"></use>
</svg>
<svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Change view</span>
</button>
</div>
</div>
<div class="slds-page-header__control">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Edit List">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>
<span class="slds-assistive-text">Edit List</span>
</button>
</div>
<div class="slds-page-header__control">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Refresh List">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#refresh"></use>
</svg>
<span class="slds-assistive-text">Refresh List</span>
</button>
</div>
<div class="slds-page-header__control">
<ul class="slds-button-group-list">
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Charts">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
</svg>
<span class="slds-assistive-text">Charts</span>
</button>
</li>
<li>
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Filters">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
</svg>
<span class="slds-assistive-text">Filters</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="slds-page-header slds-page-header_record-home slds-m-top_x-large">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<svg class="slds-icon slds-page-header__icon" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
</svg>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Opportunity</span>
<span class="slds-page-header__title slds-truncate" title="Acme - 1,200 Widgets">Acme - 1,200 Widgets</span>
</h1>
</div>
</div>
</div>
</div>
</div>
<div class="slds-page-header__col-actions">
<div class="slds-page-header__controls">
<div class="slds-page-header__control">
<button class="slds-button slds-button_neutral slds-button_stateful slds-not-selected" aria-live="assertive">
<span class="slds-text-not-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>Follow</span>
<span class="slds-text-selected">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Following</span>
<span class="slds-text-selected-focus">
<svg class="slds-button__icon slds-button__icon_small slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>Unfollow</span>
</button>
</div>
<div class="slds-page-header__control">
<ul class="slds-button-group-list">
<li>
<button class="slds-button slds-button_neutral">Edit</button>
</li>
<li>
<button class="slds-button slds-button_neutral">Delete</button>
</li>
<li>
<button class="slds-button slds-button_neutral">Clone</button>
</li>
<li>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="More Actions">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Actions</span>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="slds-page-header__row slds-page-header__row_gutters">
<div class="slds-page-header__col-details">
<ul class="slds-page-header__detail-row">
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 1">Field 1</div>
<div class="slds-truncate" title="Description that demonstrates truncation with a long text field.">Description that demonstrates truncation with a long text field.</div>
</li>
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 2 (3)">Field 2 (3)
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon" aria-haspopup="true" title="More Actions">
<svg class="slds-button__icon slds-button__icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Actions</span>
</button>
</div>
</div>
<div class="slds-truncate" title="Multiple Values">Multiple Values</div>
</li>
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 3">Field 3</div>
<div class="slds-truncate" title="Hyperlink">
<a href="javascript:void(0);">Hyperlink</a>
</div>
</li>
<li class="slds-page-header__detail-block">
<div class="slds-text-title slds-truncate" title="Field 4">Field 4</div>
<div class="slds-truncate" title="Description (2-line truncation—must use JS to truncate).">Description (2-line truncati...</div>
</li>
</ul>
</div>
</div>
</div>Documentation: Cards
<div class="demo-container" style="max-width: 450px">
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span>Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
</article>
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account" title="account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
<span class="slds-assistive-text">account</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
<span>Accounts</span>
</a>
</h2>
</div>
<div class="slds-no-flex slds-button-group">
<button class="slds-button slds-button_neutral">New</button>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-button_last">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon slds-is-selected" aria-haspopup="true" title="Show More" onClick="this.parentNode.classList.toggle('slds-is-open'); this.classList.toggle('slds-is-selected')">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
<ul class="slds-dropdown__list" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Action One">Action One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Two">Action Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Three">Action Three</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">Card Body with Padding</div>
<footer class="slds-card__footer">
<a class="slds-card__footer-action" href="javascript:void(0);">View All
<span class="slds-assistive-text">Accounts</span>
</a>
</footer>
</article>
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-task" title="task">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
</svg>
<span class="slds-assistive-text">task</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Tasks">
<span>Tasks</span>
</a>
</h2>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">
<div role="status" class="slds-spinner slds-spinner_small">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</article>
<article class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-task" title="task">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
</svg>
<span class="slds-assistive-text">task</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Tasks">
<span>Tasks</span>
</a>
</h2>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">
<div class="slds-illustration slds-illustration_small">
<img class="slds-illustration__svg" src="/assets/images/illustrations/empty-state-assistant.svg" />
<div class="slds-text-longform">
<h3 class="slds-text-heading_medium">No new tasks</h3>
<p class="slds-text-body_regular">Nothing needs your attention right now. Check back later.</p>
</div>
</div>
</div>
</article>
<article class="slds-card" style="width: 1065px">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-contact" title="contact">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
</svg>
<span class="slds-assistive-text">contact</span>
</span>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Contacts (3)">
<span>Contacts (3)</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<button class="slds-button slds-button_neutral">New</button>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">
<ul class="slds-grid slds-wrap slds-grid_pull-padded">
<li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
<article class="slds-tile slds-media slds-card__tile slds-hint-parent">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-contact" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
</svg>
<span class="slds-assistive-text">Contact</span>
</span>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
<h3 class="slds-tile__title slds-truncate" title="Related Record Title 1">
<a href="javascript:void(0);">Related Record Title 1</a>
</h3>
<div class="slds-shrink-none">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More options">
<svg class="slds-button__icon slds-button__icon_hint" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
</div>
</div>
<div class="slds-tile__detail">
<dl class="slds-list_horizontal slds-wrap">
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for second label">Description for second label</dd>
</dl>
</div>
</div>
</article>
</li>
<li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
<article class="slds-tile slds-media slds-card__tile slds-hint-parent">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-contact" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
</svg>
<span class="slds-assistive-text">Contact</span>
</span>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
<h3 class="slds-tile__title slds-truncate" title="Related Record Title 1">
<a href="javascript:void(0);">Related Record Title 1</a>
</h3>
<div class="slds-shrink-none">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More options">
<svg class="slds-button__icon slds-button__icon_hint" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
</div>
</div>
<div class="slds-tile__detail">
<dl class="slds-list_horizontal slds-wrap">
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for second label">Description for second label</dd>
</dl>
</div>
</div>
</article>
</li>
<li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
<article class="slds-tile slds-media slds-card__tile slds-hint-parent">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-contact" title="Description of icon when needed">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
</svg>
<span class="slds-assistive-text">Contact</span>
</span>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
<h3 class="slds-tile__title slds-truncate" title="Related Record Title 1">
<a href="javascript:void(0);">Related Record Title 1</a>
</h3>
<div class="slds-shrink-none">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More options">
<svg class="slds-button__icon slds-button__icon_hint" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More options</span>
</button>
</div>
</div>
<div class="slds-tile__detail">
<dl class="slds-list_horizontal slds-wrap">
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">First Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label</dd>
<dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Second Label:</dt>
<dd class="slds-item_detail slds-truncate" title="Description for second label">Description for second label</dd>
</dl>
</div>
</div>
</article>
</li>
</ul>
</div>
<footer class="slds-card__footer">
<a class="slds-card__footer-action" href="javascript:void(0);">View All
<span class="slds-assistive-text">Contacts</span>
</a>
</footer>
</article>
</div>Documentation: Activity Timeline;
<div class="demo-container" style="max-height: 424px; overflow: hidden">
<ul class="slds-timeline">
<li>
<div class="slds-timeline__item_expandable slds-timeline__item_task slds-is-open">
<span class="slds-assistive-text">task</span>
<div class="slds-media">
<div class="slds-media__figure">
<button class="slds-button slds-button_icon" title="Toggle details for Review proposals for EBC deck with larger team and have marketing review this" aria-controls="task-item-expanded" aria-expanded="true">
<svg class="slds-button__icon slds-timeline__details-action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-assistive-text">Toggle details for Review proposals for EBC deck with larger team and have marketing review this</span>
</button>
<div class="slds-icon_container slds-icon-standard-task slds-timeline__icon" title="task">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
<div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
<div class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-5" value="checkbox-5">
<label class="slds-checkbox__label" for="checkbox-5">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">Mark Review proposals for EBC deck with larger team and have marketing review this complete</span>
</label>
</div>
<h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this">
<a href="javascript:void(0);">
<strong>Review proposals for EBC deck with larger team and have marketing review this</strong>
</a>
</h3>
<div class="slds-no-flex">
<span class="slds-icon_container slds-icon-utility-rotate" title="Recurring Task">
<svg class="slds-icon slds-icon_xx-small slds-icon-text-default slds-m-left_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rotate"></use>
</svg>
<span class="slds-assistive-text">Recurring Task</span>
</span>
</div>
</div>
<div class="slds-timeline__actions slds-timeline__actions_inline">
<p class="slds-timeline__date">9:00am | 3/20/17</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for this item">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for this item</span>
</button>
</div>
</div>
<p class="slds-m-horizontal_xx-small">
<a href="javascript:void(0);">You</a> created a task with
<a href="javascript:void(0);">Charlie Gomez</a>
</p>
<article class="slds-box slds-timeline__item_details slds-theme_default slds-m-top_x-small slds-m-horizontal_xx-small slds-p-around_medium" id="task-item-expanded" aria-hidden="false">
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">Name</span>
<span class="slds-text-body_medium slds-truncate" title="Charlie Gomez">
<a href="javascript:void(0);">Charlie Gomez</a>
</span>
</li>
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">Related To</span>
<span class="slds-text-body_medium slds-truncate" title="Tesla Cloudhub + Anypoint Connectors">
<a href="javascript:void(0);">Tesla Cloudhub + Anypoint Connectors</a>
</span>
</li>
</ul>
<div>
<span class="slds-text-title">Description</span>
<p class="slds-p-top_x-small">Need to finalize proposals and brand details before the meeting</p>
</div>
</article>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item_expandable slds-timeline__item_call">
<span class="slds-assistive-text">log_a_call</span>
<div class="slds-media">
<div class="slds-media__figure">
<button class="slds-button slds-button_icon" title="Toggle details for Mobile conversation on Monday" aria-controls="call-item-expanded" aria-expanded="false">
<svg class="slds-button__icon slds-timeline__details-action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-assistive-text">Toggle details for Mobile conversation on Monday</span>
</button>
<div class="slds-icon_container slds-icon-standard-log-a-call slds-timeline__icon" title="call">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#log_a_call"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
<div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
<h3 class="slds-truncate" title="Mobile conversation on Monday">
<a href="javascript:void(0);">
<strong>Mobile conversation on Monday</strong>
</a>
</h3>
</div>
<div class="slds-timeline__actions slds-timeline__actions_inline">
<p class="slds-timeline__date">10:00am | 3/23/17</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for this item">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for this item</span>
</button>
</div>
</div>
<p class="slds-m-horizontal_xx-small">
<a href="javascript:void(0);">You</a> logged a call with
<a href="javascript:void(0);">Adam Chan</a>
</p>
<article class="slds-box slds-timeline__item_details slds-theme_default slds-m-top_x-small slds-m-horizontal_xx-small" id="call-item-expanded" aria-hidden="true">
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">Name</span>
<span class="slds-text-body_medium slds-truncate" title="Adam Chan">
<a href="javascript:void(0);">Adam Chan</a>
</span>
</li>
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">Related To</span>
<span class="slds-text-body_medium slds-truncate" title="Tesla Cloudhub + Anypoint Connectors">
<a href="javascript:void(0);">Tesla Cloudhub + Anypoint Connectors</a>
</span>
</li>
</ul>
<div>
<span class="slds-text-title">Description</span>
<p class="slds-p-top_x-small">Adam seemed interested in closing this deal quickly! Let’s move.</p>
</div>
</article>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item_expandable slds-timeline__item_email">
<span class="slds-assistive-text">email</span>
<div class="slds-media">
<div class="slds-media__figure">
<button class="slds-button slds-button_icon" title="Toggle details for Re: Mobile conversation on Monday with the new global team" aria-controls="email-item-expanded" aria-expanded="false">
<svg class="slds-button__icon slds-timeline__details-action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-assistive-text">Toggle details for Re: Mobile conversation on Monday with the new global team</span>
</button>
<div class="slds-icon_container slds-icon-standard-email slds-timeline__icon" title="email">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
<div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
<h3 class="slds-truncate" title="Re: Mobile conversation on Monday with the new global team">
<a href="javascript:void(0);">
<strong>Re: Mobile conversation on Monday with the new global team</strong>
</a>
</h3>
<div class="slds-no-flex">
<span class="slds-icon_container slds-icon-utility-groups" title="Group email">
<svg class="slds-icon slds-icon_xx-small slds-icon-text-default slds-m-left_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#groups"></use>
</svg>
<span class="slds-assistive-text">Group email</span>
</span>
<span class="slds-icon_container slds-icon-utility-attach" title="Has attachments">
<svg class="slds-icon slds-icon_xx-small slds-icon-text-default slds-m-left_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#attach"></use>
</svg>
<span class="slds-assistive-text">Has attachments</span>
</span>
</div>
</div>
<div class="slds-timeline__actions slds-timeline__actions_inline">
<p class="slds-timeline__date">10:00am | 3/24/17</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for this item">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for this item</span>
</button>
</div>
</div>
<p class="slds-m-horizontal_xx-small">
<a href="javascript:void(0);">You</a> emailed
<a href="javascript:void(0);">Lea Chan</a>
</p>
<article class="slds-box slds-timeline__item_details slds-theme_default slds-m-top_x-small slds-m-horizontal_xx-small" id="email-item-expanded" aria-hidden="true">
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">From Address</span>
<span class="slds-text-body_medium slds-truncate" title="Jackie Dewar">
<a href="javascript:void(0);">Jackie Dewar</a>
</span>
</li>
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">To Address</span>
<span class="slds-text-body_medium slds-truncate" title="Lea Chan">
<a href="javascript:void(0);">Lea Chan</a>
</span>
</li>
</ul>
<div>
<span class="slds-text-title">Text Body</span>
<p class="slds-p-top_x-small">Hi everyone, Thanks for meeting with the team today and going through the proposals we saw. This goes on and wraps if needed.</p>
</div>
<button class="slds-button slds-button_neutral slds-m-top_small">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#world"></use>
</svg>Public Sharing</button>
</article>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item_expandable slds-timeline__item_event">
<span class="slds-assistive-text">event</span>
<div class="slds-media">
<div class="slds-media__figure">
<button class="slds-button slds-button_icon" title="Toggle details for EBC Follow up call" aria-controls="event-item-expanded" aria-expanded="false">
<svg class="slds-button__icon slds-timeline__details-action-icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-assistive-text">Toggle details for EBC Follow up call</span>
</button>
<div class="slds-icon_container slds-icon-standard-event slds-timeline__icon" title="event">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#event"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
<div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
<h3 class="slds-truncate" title="EBC Follow up call">
<a href="javascript:void(0);">
<strong>EBC Follow up call</strong>
</a>
</h3>
<div class="slds-no-flex">
<span class="slds-icon_container slds-icon-utility-world" title="Public sharing">
<svg class="slds-icon slds-icon_xx-small slds-icon-text-default slds-m-left_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#world"></use>
</svg>
<span class="slds-assistive-text">Public sharing</span>
</span>
</div>
</div>
<div class="slds-timeline__actions slds-timeline__actions_inline">
<p class="slds-timeline__date">10:30am | 3/24/17</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for this item">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for this item</span>
</button>
</div>
</div>
<p class="slds-m-horizontal_xx-small">
<a href="javascript:void(0);">You</a> created an event with
<a href="javascript:void(0);">Aida Lee</a> and 5 others</p>
<article class="slds-box slds-timeline__item_details slds-theme_default slds-m-top_x-small slds-m-horizontal_xx-small" id="event-item-expanded" aria-hidden="true">
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">Location</span>
<span class="slds-text-body_medium slds-truncate" title="Westen St. Francis, San Francisco, CA, 94622">
<a href="javascript:void(0);">Westen St. Francis, San Francisco, CA, 94622</a>
</span>
</li>
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">Attendees</span>
<span class="slds-text-body_medium slds-truncate" title="Jason Dewar (Organizer) + 5 others">
<a href="javascript:void(0);">Jason Dewar (Organizer) + 5 others</a>
</span>
</li>
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">When</span>
<span class="slds-text-body_medium slds-truncate" title="March 26, 10:00 AM - 11:00 AM">
<a href="javascript:void(0);">March 26, 10:00 AM - 11:00 AM</a>
</span>
</li>
</ul>
<div>
<span class="slds-text-title">Description</span>
<p class="slds-p-top_x-small">Let's discuss the 2017 product roadmap and address any questions</p>
</div>
<button class="slds-button slds-button_neutral slds-m-top_small">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#world"></use>
</svg>Public Sharing</button>
</article>
</div>
</div>
</div>
</li>
</ul>
</div>Documentation: Accordion
<div class="demo-container">
<ul class="slds-accordion slds-theme_default">
<li class="slds-accordion__list-item">
<section class="slds-accordion__section slds-is-open">
<div class="slds-accordion__summary">
<h3 class="slds-accordion__summary-heading">
<button aria-controls="accordion-details-01" aria-expanded="true" class="slds-button slds-button_reset slds-accordion__summary-action">
<svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-truncate" title="Accordion summary">Accordion summary</span>
</button>
</h3>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="Show More">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
<ul class="slds-dropdown__list" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Action One">Action One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Two">Action Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Three">Action Three</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-accordion__content" id="accordion-details-01">Accordion details - A</div>
</section>
</li>
<li class="slds-accordion__list-item">
<section class="slds-accordion__section">
<div class="slds-accordion__summary">
<h3 class="slds-accordion__summary-heading">
<button aria-controls="accordion-details-02" aria-expanded="false" class="slds-button slds-button_reset slds-accordion__summary-action">
<svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-truncate" title="Accordion summary">Accordion summary</span>
</button>
</h3>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="Show More">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
<ul class="slds-dropdown__list" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Action One">Action One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Two">Action Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Three">Action Three</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div hidden="" class="slds-accordion__content" id="accordion-details-02">Accordion details - B</div>
</section>
</li>
<li class="slds-accordion__list-item">
<section class="slds-accordion__section">
<div class="slds-accordion__summary">
<h3 class="slds-accordion__summary-heading">
<button aria-controls="accordion-details-03" aria-expanded="false" class="slds-button slds-button_reset slds-accordion__summary-action">
<svg class="slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
<span class="slds-truncate" title="Accordion summary">Accordion summary</span>
</button>
</h3>
<div class="slds-dropdown-trigger slds-dropdown-trigger_click">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="Show More">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
<div class="slds-dropdown slds-dropdown_actions slds-dropdown_right">
<ul class="slds-dropdown__list" role="menu">
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate" title="Action One">Action One</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Two">Action Two</span>
</a>
</li>
<li class="slds-dropdown__item" role="presentation">
<a href="javascript:void(0);" role="menuitem" tabindex="-1">
<span class="slds-truncate" title="Action Three">Action Three</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div hidden="" class="slds-accordion__content" id="accordion-details-03">Accordion details - C</div>
</section>
</li>
</ul>
</div>Documentation: Modals
<div style="height:640px; background-color: #004c97; position: relative;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open" style="position: absolute">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad
dolore
quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
<p>Dolor eiusmod sunt ex incididunt cillum quis nostrud velit duis sit officia. Lorem aliqua enim laboris do dolor eiusmod officia. Mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident. Eiusmod et adipisicing culpa
deserunt nostrud
ad veniam nulla aute est. Labore esse esse cupidatat amet velit id elit consequat minim ullamco mollit enim excepteur ea.</p>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">Cancel</button>
<button class="slds-button slds-button_brand">Save</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open" style="position: absolute"></div>
</div>Documentation: Path
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<div class="slds-path">
<div class="slds-grid slds-path__track">
<div class="slds-grid slds-path__scroller-container">
<div class="slds-path__scroller" role="application">
<div class="slds-path__scroller_inner">
<ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
<li class="slds-path__item slds-is-current slds-is-active" role="presentation">
<a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Current Stage:</span>
</span>
<span class="slds-path__title">Contacted</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">Open</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-3" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">Unqualified</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-4" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">Nurturing</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-5" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">Closed</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-grid slds-path__action">
<span class="slds-path__stage-name">Stage: Unqualified</span>
<button class="slds-button slds-button_brand slds-path__mark-complete">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Mark Status as Complete</button>
</div>
</div>
</div>
</div>
</article>
<article class="slds-card slds-m-top_x-large">
<div class="slds-card__body slds-card__body_inner">
<div class="slds-path">
<div class="slds-grid slds-path__track">
<div class="slds-grid slds-path__scroller-container">
<div class="slds-path__scroller" role="application">
<div class="slds-path__scroller_inner">
<ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
<li class="slds-path__item slds-is-complete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-6" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span class="slds-path__title">Contacted</span>
</a>
</li>
<li class="slds-path__item slds-is-complete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-7" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span class="slds-path__title">Open</span>
</a>
</li>
<li class="slds-path__item slds-is-complete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-8" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Stage Complete</span>
</span>
<span class="slds-path__title">Unqualified</span>
</a>
</li>
<li class="slds-path__item slds-is-current slds-is-active" role="presentation">
<a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-9" role="option" tabindex="0">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
<span class="slds-assistive-text">Current Stage:</span>
</span>
<span class="slds-path__title">Nurturing</span>
</a>
</li>
<li class="slds-path__item slds-is-incomplete" role="presentation">
<a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-10" role="option" tabindex="-1">
<span class="slds-path__stage">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-path__title">Closed</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-grid slds-path__action">
<span class="slds-path__stage-name">Stage: Unqualified</span>
<button class="slds-button slds-button_brand slds-path__mark-complete">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Mark Status as Complete</button>
</div>
</div>
</div>
</div>
</article>Documentation: Date picker
<div style="height:25rem">
<div class="slds-form-element slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
<label class="slds-form-element__label" for="date-input-id">Date</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
<input type="text" id="date-input-id" placeholder=" " class="slds-input" value="06/24/2019" />
<button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Select a date">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#event"></use>
</svg>
<span class="slds-assistive-text">Select a date</span>
</button>
</div>
<div aria-hidden="false" aria-label="Date picker: June" class="slds-datepicker slds-dropdown slds-dropdown_left" role="dialog">
<div class="slds-datepicker__filter slds-grid">
<div class="slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow">
<div class="slds-align-middle">
<button class="slds-button slds-button_icon slds-button_icon-container" title="Previous Month">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
</svg>
<span class="slds-assistive-text">Previous Month</span>
</button>
</div>
<h2 aria-atomic="true" aria-live="assertive" class="slds-align-middle" id="month">June</h2>
<div class="slds-align-middle">
<button class="slds-button slds-button_icon slds-button_icon-container" title="Next Month">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
</svg>
<span class="slds-assistive-text">Next Month</span>
</button>
</div>
</div>
<div class="slds-shrink-none">
<label class="slds-assistive-text" for="select-01">Pick a Year</label>
<div class="slds-select_container">
<select class="slds-select" id="select-01">
<option>2019</option>
<option>2020</option>
<option>2021</option>
</select>
</div>
</div>
</div>
<table aria-labelledby="month" aria-multiselectable="true" class="slds-datepicker__month" role="grid">
<thead>
<tr id="weekdays">
<th id="Sunday" scope="col">
<abbr title="Sunday">Sun</abbr>
</th>
<th id="Monday" scope="col">
<abbr title="Monday">Mon</abbr>
</th>
<th id="Tuesday" scope="col">
<abbr title="Tuesday">Tue</abbr>
</th>
<th id="Wednesday" scope="col">
<abbr title="Wednesday">Wed</abbr>
</th>
<th id="Thursday" scope="col">
<abbr title="Thursday">Thu</abbr>
</th>
<th id="Friday" scope="col">
<abbr title="Friday">Fri</abbr>
</th>
<th id="Saturday" scope="col">
<abbr title="Saturday">Sat</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">31</span>
</td>
<td aria-selected="false" role="gridcell" tabindex="0">
<span class="slds-day">1</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">2</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">3</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">4</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">5</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">6</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="slds-day">7</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">8</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">9</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">10</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">11</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">12</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">13</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="slds-day">14</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">15</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">16</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">17</span>
</td>
<td aria-selected="false" aria-current="date" class="slds-is-today" role="gridcell">
<span class="slds-day">18</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">19</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">20</span>
</td>
</tr>
<tr class="slds-has-multi-selection">
<td aria-selected="false" role="gridcell">
<span class="slds-day">21</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">22</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">23</span>
</td>
<td aria-selected="true" class="slds-is-selected" role="gridcell">
<span class="slds-day">24</span>
</td>
<td aria-selected="false" class="" role="gridcell">
<span class="slds-day">25</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">26</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">27</span>
</td>
</tr>
<tr class="">
<td aria-selected="false" class="" role="gridcell">
<span class="slds-day">28</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">29</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="slds-day">30</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">1</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">2</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">3</span>
</td>
<td aria-disabled="true" aria-selected="false" class="slds-disabled-text" role="gridcell">
<span class="slds-day">4</span>
</td>
</tr>
</tbody>
</table>
<button class="slds-button slds-align_absolute-center slds-text-link">Today</button>
</div>
</div>
</div>Documentation: Time picker
<div class="slds-form-element" style="height:18rem">
<label class="slds-form-element__label" for="combobox-unique-id-5">Time</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-combobox-picklist slds-timepicker" aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id-5" aria-autocomplete="list" aria-controls="listbox-unique-id" autoComplete="off" role="textbox" placeholder=" " />
<span class="slds-icon_container slds-icon-utility-clock slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#clock"></use>
</svg>
</span>
</div>
<div id="listbox-unique-id" role="listbox" class="slds-dropdown slds-dropdown_fluid slds-dropdown_length-5">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="6:00am"> 6:00am</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-02" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="7:00am"> 7:00am</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-03" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="8:00am"> 8:00am</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-04" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="9:00am"> 9:00am</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-05" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="10:00am"> 10:00am</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-06" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="11:00am"> 11:00am</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-07" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="12:00pm"> 12:00pm</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-08" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="1:00pm"> 1:00pm</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-09" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="2:00pm"> 2:00pm</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-10" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="3:00pm"> 3:00pm</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-11" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="4:00pm"> 4:00pm</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-12" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center" role="option">
<span class="slds-media__figure">
<svg class="slds-icon slds-icon_x-small slds-listbox__icon-selected" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="5:00pm"> 5:00pm</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Documentation: Dynamic menu
<div class="demo-container" style="height:14rem;position:relative;margin-left:1rem">
<button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Show Favorites">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>
</svg>
<span class="slds-assistive-text">Show Favorites</span>
</button>
<section aria-describedby="dialog-body-id-5" aria-label="My Favourites" class="slds-popover slds-nubbin_top-left slds-dynamic-menu" role="dialog" style="position:absolute;left:-0.5rem;top:48px">
<div class="slds-popover__body slds-p-horizontal_none" id="dialog-body-id-5">
<div id="listbox-unique-id" role="listbox">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown_length-10" role="group" aria-label="My Favorites">
<li role="presentation" class="slds-listbox__item">
<div class="slds-media slds-listbox__option slds-listbox__option_plain" role="presentation">
<h3 class="slds-listbox__option-header" role="presentation">My Favorites</h3>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="listbox-option-id-2" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option" tabindex="0">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Acme</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • San Francisco</span>
</span>
</div>
</li>
</ul>
</div>
</div>
<footer class="slds-popover__footer">
<ul>
<li>
<button class="slds-button slds-button_reset slds-p-vertical_xx-small slds-size_1-of-1">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
</svg>Favorite this page</button>
</li>
<li>
<button class="slds-button slds-button_reset slds-p-vertical_xx-small slds-size_1-of-1">
<svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
</svg>Edit Favorites</button>
</li>
</ul>
</footer>
</section>
</div>Documentation: Color picker
<div class="demo-container">
<div class="slds-color-picker">
<div class="slds-color-picker__summary">
<label class="slds-color-picker__summary-label" for="color-picker-summary-input">Choose Color</label>
<button class="slds-button slds-color-picker__summary-button slds-button_icon slds-button_icon-more" title="Choose Color">
<span class="slds-swatch" style="background: rgb(87, 123, 193);">
<span class="slds-assistive-text">hsl(220, 46%, 55%)</span>
</span>
<svg class="slds-button__icon slds-button__icon_small slds-m-left_xx-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">Choose a color. Current color: #5679C0</span>
</button>
<div class="slds-form-element slds-color-picker__summary-input">
<div class="slds-form-element__control">
<input id="color-picker-summary-input" class="slds-input" type="text" value="#5679C0">
</div>
</div>
</div>
<section aria-describedby="dialog-body-id-2" aria-label="Choose a color" class="slds-popover slds-color-picker__selector slds-show" role="dialog">
<div class="slds-popover__body" id="dialog-body-id-2">
<div class="slds-tabs_default">
<ul class="slds-tabs_default__nav" role="tablist">
<li class="slds-tabs_default__item slds-is-active" title="Default" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="color-picker-default" id="color-picker-default__item">Default</a>
</li>
<li class="slds-tabs_default__item" title="Custom" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="color-picker-custom" id="color-picker-custom__item">Custom</a>
</li>
</ul>
<div id="color-picker-default" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="color-picker-default__item">
<ul class="slds-color-picker__swatches" role="listbox">
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="0">
<span class="slds-swatch" style="background: rgb(227, 171, 236);">
<span class="slds-assistive-text">#e3abec</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(194, 219, 247);">
<span class="slds-assistive-text">#c2dbf7</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(159, 214, 255);">
<span class="slds-assistive-text">#9fd6ff</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(157, 231, 218);">
<span class="slds-assistive-text">#9de7da</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(157, 240, 192);">
<span class="slds-assistive-text">#9df0c0</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(255, 240, 153);">
<span class="slds-assistive-text">#fff099</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(254, 212, 154);">
<span class="slds-assistive-text">#fed49a</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(208, 115, 224);">
<span class="slds-assistive-text">#d073e0</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(134, 186, 243);">
<span class="slds-assistive-text">#86baf3</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(94, 187, 255);">
<span class="slds-assistive-text">#5ebbff</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(68, 216, 190);">
<span class="slds-assistive-text">#44d8be</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(59, 226, 130);">
<span class="slds-assistive-text">#3be282</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(255, 230, 84);">
<span class="slds-assistive-text">#ffe654</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(255, 183, 88);">
<span class="slds-assistive-text">#ffb758</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(189, 53, 189);">
<span class="slds-assistive-text">#bd35bd</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(87, 121, 193);">
<span class="slds-assistive-text">#5779c1</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(94, 187, 255);">
<span class="slds-assistive-text">#5ebbff</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(0, 174, 169);">
<span class="slds-assistive-text">#00aea9</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(60, 186, 76);">
<span class="slds-assistive-text">#3cba4c</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(245, 188, 37);">
<span class="slds-assistive-text">#f5bc25</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(249, 146, 33);">
<span class="slds-assistive-text">#f99221</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(88, 13, 140);">
<span class="slds-assistive-text">#580d8c</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(0, 25, 112);">
<span class="slds-assistive-text">#001970</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(10, 35, 153);">
<span class="slds-assistive-text">#0a2399</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(11, 116, 119);">
<span class="slds-assistive-text">#0b7477</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(11, 107, 80);">
<span class="slds-assistive-text">#0b6b50</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(182, 126, 17);">
<span class="slds-assistive-text">#b67e11</span>
</span>
</a>
</li>
<li class="slds-color-picker__swatch" role="presentation">
<a class="slds-color-picker__swatch-trigger" href="#" role="option" tabindex="-1">
<span class="slds-swatch" style="background: rgb(184, 93, 13);">
<span class="slds-assistive-text">#b85d0d</span>
</span>
</a>
</li>
</ul>
</div>
<div id="color-picker-custom" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="color-picker-custom__item">
<div class="slds-color-picker__custom">
<p id="color-picker-instructions" class="slds-assistive-text">Use arrow keys to select a saturation and brightness, on an x and y axis.</p>
<div class="slds-color-picker__custom-range" style="background: rgb(0, 85, 255);">
<a class="slds-color-picker__range-indicator" href="#" aria-live="assertive" aria-atomic="true" aria-describedby="color-picker-instructions" style="bottom: 45%; left: 46%;">
<span class="slds-assistive-text">Saturation: 46%. Brightness: 45%.</span>
</a>
</div>
<div class="slds-color-picker__hue-and-preview">
<label class="slds-assistive-text" for="color-picker-input-range-2">Select Hue</label>
<input type="range" class="slds-color-picker__hue-slider" min="0" max="360" id="color-picker-input-range-2" value="208">
<span class="slds-swatch" style="background: rgb(86, 121, 192);">
<span class="slds-assistive-text" aria-hidden="true">#5679C0</span>
</span>
</div>
<div class="slds-color-picker__custom-inputs">
<div class="slds-form-element slds-color-picker__input-custom-hex">
<label class="slds-form-element__label" for="color-picker-input-hex-2">Hex</label>
<div class="slds-form-element__control">
<input id="color-picker-input-hex-2" class="slds-input" type="text" value="#5679C0">
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="color-picker-input-r-2">
<abbr title="Red">R</abbr>
</label>
<div class="slds-form-element__control">
<input id="color-picker-input-r-2" class="slds-input" type="text" value="86">
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="color-picker-input-g-2">
<abbr title="Green">G</abbr>
</label>
<div class="slds-form-element__control">
<input id="color-picker-input-g-2" class="slds-input" type="text" value="121">
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="color-picker-input-b-2">
<abbr title="blue">B</abbr>
</label>
<div class="slds-form-element__control">
<input id="color-picker-input-b-2" class="slds-input" type="text" value="192">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="slds-popover__footer">
<div class="slds-color-picker__selector-footer">
<button class="slds-button slds-button_neutral">Cancel</button>
<button class="slds-button slds-button_brand">Done</button>
</div>
</footer>
</section>
</div>
</div>The LDS team periodically release bugfixes and new features to SLDS (see the release notes). To update the FOX-themed version, follow the instructions below.
npm install and npm start, which launches the Previewer at http://localhost:3003/local/preview
assets/images/ directory.ui/_design_tokens.scss to apply the FOX version of that file. Download it here.As a sanity check (or if you're doing other customizations), use the Previewer running on localhost:3003 to check your work.
Building for distribution is straightforward:
$ npm run build && npm run distThis creates a portable version in the .dist/ directory:
.dist/assets/fonts/ – The Salesforce Sans font files.dist/assets/icons/ – Icon images.dist/assets/images/ – Static images.dist/assets/styles/ – CSS files with the theme customizations appliedThe .dist/assets/ directory may be copied to the root of a project directory or uploaded to a CDN. Reference the library with:
<link rel="stylesheet" href="/assets/styles/salesforce-lightning-design-system.min.css">After you have a local copy of SLDS, it's easy to update to the latest version:
In the local copy you created above, pull the latest code:
$ git stash # Save any local modifications
$ git pull --rebase
$ git stash applyui/_design_tokens.scss are still present.assets/images/logo-fox.svgnpm run build && npm run dist.dist/assets/ to your application's repositoryFor the latest, and to get these colors in CSS, see the Invision DSM.
See also: The complete list of SLDS colors.
Put this in the bottom of ~/slds/ui/_design_tokens.scss or download the full file.
// Named colors from DSM:
$color-black-resin: #232222;
$color-fox-pop-blue: #004c97;
$color-fox-red: #d2232a;
$color-fox-gray: #e5e5e5;
$color-fox-dark-blue: #00263e;
$color-fox-dark-red: #830b0d;
$color-fox-light-blue: #008bcd;
// Begin SLDS FOX overrides
$color-brand: $color-fox-pop-blue;
$color-brand-dark: $color-fox-dark-blue;
$color-brand-darker: $color-fox-dark-blue;
$brand-primary: $color-fox-pop-blue;
$brand-background-primary: $color-fox-pop-blue;
$brand-accessible: $color-fox-pop-blue;
$brand-background-dark: $color-black-resin;
$brand-primary-active: $color-fox-light-blue;
$brand-primary-transparent: rgba($color-fox-pop-blue, .1);
$brand-primary-transparent-10: rgba($color-fox-pop-blue, .1);
$brand-primary-transparent-40: rgba($color-fox-pop-blue, .4);
$brand-text-link: $color-fox-pop-blue;
$brand-text-link-active: $color-fox-light-blue;
$color-background: $color-fox-gray;
$color-background-inverse: $color-fox-dark-blue;
$color-background-backdrop: rgba($color-black-resin, .75);
$color-background-alt: lighten($color-fox-pop-blue, 70%);
$color-background-alt-inverse: $color-fox-dark-blue;
$color-text-destructive: $color-fox-red;
$color-text-destructive-hover: $color-fox-dark-red;
$color-text-error: $color-fox-red;
$color-text-required: $color-fox-red;
$color-background-destructive: $color-fox-red;
$color-background-destructive-hover: $color-fox-dark-red;
.slds-global-header__logo {
background-image: url("/assets/images/logo-fox.svg") !important;
background-size: auto 65% !important;
}