Notice success: Page caching is currently active.

Dismiss

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;

}

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

+1

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.

Server type Choose your server type so Hummingbird can give you the rules to apply caching.
This is the server type your website is hosted on. If you are using CloudFlare connect your account to control your cache settings from here.
Expiry Time Please choose your desired expiry time. Google recommends 8 days as a good benchmark.
This is a field with a note.
<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>

Buttons

Use any of the available button classes to quickly create a styled button. Buttons are almost always used inside of a .sui-box.

<!-- Standard button -->
<button type="button" class="sui-button">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="sui-button sui-button-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="sui-button sui-button-green">Green</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="sui-button sui-button-red">Red</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="sui-button sui-button-ghost">Ghost</button>

Sizes

Need a larger button? Add .sui-button-lg to increase size.

<button type="button" class="sui-button sui-button-lg">Large Button</button>
<button type="button" class="sui-button sui-button-primary sui-button-lg">Large Button</button>

Button Icons

Include the icon inside of the button or link. The .sui-fw class should be added to the icons when they are inline with text to create the appropriate separation.

<button type="button" class="sui-button sui-button-ghost sui-button-lg"><i class="sui-icon-alert sui-fw"></i> Large Ghost Button</button>
<button type="button" class="sui-button sui-button-ghost sui-button-lg">Large Ghost Button <i class="sui-icon-alert sui-fw"></i></button>
<button type="button" class="sui-button sui-button-green"><i class="sui-icon-alert sui-fw"></i> Green</button>
<button type="button" class="sui-button sui-button-green">Green Button <i class="sui-icon-alert sui-fw"></i></button>
<button type="button" class="sui-button sui-button-icon"><i class="sui-icon-arrow-right sui-fw"></i></button>
<button type="button" class="sui-button sui-button-icon sui-button-lg"><i class="sui-icon-arrow-right sui-fw"></i></button>

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:

.sui-col
.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:

.sui-col-md-3
.sui-col-md-6
.sui-col-md-3
<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:

.sui-col-lg-3
.sui-col-lg-3
.sui-col-lg-3
.sui-col-lg-3
.sui-col-sm-9
.sui-col-sm-3
.sui-col-lg-4
.sui-col-lg-4 .sui-col-lg-offset-4
.sui-col-sm-8 .sui-col-sm-offset-4
.sui-col-sm-7 .sui-col-sm-offset-5

You can reverse the order of the columns by adding the class .sui-reverse to the .sui-row element.

Original:

1
2
3
<div class="sui-row">
	<div class="sui-col">
		1
	</div>
	<div class="sui-col">
		2
	</div>
	<div class="sui-col">
		3
	</div>
</div>

Reversed:

1
2
3
<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:

.sui-hidden-md .sui-hidden-sm .sui-hidden-xs
.sui-hidden-md
.sui-hidden-lg

Progress Bars

Progress bars can be dynamically moved by changing the width of .sui-progress-bar span with js.

0%
Can't close progress bar...
<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>
20%
Can close progress bar...
<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

Reset to defaults 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.
Super-compress my files Compress your files up to 2x more than regular optimization and reduce your page load speed even further.
Enable super-compression
Enable WPMU DEV CDN 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.
Host my files on the WPMU DEV CDN

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

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>

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>

This is a field with a note.
File Upload
This is an error message

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>

Sidenav

Lorem ipsum dolor sit amet.

<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="#database-optimisation">Database Optimisation</a>
				<span class="sui-tag sui-tag-warning">4</span>
			</li>
			<li class="sui-vertical-tab">
				<a href="#reporting">Reporting</a>
			</li>
			<li class="sui-vertical-tab">
				<a href="#lanskc">Content Creator</a>
				<i class="sui-icon-check-tick" aria-hidden="true"></i>
			</li>
		</ul>
		<div class="sui-sidenav-hide-lg">
			<select class="sui-mobile-nav" style="display: none;">
				<option value="#database-optimisation" selected="selected">Improvements</option>
				<option value="#reporting">Reporting</option>
				<option value="#lanskc">Content Creator</option>
			</select>
		</div>
	</div>
	<div class="sui-box">
		<div class="sui-box-header">
			<h2 class="sui-box-title">Content With Sidenav</h2>
		</div>
		<div class="sui-box-body">
			...
		</div>
	</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.

  1. Copy the generated code into your .htaccess file & save your changes.
  2. Restart Apache.
  3. 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>

Tags

Lorem ipsum dolor sit amet.

+1 +2 +3 +4 +5 +6
<span class="sui-tag sui-tag-warning">+1</span>

<span class="sui-tag sui-tag-success">+2</span>

<span class="sui-tag sui-tag-error">+3</span>

<span class="sui-tag sui-tag-inactive">+4</span>

<span class="sui-tag sui-tag-disabled">+5</span>

<span class="sui-tag sui-tag-upgrade">+6</span>

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.

Default

Page caching is currently active.

Notice warning

Dismiss

Notice error

Success

Success

<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 Text
DFN Text
Strong Text

Toggles

Lorem ipsum dolor sit amet.

Toggles

This is an error message
<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-.

Example:
<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.