Notice success: Page caching is currently active.
DismissShared UI
Usage
This page serves as a showcase for the Shared UI library used internally for WPMU DEV plugins.
npm install @wpmudev/shared-ui
Depending on your plugin's setup, you can either include the whole production ready css and js files or explicitly import needed sass partials & individual js components into your plugins build (recommended).
Requirements
In order to avoid conflicts with other versions of this library, we are using a versioned body class in the format .sui-x-x-x
where hyphens are replacing the periods of the current shared-ui package version. When using the shared-ui library in your plugin, make sure you are adding a body class with the same shared-ui version you are using.
add_filter( 'admin_body_class', 'admin_body_classes' ); function admin_body_classes( $classes ) { $classes .= ' sui-2-0-0 '; return $classes; }
Page Heading
Page Headings contain the h1 and have the options of actions left and right.
Example Heading
<div class="sui-header"> <h1 class="sui-header-title">Example Heading</h1> <div class="sui-actions-left"> <label class="sui-toggle"> <input type="checkbox"> <span class="sui-toggle-slider"></span> </label> </div> <div class="sui-actions-right"> <button class="sui-button sui-button-ghost"><i class="sui-icon-academy"></i> View Documentation</button> </div> </div>
Boxes
Boxes are the primary visual containers. They should be used to hold related information.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec nihil sane ad rem; Quid est, quod ab ea absolvi et perficidebeat? Nunc haec primum fortasse audientis servire debemus. Itaque primos congressus copulationesque et consuetudinum instituendarumvoluntates fieri propter voluptatem; Age sane, inquam. Fortasse id optimum, sed ubi illud Plus semper voluptatis?
<div class="sui-box"> <div class="sui-box-body"> ... </div> </div>
Box Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si mala non sunt, iacet omnis ratio Peripateticorum. An vero, inquit,quisquam potest probare, quod perceptfum, quod. Ergo id est convenienter naturae vivere, a natura discedere. Sed venio adinconstantiae crimen, ne saepius dicas me aberrare; Dici enim nihil potest verius. Nihil opus est exemplis hoc facere longius.Duo Reges: constructio interrete. Ita credo.
<div class="sui-box"> <div class="sui-box-header"> <h3 class="sui-box-title">Box Title</h3> </div> <div class="sui-box-body"> ... </div> <div class="sui-box-footer"> <button class="sui-button">Default Button</button> </div> </div>
Box Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed potestne rerum maior esse dissensio? Post enim Chrysippum eumnon sane est disputatum. Istic sum, inquit. Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quamceteros. Duo Reges: constructio interrete. Non est ista, inquam, Piso, magna dissensio. Quae cum ita sint, effectum est nihilesse malum, quod turpe non sit. Et certamen honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio.
<div class="sui-box"> <div class="sui-box-header"> <h3 class="sui-box-title"><i class="sui-icon-hummingbird" aria-hidden="true"></i>Box Title</h3> <div class="sui-actions-left"> <span class="sui-tag sui-tag-warning">+1</span> </div> <div class="sui-actions-right"> <button class="sui-button">Default Button</button> </div> </div> <div class="sui-box-body"> ... </div> </div>
Box Settings
Lorem ipsum dolor sit amet.
<div class="sui-box"> <div class="sui-box-body"> <div class="sui-box-settings-row"> <div class="sui-box-settings-col-1"> <span class="sui-settings-label">Settings Label</span> <span class="sui-description">Settings Description</span> </div> <div class="sui-box-settings-col-2"> <div class="sui-form-field"> ... </div> </div> </div> </div> </div>
Code Snippets
Code snippets are to be used to display code to the user and allow them to copy to clipboard.
If you are using individual js components, code-snippet.js
is required for copy to clipboard functionality.
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
<pre class="sui-code-snippet"> ... </pre>
Without copy button:
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
<pre class="sui-code-snippet sui-no-copy"> ... </pre>
Grid
The grid system should be used to layout boxes & forms. The grid requires a minimum of 2 components, the columns, and the row that wraps the columns.
For equally spaced columns that stay inline at all breakpoints, you can use the basic .sui-col
:
<div class="sui-row"> <div class="sui-col"> ... </div> <div class="sui-col"> ... </div> </div>
For more control over column behavior for different breakpoints, there is a 12 column grid similar to Bootstrap 3 naming conventions & behavior but powered by flexbox instead of floats:
<div class="sui-row"> <div class="sui-col-md-3"> ... </div> <div class="sui-col-md-6"> ... </div> <div class="sui-col-md-3"> ... </div> </div>
Examples:
You can reverse the order of the columns by adding the class .sui-reverse
to the .sui-row
element.
Original:
<div class="sui-row"> <div class="sui-col"> 1 </div> <div class="sui-col"> 2 </div> <div class="sui-col"> 3 </div> </div>
Reversed:
<div class="sui-row sui-reverse"> <div class="sui-col"> 1 </div> <div class="sui-col"> 2 </div> <div class="sui-col"> 3 </div> </div>
Use a single or combination of the available classes for toggling content across viewport breakpoints.
Extra small devices Phones (<480px) | Small devices Tablets (≥480px) | Medium devices Desktops (≥800px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
.sui-hidden-xs |
Hidden | Visible | Visible | Visible |
.sui-hidden-sm |
Visible | Hidden | Visible | Visible |
.sui-hidden-md |
Visible | Visible | Hidden | Visible |
.sui-hidden-lg |
Visible | Visible | Visible | Hidden |
Examples:
Progress Bars
Progress bars can be dynamically moved by changing the width of .sui-progress-bar span
with js.
<div class="sui-progress-block"> <div class="sui-progress"> <div class="sui-progress-text sui-icon-loader sui-loading"> <span>0%</span> </div> <div class="sui-progress-bar"> <span style="width: 0"></span> </div> </div> </div> <div class="sui-progress-state"> <span class="sui-progress-state-text">Can't close progress bar...</span> </div>
<div class="sui-progress-block sui-progress-can-close"> <div class="sui-progress"> <div class="sui-progress-text sui-icon-loader sui-loading"> <span>20%</span> </div> <div class="sui-progress-bar"> <span style="width: 20%"></span> </div> </div> <button class="sui-progress-close sui-tooltip" type="button" data-tooltip="Cancel Test"> <i class="sui-icon-close"></i> </button> </div> <div class="sui-progress-state"> <span class="sui-progress-state-text">Can close progress bar...</span> </div>
Upsells
Lorem ipsum dolor sit amet.
Options

With our pro version of Hummingbird you can super-compress your files and then host them on our blazing fast CDN. You'll get Hummingbird Pro plus 100+ WPMU DEV plugins, themes & 24/7 WP support. Try Pro for FREE today!
<div class="sui-box"> <div class="sui-box-header"> <h2 class="sui-box-title">Options</h2> <a class="sui-button sui-button-upsell sui-tooltip sui-tooltip-top-left" type="button" data-tooltip="Unlock this as part of a WPMU DEV Membership" href="#sui-upgrade-membership-modal" rel="dialog">Pro Feature</a> </div> <div class="sui-box-body sui-upsell-items"> <div class="sui-box-settings-row"> <div class="sui-box-settings-col-1"> <span class="sui-settings-label">Reset to defaults</span> <span class="sui-description">If your frontend has fallen apart or you just want to go back to the default settings you can use this button to do so. It will clear all your settings and run a new file check.</span> </div> <div class="sui-box-settings-col-2"> <div class="sui-form-field"> <button class="sui-button sui-button-ghost">Reset</button> </div> </div> </div> <div class="sui-box-settings-row sui-disabled"> <div class="sui-box-settings-col-1"> <span class="sui-settings-label">Super-compress my files</span> <span class="sui-description">Compress your files up to 2x more than regular optimization and reduce your page load speed even further.</span> </div> <div class="sui-box-settings-col-2"> <label class="sui-toggle"> <input type="checkbox"> <span class="sui-toggle-slider"></span> </label> <span class="sui-settings-label sui-toggle-label">Enable super-compression</span> </div> </div> <div class="sui-box-settings-row sui-disabled"> <div class="sui-box-settings-col-1"> <span class="sui-settings-label">Enable WPMU DEV CDN</span> <span class="sui-description">By default your files are hosted on your own server. With this setting enabled we will host your files on WPMU DEV’s secure and hyper fast CDN.</span> </div> <div class="sui-box-settings-col-2"> <div class="sui-form-field"> <label class="sui-toggle"> <input type="checkbox"> <span class="sui-toggle-slider"></span> </label> <span class="sui-settings-label sui-toggle-label">Host my files on the WPMU DEV CDN</span> </div> </div> </div> <div class="sui-box-settings-row sui-upsell-row"> <img class="sui-image sui-upsell-image" src="dist/images/hummingbird-upsell-minify.png" srcset="dist/images/hummingbird-upsell-minify@2x.png 2x" alt="WP Smush free installed"> <div class="sui-upsell-notice"> <p>With our pro version of Hummingbird you can super-compress your files and then host them on our blazing fast CDN. You'll get Hummingbird Pro plus 100+ WPMU DEV plugins, themes & 24/7 WP support. <a href="#wphb-upgrade-membership-modal" rel="dialog">Try Pro for FREE today!</a></p> </div> </div> </div> </div>
Tables
Lorem ipsum dolor sit amet.
Title A | Title B | Title C |
---|---|---|
Name | ||
Name | ||
Name |
<table class="sui-table"> <thead> <tr> <th>Title A</th> <th>Title B</th> <th>Title C</th> </tr> </thead> <tbody> <tr> <td> Name </td> <td> <input type="text" class="sui-form-control"> </td> <td> <input type="text" class="sui-form-control"> </td> </tr> <tr> <td> Name </td> <td> <input type="text" class="sui-form-control"> </td> <td> <input type="text" class="sui-form-control"> </td> </tr> <tr> <td> Name </td> <td> <input type="text" class="sui-form-control"> </td> <td> <input type="text" class="sui-form-control"> </td> </tr> </tbody> </table>
Link To
Choose content you want to convert to links.
Insert Links
Specify what post types to insert links into.
<div class="sui-box"> <div class="sui-box-body"> <div class="sui-row"> <div class="sui-col-sm-6"> <div class="sui-field-list"> <div class="sui-field-list-header"> <h3 class="sui-field-list-title">Link To</h3> <p class="sui-description">Choose content you want to convert to links.</p> </div> <div class="sui-field-list-body"> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-1"> Posts </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-1"> <span class="sui-toggle-slider"></span> </label> </div> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-2"> Pages </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-2"> <span class="sui-toggle-slider"></span> </label> </div> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-3"> Categories </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-3"> <span class="sui-toggle-slider"></span> </label> </div> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-4"> Tags </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-4"> <span class="sui-toggle-slider"></span> </label> </div> </div> </div> </div> <div class="sui-col-sm-6"> <div class="sui-field-list"> <div class="sui-field-list-header"> <h3 class="sui-field-list-title">Insert Links</h3> <p class="sui-description">Specify what post types to insert links into.</p> </div> <div class="sui-field-list-body"> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-5"> Posts </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-5"> <span class="sui-toggle-slider"></span> </label> </div> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-6"> Pages </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-6"> <span class="sui-toggle-slider"></span> </label> </div> <div class="sui-field-list-item"> <label class="sui-field-list-item-label" for="demo-table-2-toggle-7"> Comments </label> <label class="sui-toggle"> <input type="checkbox" id="demo-table-2-toggle-8"> <span class="sui-toggle-slider"></span> </label> </div> </div> </div> </div> </div> </div> </div>
Accordions
Lorem ipsum dolor sit amet.
If you are using individual js components, accordion.js
is required.
<div class="sui-row-with-sidenav"> <div class="sui-sidenav"> <ul class="sui-vertical-tabs sui-sidenav-hide-md"> <li class="sui-vertical-tab current"> <a href="#demo-improvements">Improvements</a> <span class="sui-tag sui-tag-success">3</span> </li> <li class="sui-vertical-tab"> <a href="#demo-reporting">Reporting</a> </li> </ul> <div class="sui-sidenav-hide-lg"> <div class="select-container sui-mobile-nav"> <span class="dropdown-handle"> <i class="sui-icon-chevron-down"></i> </span> <select class="sui-mobile-nav wdev-styled" style="display: none;"> <option value="" selected="selected">Improvements</option> <option value="#reporting">Reporting</option> </select> <div class="select-list-container"> <div class="list-value">Improvements</div> <ul class="list-results"> <li class="current">Improvements</li> <li>Reporting</li> </ul> </div> </div> </div> </div> <div class="sui-box"> <div class="sui-box-header"> <h2 class="sui-box-title">Accordions</h2> </div> <div class="sui-box-body"> Here are your latest performance test results. Action as many fixes as possible, however you can always ignore warnings if you are unable to fix them. </div> <table class="sui-table sui-accordion"> <thead> <tr> <th>Recommendation</th> <th>Score / 100</th> <th>Type</th> </tr> </thead> <tbody> <tr class="sui-accordion-item sui-error"> <td class="sui-accordion-item-title"> <i class="sui-icon-warning-alert sui-error"></i> Item </td> <td> <div class="sui-circle-score sui-grade-f" data-score="8"></div> </td> <td> More info on something. <span class="sui-accordion-open-indicator"> <i class="sui-icon-chevron-down"></i> </span> </td> </tr> <tr class="sui-accordion-item-content"> <td colspan=3> <div class="sui-box"> <div class="sui-box-body"> Hello </div> </div> </td> </tr> <tr class="sui-accordion-item sui-warning"> <td class="sui-accordion-item-title"> <i class="sui-icon-warning-alert sui-warning"></i> Item </td> <td> <div class="sui-circle-score sui-grade-d" data-score="95"></div> </td> <td> More info on something. <span class="sui-accordion-open-indicator"> <i class="sui-icon-chevron-down"></i> </span> </td> </tr> <tr class="sui-accordion-item-content"> <td colspan=3> <div class="sui-box"> <div class="sui-box-body"> Hello </div> </div> </td> </tr> <tr class="sui-accordion-item sui-success"> <td class="sui-accordion-item-title"> <i class="sui-icon-check-tick sui-success"></i> Item </td> <td> <div class="sui-circle-score sui-grade-a" data-score="95"></div> </td> <td> More info on something. <span class="sui-accordion-open-indicator"> <i class="sui-icon-chevron-down"></i> </span> </td> </tr> <tr class="sui-accordion-item-content"> <td colspan=3> <div class="sui-box"> <div class="sui-box-body"> Hello </div> </div> </td> </tr> </tbody> </table> </div> </div>
Scores
Animated gauges for scoring. Circles animate on page load.
If you are using individual js components, scores.js
is required.
<div class="sui-circle-score sui-grade-f" data-score="10"></div>
<div class="sui-circle-score sui-grade-c" data-score="55"></div>
<div class="sui-circle-score sui-grade-a" data-score="95"></div>
<div class="sui-circle-score sui-circle-score-lg sui-grade-a" data-score="90"></div>
Dropdowns
Lorem ipsum dolor sit amet.
If you are using individual js components, dropdowns.js
is required.
<div class="sui-dropdown"> <a class="sui-dropdown-anchor sui-icon-more" href="#"></a> <ul> <li><a href="#remove">Options</a></li> <li><a href="#remove">Add to sitemap</a></li> <li><a href="#remove">Remove</a></li> </ul> </div>
<div class="sui-dropdown sui-dropdown-right"> <a class="sui-dropdown-anchor sui-icon-more" href="#"></a> <ul> <li><a href="#remove">Add to sitemap</a></li> <li><a href="#remove">Remove</a></li> </ul> </div>
<div class="sui-dropdown sui-dropdown-center"> <a class="sui-dropdown-anchor sui-icon-more" href="#"></a> <ul> <li><a href="#remove">Add to sitemap</a></li> <li><a href="#remove">Remove</a></li> </ul> </div>
Forms
Lorem ipsum dolor sit amet.
If you are using individual js components, password.js
is required for show/hide password functionality.
Radio Buttons
<!-- Radio button --> <label class="sui-radio"> <input type="radio" name="demo-radio-group"> <span></span> <div class="sui-description">Description for this option.</div> </label> <!-- Radio button --> <label class="sui-radio"> <input type="radio" name="demo-radio-group"> <span></span> <div class="sui-description">Description for this option.</div> </label> <!-- Disabled radio button --> <label class="sui-radio"> <input type="radio" name="demo-radio-group" disabled> <span></span> <div class="sui-description">Description for this disabled option.</div> </label>
Checkboxes
<!-- Checkbox --> <label class="sui-checkbox"> <input type="checkbox"> <span></span> <div class="sui-description">Description for this checkbox.</div> </label> <!-- Checkbox --> <label class="sui-checkbox"> <input type="checkbox"> <span></span> <div class="sui-description">Description for this checkbox.</div> </label> <!-- Disabled checkbox --> <label class="sui-checkbox"> <input type="checkbox" disabled> <span></span> <div class="sui-description">Description for this disabled checkbox.</div> </label>
Summary
The summary is used to display a summary of the pages information. The Shared UI provides the following two examples for your plugin page summaries. Please note you will need to add a class to the sui-summary-image-space
to override the background image.
<div class="sui-box sui-summary"> <div class="sui-summary-image-space"> </div> <div class="sui-summary-segment"> <div class="sui-summary-details"> <span class="sui-summary-large">97</span> <i class="sui-icon-info sui-warning"></i> <span class="sui-summary-percent">/100</span> <span class="sui-summary-sub">Current performance score</span> <span class="sui-summary-detail">December 12, 2017 at 1:46 am</span> <span class="sui-summary-sub">Last test</span> </div> </div> <div class="sui-summary-segment"> <ul class="sui-list"> <li> <span class="sui-list-label">Previous score</span> <span class="sui-list-detail">76</span> </li> <li> <span class="sui-list-label">Improvement</span> <span class="sui-list-detail"><span class="sui-tag sui-tag-error">-1</span></span> </li> <li> <span class="sui-list-label">Recommendations</span> <span class="sui-list-detail">4</span> </li> </ul> </div> </div>
<div class="sui-box sui-summary"> <div class="sui-summary-image-space"> </div> <div class="sui-summary-segment"> <div class="sui-summary-details"> <span class="sui-summary-large">12</span> <i class="sui-icon-info sui-warning sui-lg"></i> <span class="sui-summary-sub">security issues</span> </div> </div> <div class="sui-summary-segment"> <ul class="sui-list"> <li> <span class="sui-list-label">Security Tweaks Actioned</span> <span class="sui-list-detail">11/11</span> </li> <li> <span class="sui-list-label">File Scan Issues</span> <span class="sui-list-detail"><span class="sui-tag sui-tag-success">0</span> </span> </li> <li> <span class="sui-list-label">Last Lockout</span> <span class="sui-list-detail">January 10, 2018 1:05 pm</span> </li> </ul> </div> </div>
Tabs
Lorem ipsum dolor sit amet.
If you are using individual js components, tabs.js
is required.
Hummingbird can automatically apply browser caching for Apache servers by writing your .htaccess file. Alternately, switch to Manual to apply these rules yourself.
Automatic browser caching is active.
Follow the steps below to add browser caching to your Apache server.
- Copy the generated code into your .htaccess file & save your changes.
- Restart Apache.
- Re-check expiry status.
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A0 <FilesMatch "\.(txt|xml|js)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(css)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|svg)$"> ExpiresDefault A691200 </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> ExpiresDefault A691200 </FilesMatch> </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(txt|xml|js)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(css)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|svg)$"> Header set Cache-Control "max-age=691200" </FilesMatch> <FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$"> Header set Cache-Control "max-age=691200" </FilesMatch> </IfModule>
Troubleshooting
If adding the rules to your .htaccess doesn’t work and you have access to vhosts.conf or httpd.conf try to find the line that starts with <Directory> - add the code above into that section and save the file.
If you don't know where those files are, or you aren't able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server
Still having trouble? Start a live chat.
<div class="sui-tabs"> <div class="sui-tab"> <label for="first-tab-content">Automatic</label> <input type="radio" id="first-tab-content" checked> <div class="sui-tab-content"> <p>First Tab Content</p> </div> </div> <div class="sui-tab"> <label for="second-tab-content">Manual</label> <input type="radio" id="second-tab-content"> <div class="sui-tab-content"> <p>Second Tab Content</p> </div> </div> </div>
Notifications
Lorem ipsum dolor sit amet.
Default
Success
Warning
Error
Info
<div class="sui-notice"> <p>Default</p> </div> <div class="sui-notice sui-notice-success"> <p>Success</p> </div> <div class="sui-notice sui-notice-warning"> <p>Warning</p> </div> <div class="sui-notice sui-notice-error"> <p>Error</p> </div> <div class="sui-notice sui-notice-info"> <p>Info</p> </div>
Dismissable
Success!
Dismiss<div class="sui-notice sui-notice-success"> <p>Success!</p> <span class="sui-notice-dismiss"> <a href="#">Dismiss</a> </span> </div>
Sizes
For a smaller size, add .sui-notice-sm
to the notice.
<div class="sui-notice sui-notice-sm"> <p>Default</p> </div> <div class="sui-notice sui-notice-sm sui-notice-success"> <p>Page caching is currently active.</p> </div> <div class="sui-notice sui-notice-sm sui-notice-warning"> <p>Notice warning</p> <span class="sui-notice-dismiss"> <a href="#">Dismiss</a> </span> </div> <div class="sui-notice sui-notice-sm sui-notice-error"> <p>Notice error</p> </div> <div class="sui-notice sui-notice-sm sui-notice-info sui-notice-icon-tick"> <p class="sui-icon-check-tick"></p> </div> <div class="sui-notice sui-notice-sm sui-notice-info sui-no-notice-icon"> <p class="sui-icon-check-tick"></p> </div>
Tooltips
Lorem ipsum dolor sit amet.
<button class="sui-button sui-tooltip" data-tooltip="">Default</button> <button class="sui-button sui-tooltip sui-tooltip-bottom-left" data-tooltip="">Bottom Left</button> <button class="sui-button sui-tooltip sui-tooltip-bottom-right" data-tooltip="">Bottom Right</button> <button class="sui-button sui-tooltip sui-tooltip-top-left" data-tooltip="">Top Left</button> <button class="sui-button sui-tooltip sui-tooltip-top-right" data-tooltip="">Top Right</button> <button class="sui-button sui-tooltip sui-tooltip-left" data-tooltip="">Left</button> <button class="sui-button sui-tooltip sui-tooltip-right" data-tooltip="">Right</button> <button class="sui-button sui-tooltip sui-tooltip-constrained" data-tooltip="">Constrained</button>
Typography
Lorem ipsum dolor sit amet.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie eget massa non consectetur. Vestibulumquam nibh, ultrices non efficitur a, luctus eu tortor. Pellentesque feugiat, est at ultrices vestibulum, sem mauris hendreritsapien, nec ullamcorper neque magna non lorem. Phasellus facilisis nulla ac fringilla interdum. Donec congue metus seddiam ultrices consectetur. Curabitur accumsan felis magna, et varius neque convallis in. Vivamus sagittis risus tinciduntnibh tincidunt, nec auctor nunc vestibulum. Vestibulum venenatis velit mauris, eget efficitur leo mattis sed. Ut ut commodoorci, hendrerit commodo libero. Quisque volutpat mattis lectus, nec placerat purus lacinia vitae. Integer malesuada quislibero hendrerit imperdiet. Curabitur a luctus massa. Integer hendrerit nunc id varius rutrum.
Paragraph small: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie eget massa non consectetur. Vestibulum quam nibh, ultrices non efficitur a, luctus eu tortor. Pellentesque feugiat, est at ultrices vestibulum, sem mauris hendrerit sapien, nec ullamcorper neque magna non lorem. Phasellus facilisis nulla ac fringilla interdum. Donec congue metus sed diam ultrices consectetur. Curabitur accumsan felis magna, et varius neque convallis in. Vivamus sagittis risus tincidunt nibh tincidunt,nec auctor nunc vestibulum. Vestibulum venenatis velit mauris, eget efficitur leo mattis sed. Ut ut commodo orci, hendreritcommodo libero. Quisque volutpat mattis lectus, nec placerat purus lacinia vitae. Integer malesuada quis libero hendreritimperdiet. Curabitur a luctus massa. Integer hendrerit nunc id varius rutrum.
Link TextDFN Text
Strong Text
Toggles
Lorem ipsum dolor sit amet.
Toggles
<label class="sui-toggle"> <input type="checkbox"> <span class="sui-toggle-slider"></span> </label> <label class="sui-toggle"> <input type="checkbox" disabled> <span class="sui-toggle-slider"></span> </label> <label class="sui-toggle"> <input type="checkbox"> <span class="sui-toggle-slider"></span> </label> <span class="sui-toggle-label">Toggle with label.</span>
Icons
All icons are prefixed with .sui-icon-
.
<i class="sui-icon-devman" aria-hidden="true"></i>
The following icons are available. Click icon to copy markup to clipboard.
Icon Sizes
The default size of an icon is the same as its parent element. For more specific sizes, you can choose from the following:
<!-- Small --> <i class="sui-icon-devman sui-sm" aria-hidden="true"></i> <!-- Medium --> <i class="sui-icon-devman sui-md" aria-hidden="true"></i> <!-- Large --> <i class="sui-icon-devman sui-lg" aria-hidden="true"></i> <!-- Extra Large --> <i class="sui-icon-devman sui-xl" aria-hidden="true"></i>
Fixed Width Icons
Use .sui-fw
to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
- Hummingbird
- Code
- Defender
<ul> <li><i class="sui-icon-hummingbird sui-fw" aria-hidden="true"></i> Hummingbird</li> <li><i class="sui-icon-code sui-fw" aria-hidden="true"></i> Code</li> <li><i class="sui-icon-defender sui-fw" aria-hidden="true"></i> Defender</li> </ul>
Animated Icons
You can infinitely spin an icon by adding the .sui-loading
class.
<i class="sui-icon-loader sui-loading" aria-hidden="true"></i>
Dialogs
Dialogs are streamlined, but flexible, dialog prompts with the minimum required functionality.
If you are using individual js components, dialog.js
is required.