UI Components

Reusable elements built to meet basic web app needs.

ui components
Summary

UI components are reusable elements that combine to form UX Patterns. If you are using these for the first time, please read through the component details carefully. The “Adherence Rating” of each pattern explains how strict implementation must be to ensure usability. If you need new components/patterns for your app or if would like to participate in creating additional ones, please let us know.

Adherence Rating Scale:

  1. Just a suggestion - Use it if you like it! Your implementation can vary. You may choose to use a similar pattern of your own.
  2. A really good idea - Some really good thought was put into this. Try and follow the guidelines.
  3. Sort of strict - Significant design and research went into the production of this pattern. Implementation should follow guidelines pretty closely overall.
  4. Basically the law - A lot of research and design went into this pattern. It has been widely accepted as the standard at Rackspace. Implementation must be exactly as prescribed in this article.
ui components
Typography

Headings

Use these styles to visually distinguish sections of content.

When to use

  • Page titles should use <h2 class="rs-page-title">
  • Section headings should use <h1>, sub-sections should use <h3>.
  • Sidebar headings should use <h3>, sidebar sub-headings should use <h4>

Adherence Rating: 2

Examples

Heading Element/Class Markup

Heading 1

 H1 
<h1>Heading 1</h1>

Heading 2

 H2 
<h3>Heading 2</h3>

Heading 2

 H2 w/ .rs-page-title 
<h2 class="rs-page-title">Heading 2</h2>

Heading 3

 H3 
<h3>Heading 3</h3>

Heading 4

 H4 
<h4>Heading 4</h4>

Heading 4

 H4 w/ .rs-quiet 
<h4 class="rs-quiet">Heading 4</h4>
Heading 5
 H5 
<h5>Heading 5</h5>
Heading 6
 H6 
<h6>Heading 6</h6>
ui components
Buttons

How it works

Use these styles to visually distinguish between actions, making it clear to users which action they are performing.

Guidelines for use

  • Button groups should be used to submit forms and should contain a cancel link.
  • Never shown/hide buttons dynamically. Instead, disable/enable buttons using the "disabled" attribute on the button.
  • Learn more about button best practices from our design research.

Adherence Rating: 2

Examples

Button Class Markup
rs-btn rs-btn-primary 
<button class="rs-btn rs-btn-primary">Primary</button>
rs-btn 
<button class="rs-btn">Secondary</button>
rs-btn rs-btn-action 
<button class="rs-btn rs-btn-action">
  <span class="rs-cog"></span> Actions <span class="rs-caret"></span>
</button>
rs-btn rs-btn-login 
<button class="rs-btn rs-btn-login">Login</button>
rs-btn rs-btn-link 
<button class="rs-btn rs-btn-link">Cancel</button>
rs-cog 
<button class="rs-cog"></button>
rs-delete 
<button class="rs-delete"></button>
rs-edit 
<button class="rs-edit"></button>
rs-plus 
<button class="rs-plus"></button>

Primary Buttons

Use for primary actions, like "Create", "Add", "Confirm", or "Submit". These are commonly found in popovers, grouped with a cancel link.

  • There should be only one primary button in view at one time.
  • The primary button should always appear as the top left item in a section or group of buttons.
  • Primary buttons aren't required. You can have a group of secondary buttons only.

Examples

State Class Markup
rs-btn rs-btn-primary 
<button class="rs-btn rs-btn-primary">Default</button>
rs-btn rs-btn-primary active 
<button class="rs-btn rs-btn-primary active">Active</button>
rs-btn rs-btn-primary disabled 
<button class="rs-btn rs-btn-primary disabled">Disabled</button>
rs-btn rs-btn-primary hover 
<button class="rs-btn rs-btn-primary hover">Hover</button>

Secondary Buttons

Use for actions that are not the primary goal of the page.

  • "Add" or "Create" buttons on tables within Create or Detail Views use the secondary style because they are not the only actions on the page.
  • Use in modals for passive actions like "Close" or "Dismiss".
  • Use in multi-step popovers as "Back" buttons.

Examples

State Class Markup
rs-btn 
<button class="rs-btn">Default</button>
rs-btn active 
<button class="rs-btn active">Active</button>
rs-btn disabled 
<button class="rs-btn disabled">Disabled</button>
rs-btn hover 
<button class="rs-btn hover">Hover</button>

Action Buttons

Use for displaying actions on a Detail View in combination with the Action Dropdown.

The downward pointing rs-caret icon indicates that clicking the button produces a dropdown.

Examples

Example Class Markup
rs-btn rs-btn-action 
<button class="rs-btn rs-btn-action">
  <span class="rs-cog"></span> Default <span class="rs-caret"></span>
</button>
rs-btn rs-btn-action active 
<button class="rs-btn rs-btn-action active">
  <span class="rs-cog"></span> Active <span class="rs-caret"></span>
</button>
rs-btn rs-btn-action disabled 
<button class="rs-btn rs-btn-action disabled">
  <span class="rs-cog"></span> Disabled <span class="rs-caret"></span>
</button>
rs-btn rs-btn-action hover 
<button class="rs-btn rs-btn-action hover">
  <span class="rs-cog"></span> Hover <span class="rs-caret"></span>
</button>

Login Buttons

Use on a Rackspace standard login screen.

Do not use red login buttons as deletion buttons. Delete buttons are commonly found in popovers as primary buttons.

Examples

Example Class Markup
rs-btn rs-btn-login 
<button class="rs-btn rs-btn-login">Default</button>
rs-btn rs-btn-login active 
<button class="rs-btn rs-btn-login active">Active</button>
rs-btn rs-btn-login disabled 
<button class="rs-btn rs-btn-login disabled">Disabled</button>
rs-btn rs-btn-login hover 
<button class="rs-btn rs-btn-login hover">Hover</button>

Cancel Links

Use for cancelling an action or process.

  • Use the rs-btn-link class to align cancel links within button groups.
  • The link styling helps users clearly identify the cancel process and relate it as navigating away from their current activity.

Examples

Example Class Markup
rs-btn rs-btn-link 
<button class="rs-btn rs-btn-link">Default</button>
rs-btn rs-btn-link active 
<button class="rs-btn rs-btn-link active">Active</button>
rs-btn rs-btn-link disabled 
<button class="rs-btn rs-btn-link disabled">Disabled</button>
rs-btn rs-btn-link hover 
<button class="rs-btn rs-btn-link hover">Hover</button>

Action Cogs

Use the rs-cog in combination with the Action Dropdown.

  • The rs-cog/dropdown combo is used extensively in the List View Pattern to give users a way to perform actions on each row in the list.
  • The same list of actions should be available in the Action Button in the header of the Detail View.

Examples

Example State Class Markup
Default rs-cog 
<button class="rs-cog"></button>
Active rs-cog active 
<button class="rs-cog active"></button>
Disabled rs-cog disabled 
<button class="rs-cog disabled"></button>
Hover rs-cog hover 
<button class="rs-cog hover"></button>

Delete Buttons

  • Use Delete Buttons to remove a row from a Table without requiring confirmation
  • Use when delete is the only action available for an item
  • Must be set in the last column of the row

Example

Example State Class Markup
Default rs-delete 
<button class="rs-delete"></button>

Link Buttons

  • Use the rs-link class to style an element like a link (e.g., if you need a button's event handling logic on a link).
  • The rs-link class can be used on button, input, div, and span elements.

Examples

Example Class Markup
rs-link 
<button class="rs-link">Button</button>
rs-link 
<input class="rs-link" type="submit" value="Input">
Div
 rs-link 
<div class="rs-link">Div</div>
Span rs-link 
<span class="rs-link">Span</span>

Edit Button

Use the rs-edit button in combination with Key/Value lists in the Details components.

  • When Key/Value items are editable, use the Edit Button to open a popover, modal or new page to update the value.

Examples

Example State Class Markup
Default rs-edit 
<button class="rs-edit"></button>
Active rs-edit active 
<button class="rs-edit active"></button>
Disabled rs-edit disabled 
<button class="rs-edit disabled"></button>
Hover rs-edit hover 
<button class="rs-edit hover"></button>

Plus Button

Use the rs-plus button in combination with Monitoring Status List.

  • If there are no checks on a monitoring-enabled device, use the plus button to let users add checks.
  • The Plus Button should spawn a Popover for creating a check on the device.
  • See the Cloud Servers list for an example.

Examples

Example State Class Markup
Default rs-plus 
<button class="rs-plus"></button>
Hover rs-plus hover 
<button class="rs-plus hover"></button>

Same Styles, Different Tags

Use the tag that works best within your application and development standards.

  • Each of the six button styles can be applied to any tag using the .rs-btn class
  • Typically, you will use button styles with the <button>, <input>, and <a> tags

Examples

Button Tag Markup
<button> 
<button class="rs-btn">Default Button</button>
<input> 
<input class="rs-btn" type="button" value="Default Button">
Default Button <a> 
<a class="rs-btn">Default Button</a>

Button Groups

Use a button group to lay out a set of related actions.

Guidelines for use

  • These are most often used in Popovers or Create Forms to group the save button and the cancel button
  • A button group should never contain more than one primary button
  • The cancel action must always be an rs-btn-link as shown in the example

When Submitting Forms

  • Disable primary and secondary buttons
  • Hide the "Cancel" link
  • Show the processing indicator

Default State

Example

Primary Action Secondary Action Cancel

Markup

<div class="rs-btn-group">
  <a class="rs-btn rs-btn-primary">Primary Action</a>
  <a class="rs-btn">Secondary Action</a>
  <a href="#" class="rs-btn rs-btn-link">Cancel</a>
  <i class="rs-processing-indicator rs-hidden"></i>
</div>

Submitting State

Example

Primary Action Secondary Action Cancel

Markup

<div class="rs-btn-group">
  <a class="rs-btn rs-btn-primary disabled" disabled="disabled">Primary Action</a>
  <a class="rs-btn disabled" disabled="disabled">Secondary Action</a>
  <a href="#" class="rs-btn rs-btn-link rs-hidden">Cancel</a>
  <i class="rs-processing-indicator"></i>
</div>

Research

Below are some really good articles that helped drive our decision-making for button design:

  • Buttons Best Practices
    • Summary of usability guidlines for buttons on the web.
  • Primary & Secondary Actions in Web Forms
    • LukeW guidelines for submit buttons, includes usability results and eyetracking examples.
  • Previous and Next Actions in Web Forms
    • Specific guidelines and illustrations of 'Continue' action in forms.
  • Closeness of Actions and Objects in GUI Design
    • Jakob Nielson on ancient 'closeness gestalt principle' in UI design. Because our forms vary greatly in length and width, this is important to consider when we prescribe sweeping changes.
  • Command Links
    • Nielson on the difference between links (navigational) and buttons (commands), and the insurgence of the hybrid 'command link'. Note: Jakob Nielson is the infamous fundamentalist of usability. He is purposely behind the times, but when he changes his mind, people listen.

ui components
Popover

Use the popover in conjunction with Details and Edit Button to edit data or with the Primary Button to add or create data.

  • The notch of the popover always points to the title (key, link, or button) of the element you are editing or viewing.
  • The popover should cover any information that you are editing.
  • Popover buttons have reserved space at the bottom. Save button labels should indicate what action you are performing and always relate to the subject of the popover.
  • Clicking outside the popover should close it. Interaction with elements under the popover is restricted until closed.
  • Don't force-fit multi-step processes into popovers. That sort of interaction should be acheived using full-page views.
  • Try to avoid spawning popovers from popovers. Keeping the interaction as flat as possible is the key to clean design.
  • Avoid spawning popovers on hover. They should not behave like tooltips.
  • Specify form sizes to match the width of the longest label: xsmall, small, medium, large, xlarge, xxlarge.
Required Components

Adherence Rating: 3

Example

GB
Save
Cancel

Markup

<div class="rs-popover">
    <div class="rs-popover-arrow rs-popover-arrow-top-left"></div>
    <div class="rs-popover-content">
        <div class="rs-popover-body">
            <form class="rs-form-horizontal rs-form-small">
                <div class="rs-control-group">
                    <label class="rs-control-label">Label One</label>
                    <div class="rs-controls">
                        <input type="text" class="rs-input-medium">
                    </div>
                </div>
                <div class="rs-control-group">
                    <label class="rs-control-label">Label Two</label>
                    <div class="rs-controls">
                        <input type="text" class="rs-input-medium"> GB
                    </div>
                </div>
                <div class="rs-control-group">
                    <label class="rs-control-label">Label Three</label>
                    <div class="rs-controls">
                        <input type="text" class="rs-input-medium">
                        <select>
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="rs-popover-footer rs-btn-group">
            <div class="rs-btn rs-btn-primary">Save</div>
            <div class="rs-btn rs-btn-link">Cancel</div>
        </div>
    </div>
</div>

Four corners to choose from

The popover comes with arrows on each top corner. Depending on the relative location of the generating element, you may want to choose the left or right side arrows.

Left and right side arrows are often useful in the Details component.

  • The pover should spawn upon clicking the Edit Button in the Key / Value list.

Top arrows are useful when spawning a popover from a button like the Actions button in Details.

  • The popover should spawn from the Actions Button after a selection has been made from the dropdown.

Example

GB
Save
Cancel

Markup

<div class="rs-popover">
    <div class="rs-popover-arrow rs-popover-arrow-left-top"></div>
    <div class="rs-popover-arrow rs-popover-arrow-top-left"></div>
    <div class="rs-popover-arrow rs-popover-arrow-top-right"></div>
    <div class="rs-popover-arrow rs-popover-arrow-right-top"></div>
    <div class="rs-popover-content">
        <div class="rs-popover-body">
            <form class="rs-form-horizontal rs-form-small">
                <div class="rs-control-group">
                    <label class="rs-control-label">Label One</label>
                    <div class="rs-controls">
                        <input type="text" class="rs-input-medium">
                    </div>
                </div>
                <div class="rs-control-group">
                    <label class="rs-control-label">Label Two</label>
                    <div class="rs-controls">
                        <input type="text" class="rs-input-medium"> GB
                    </div>
                </div>
                <div class="rs-control-group">
                    <label class="rs-control-label">Label Three</label>
                    <div class="rs-controls">
                        <input type="text" class="rs-input-medium">
                        <select>
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="rs-popover-footer rs-btn-group">
            <div class="rs-btn rs-btn-primary">Save</div>
            <div class="rs-btn rs-btn-link">Cancel</div>
        </div>
    </div>
</div>

Left aligned field labels

Use when there are multiple fields within the form or the fields are small.

Specify the form size to match the width of the longest label: xsmall, small, medium, large, xlarge, xxlarge. See the Simple Horizontal Form components.

Example

GB
Save Settings
Cancel

Markup

<div class="rs-popover">
    <div class="rs-popover-arrow rs-popover-arrow-top-left"></div>
    <div class="rs-popover-content">
        <div class="rs-popover-body">
            <form class="rs-form-horizontal rs-form-small">
                <div class="rs-control-group">
                    <label class="control-label">Label One</label>
                    <div class="controls">
                        <input type="text">
                    </div>
                </div>
                <div class="rs-control-group">
                    <label class="rs-control-label">Label Two</label>
                    <div class="rs-controls">
                        <input type="text"> GB
                    </div>
                </div>
                <div class="rs-control-group">
                    <label class="rs-control-label">Label Three</label>
                    <div class="rs-controls">
                        <input type="text">
                        <select>
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="rs-popover-footer rs-btn-group">
            <div class="rs-btn rs-btn-primary">Save Settings</div>
            <div class="rs-btn rs-btn-link">Cancel</div>
        </div>
    </div>
</div>

Top aligned field labels

Use for single field forms. See the Simple Vertical Form components.

Example

Save Settings
Cancel

Markup

<div class="rs-popover">
    <div class="rs-popover-arrow rs-popover-arrow-top-left"></div>
    <div class="rs-popover-content">
        <div class="rs-popover-body">
            <form>
                <label>Label One</label>
                <input type="text" class="input-large">
            </form>
        </div>
        <div class="rs-popover-footer rs-btn-group">
            <div class="rs-btn rs-btn-primary">Save Settings</div>
            <div class="rs-btn rs-btn-link">Cancel</div>
        </div>
    </div>
</div>

Confirmations

  • Actions with permanent effects should be short and to the point.
  • Emphasize the permanent effect in bold.

Example

Permanently delete server Nimbus-Server?
Delete Server
Cancel

Markup

<div class="rs-popover">
    <div class="rs-popover-arrow rs-popover-arrow-top-left"></div>
    <div class="rs-popover-content">
        <div class="rs-popover-body">
            <strong>Permanently delete</strong> server Nimbus-Server?
        </div>
        <div class="rs-popover-footer rs-btn-group">
            <div class="rs-btn rs-btn-primary">Delete Server</div>
            <div class="rs-btn rs-btn-link">Cancel</div>
        </div>
    </div>
</div>

Instructions & Messaging

  • Use Instructions at the top of a popover when a group of fields or a table follow.
  • Should always be written as an action (”Choose” for radio buttons “Select” for dropdowns)
  • Use Warnings or explanations to inform a user about effects of their actions.
  • The text is usually below all choices and right above the buttons.

Example

Choose the disk partition for this server:

Warning: This will destroy all existing data in the server.
Partition Server
Cancel

Markup

<div class="rs-popover">
    <div class="rs-popover-arrow rs-popover-arrow-top-left"></div>
    <div class="rs-popover-content">
        <div class="rs-popover-body">
            <p>Choose the disk partition for this server:</p>
            <form class="rs-form-vertical">
                    <div class="rs-control-group">
                        <div class="rs-controls">
                            <label class="rs-radio">
                                <input type="radio" name="three">
                                <strong>Manual</strong><br>
                                <span class="rs-help-block">Faster build times but requires manual partitioning</span>
                            </label>
                            <label class="rs-radio">
                                <input type="radio" name="three">
                                <strong>Automatic</strong>
                                <span class="rs-help-block">Entire disk is single partition and automatically resizes</span>
                            </label>
                        </div>
                    </div>
            </form><strong>Warning</strong>: This will <strong>destroy</strong> all existing data in the server.
        </div>
        <div class="rs-popover-footer rs-btn-group">
            <div class="rs-btn rs-btn-primary">Partition Server</div>
            <div class="rs-btn rs-btn-link">Cancel</div>
        </div>
    </div>
</div>

When to use

Dropdown menus are used when displaying several related links will not fit the alotted space. There are 3 styles of dropdowns, each with a different purpose. Use the links below to learn more about the usage guidelines for each one:

Adherence Rating: 3

Examples

Action Dropdown

Markup

/* Primary Dropdown */
<div class="rs-nav-item rs-dropdown rs-primary-dropdown">
  <ul class="rs-dropdown-menu visible">
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Links</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Link</a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link hover">Link (Hover)</a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link focus">Link (Focus)</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">External</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Link External <i class="rs-icon-external"></i></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link hover">Link External (Hover) <i class="rs-icon-external"></i></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link focus">Link External (Focus) <i class="rs-icon-external"></i></a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Captions</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Link <span class="rs-dropdown-caption">With Caption</span></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link hover">Link (Hover) <span class="rs-dropdown-caption">With Caption</span></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link focus">Link (Focus) <span class="rs-dropdown-caption">With Caption</span></a></li>
  </ul>
</div>

/* Utility Dropdown */
<div class="rs-nav-item rs-dropdown rs-utility-dropdown">
  <ul class="rs-dropdown-menu visible">
    <li class="rs-dropdown-item"><span>Non Link Text</span></li>
    <li class="rs-divider"></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Link</a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link hover">Link (Hover)</a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link focus">Link (Focus)</a></li>
    <li class="rs-divider"></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Link External <i class="rs-icon-external-dark"></i></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link hover">Link External (Hover) <i class="rs-icon-external-dark"></i></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link focus">Link External (Focus) <i class="rs-icon-external-dark"></i></a></li>
    <li class="rs-divider"></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Link <span class="rs-dropdown-caption">With Caption</span></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link hover">Link (Hover) <span class="rs-dropdown-caption">With Caption</span></a></li>
    <li class="rs-dropdown-item"><a href="#" class="rs-dropdown-link focus">Link (Focus) <span class="rs-dropdown-caption">With Caption</span></a></li>
  </ul>
</div>

/* Action Dropdown */
<div class="rs-dropdown">
  <ul class="rs-dropdown-menu visible">
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Links</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">One</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Two</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">More Links</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Three</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Four</a></li>
  </ul>
</div>

Primary Dropdown

Use in combination with the primary navigation style in the main header of your application.

  • Primary dropdowns are used when your application has more than 5-7 sections, depending on the length of each section name. For example, some applications may only be able to fit 5 sections across the main header.
  • Use when your functionality resembles one of a desktop application.

Example

Markup

<div class="rs-dropdown rs-primary-dropdown rs-nav-item">
  <ul class="rs-dropdown-menu visible">
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Infrastructure</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Servers</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Load Balancers</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">DNS</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Automation</span></li>
    <li class="rs-dropdown-item disabled"><a class="rs-dropdown-link" href="#">Deployments</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Autoscaling</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Developer Tools</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Queues</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Mailgun <i class="rs-icon-external"></i></a></li>
  </ul>
</div>

Utility Dropdown

Use in combination with the utility navigation in the top black bar of your application.

  • Utility dropdowns should be used to organize the right utility nav categories. For example, "Account" will contain pages related to the user's account. "Support" should contain help information, support tickets, etc.

Example

Markup

<div class="rs-dropdown rs-utility-dropdown rs-nav-item">
  <ul class="rs-dropdown-menu visible">
    <li class="rs-dropdown-item"><span class="rs-dropdown-text">Account# 1234567</span></li>
    <li class="rs-divider"></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Billing</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Usage</a></li>
    <li class="rs-dropdown-item disabled"><a class="rs-dropdown-link" href="#">User Management</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Settings</a></li>
    <li class="rs-divider"></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Log Out</a></li>
  </ul>
</div>

Action Dropdown

Use in combination with the action buttons and action cogs to group the most important actions of your product.

  • Action dropdowns usually spawn popovers with simple forms to help perform basic actions. Consider reserving complicated actions for a Detail View or List Table.
  • Actions are grouped using category headers and are often based on the intention of each action. For example, "Rename" is performed to help users "Identify" their products.
  • Actions that require another step (or click) are written with an ellipsis to signify to users that there will be followup steps to the specific action.

Example

Markup

<div class="rs-dropdown">
  <ul class="rs-dropdown-menu visible">
    <li class="rs-dropdown-item"><span class="rs-dropdown-category" id="first">Identify</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Rename Server...</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Tag Server...</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Image</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Create Image...</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Schedule Daily Image...</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Recover</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Rebuild From Image...</a></li>
    <li class="rs-dropdown-item disabled"><a class="rs-dropdown-link" href="#">Enter Rescue Mode...</a></li>
    <li class="rs-dropdown-item"><span class="rs-dropdown-category">Manage</span></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Connect Via Terminal...</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Reboot Server...</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Resize Server...</a></li>
    <li class="rs-dropdown-item disabled"><a class="rs-dropdown-link" href="#">Change Password...</a></li>
    <li class="rs-dropdown-item"><a class="rs-dropdown-link" href="#">Delete Server...</a></li>
  </ul>
</div>
ui components
Tables

When to use

Use Tables to manage lots of items - like lists of servers, tickets, users or files.

This is one of the most important UI Components because it provides a lot of functionality and serves as a navigational hub - so brush up on all the Table's uses and features:

Layout Options

The Table's location in your app determines which layout should be used.

  1. List View Tables
  2. Embedded Tables
Interactions

Both layout options support these features:

Adherence Rating: 3

Example: List View Table

Name Sorted
Item One Data A
Item Two Data B
Item Three Data C
Item Four Data D
Item Five Data E
Item Six Data F

Example: Embedded Table

Name Sorted
Item One Data A
Item Two Data B
Item Three Data C
Item Four Data D
Item Five Data E
Item Six Data F
Item Seven Data G
Item Eight Data H
Item Nine Data I
Item Ten Data J
Item Eleven Data K
Item Twelve Data L
Item Thirteen Data M
Item Fourteen Data N
Item Fifteen Data O
Item Sixteen Data P
Item Seventeen Data Q
Item Eighteen Data R

List View Table

  • Use when the table is the primary UI Component on the page.
  • As a navigational hub it should let users assess status, perform actions and drilldown for detail.
  • See the Cloud Servers list on the Live Demo.
Table States

Example

Name Sorted
Item One Data A
Item Two Data B
Item Three Data C
Item Four Data D
Item Five Data E
Item Six Data F

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th class="rs-table-checkbox"></th>
      <th class="rs-table-cog"></th>
      <th>
        <a href="#list-table" class="rs-table-sort">
          <span class="rs-table-sort-text">Name</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="#list-table" class="rs-table-sort rs-table-sort-desc">
          <span class="rs-table-sort-text">Sorted</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item One</a></td>
      <td class="rs-table-text">Data A</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Two</a></td>
      <td class="rs-table-text">Data B</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-processing rs-table-status-striped"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Three</a></td>
      <td class="rs-table-text">Data C</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Four</a></td>
      <td class="rs-table-text">Data D</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Five</a></td>
      <td class="rs-table-text">Data E</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Six</a></td>
      <td class="rs-table-text">Data F</td>
    </tr>
  </tbody>
</table>

Empty State: List View Table

Use any time there are no items in a list and the user can create items that populate the list.

Use the text in the examples as templates for writing your empty state messages.

  1. Use the title to explain that the table is empty
  2. Use the subtitle to encourage action
  3. Use the message on the third line to introduce the item and provide a link to more information.

Example

Header Header
You don't have any [product] yet.
Create one now.
An additional line to explain why this is useful and a link for more info. Learn more about [product]

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Header</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Header</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<div class="rs-table-overlay">
  <div class="rs-table-overlay-content">
    <div class="rs-table-overlay-title">You don't have any [product] yet.</div>
    <div class="rs-table-overlay-subtitle">Create one now.</div>
    <div class="rs-table-overlay-message">An additional line to explain why this is useful and a link for more info. Learn more about <a href="javascript:void(0);">[product] <i class="rs-icon-external"></i></a></div>
  </div>
</div>

Loading State: List View Table

Use when loading or reloading data, applying a filter, or a running a search that does not apply instantly.

Example

Header Header
Loading…

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Header</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Header</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<div class="rs-table-overlay rs-table-overlay-loading">
  <div class="rs-table-overlay-content">
    <div class="rs-table-overlay-message">Loading&hellip;</div>
  </div>
</div>

Error State: List View Table

Use the error markup when a table fails to load or reload data via ajax call or for a server side error.

Example

Header Header
This is an error message.

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Header</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Header</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<div class="rs-table-overlay rs-table-overlay-error">
  <div class="rs-table-overlay-content">
    <div class="rs-table-overlay-message"><i class="rs-icon-error-indicator"></i>This is an error message.</div>
  </div>
</div>

Embedded Table

  • Use when the table is not the primary UI Component on the page.
  • Use in a section of the Details component, or as content of a Popover.
  • Use when you need to limit the height of a table, by allowing the rows to scroll.
  • See the Networks and Monitoring checks tables on the Live Demo.
Three Sizes

This table has vertical scrolling provided by three max-height classes:

  1. Small
    • Class: rs-embedded-small
    • Max Height: 185 Pixels
  2. Medium
    • Class: rs-embedded-medium
    • Max Height: 365 Pixels
  3. Large
    • Class: rs-embedded-large
    • Max Height: 460 Pixels
Table States

Example: Small Embedded Table

Name Sorted
Item One Data A
Item Two Data B
Item Three Data C
Item Four Data D
Item Five Data E
Item Six Data F
Item Seven Data G
Item Eight Data H
Item Nine Data I
Item Ten Data J
Item Eleven Data K
Item Twelve Data L
Item Thirteen Data M
Item Fourteen Data N
Item Fifteen Data O
Item Sixteen Data P
Item Seventeen Data Q
Item Eighteen Data R

Markup: Small Embedded Table

<div class="rs-embedded-list-table-wrapper rs-embedded-small"><table class="rs-list-table rs-embedded-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th class="rs-table-checkbox"></th>
      <th class="rs-table-cog"></th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Name</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-desc">
          <span class="rs-table-sort-text">Sorted</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item One</a></td>
      <td class="rs-table-text">Data A</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Two</a></td>
      <td class="rs-table-text">Data B</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Three</a></td>
      <td class="rs-table-text">Data C</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Four</a></td>
      <td class="rs-table-text">Data D</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Five</a></td>
      <td class="rs-table-text">Data E</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Six</a></td>
      <td class="rs-table-text">Data F</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Seven</a></td>
      <td class="rs-table-text">Data G</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eight</a></td>
      <td class="rs-table-text">Data H</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Nine</a></td>
      <td class="rs-table-text">Data I</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Ten</a></td>
      <td class="rs-table-text">Data J</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eleven</a></td>
      <td class="rs-table-text">Data K</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Twelve</a></td>
      <td class="rs-table-text">Data L</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Thirteen</a></td>
      <td class="rs-table-text">Data M</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Fourteen</a></td>
      <td class="rs-table-text">Data N</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Fifteen</a></td>
      <td class="rs-table-text">Data O</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Sixteen</a></td>
      <td class="rs-table-text">Data P</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Seventeen</a></td>
      <td class="rs-table-text">Data Q</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eighteen</a></td>
      <td class="rs-table-text">Data R</td>
    </tr>
  </tbody>
</table>
</div>

Example: Medium Embedded Table

Name Sorted
Item One Data A
Item Two Data B
Item Three Data C
Item Four Data D
Item Five Data E
Item Six Data F
Item Seven Data G
Item Eight Data H
Item Nine Data I
Item Ten Data J
Item Eleven Data K
Item Twelve Data L
Item Thirteen Data M
Item Fourteen Data N
Item Fifteen Data O
Item Sixteen Data P
Item Seventeen Data Q
Item Eighteen Data R

Markup: Medium Embedded Table

<div class="rs-embedded-list-table-wrapper rs-embedded-medium"><table class="rs-list-table rs-embedded-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th class="rs-table-checkbox"></th>
      <th class="rs-table-cog"></th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Name</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-desc">
          <span class="rs-table-sort-text">Sorted</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item One</a></td>
      <td class="rs-table-text">Data A</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Two</a></td>
      <td class="rs-table-text">Data B</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Three</a></td>
      <td class="rs-table-text">Data C</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Four</a></td>
      <td class="rs-table-text">Data D</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Five</a></td>
      <td class="rs-table-text">Data E</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Six</a></td>
      <td class="rs-table-text">Data F</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Seven</a></td>
      <td class="rs-table-text">Data G</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eight</a></td>
      <td class="rs-table-text">Data H</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Nine</a></td>
      <td class="rs-table-text">Data I</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Ten</a></td>
      <td class="rs-table-text">Data J</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eleven</a></td>
      <td class="rs-table-text">Data K</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Twelve</a></td>
      <td class="rs-table-text">Data L</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Thirteen</a></td>
      <td class="rs-table-text">Data M</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Fourteen</a></td>
      <td class="rs-table-text">Data N</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Fifteen</a></td>
      <td class="rs-table-text">Data O</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Sixteen</a></td>
      <td class="rs-table-text">Data P</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Seventeen</a></td>
      <td class="rs-table-text">Data Q</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eighteen</a></td>
      <td class="rs-table-text">Data R</td>
    </tr>
  </tbody>
</table>
</div>

Example: Large Embedded Table

Name Sorted
Item One Data A
Item Two Data B
Item Three Data C
Item Four Data D
Item Five Data E
Item Six Data F
Item Seven Data G
Item Eight Data H
Item Nine Data I
Item Ten Data J
Item Eleven Data K
Item Twelve Data L
Item Thirteen Data M
Item Fourteen Data N
Item Fifteen Data O
Item Sixteen Data P
Item Seventeen Data Q
Item Eighteen Data R

Markup: Large Embedded Table

<div class="rs-embedded-list-table-wrapper rs-embedded-large"><table class="rs-list-table rs-embedded-list-table">
  <thead>
    <tr>
      <th class="rs-table-status"></th>
      <th class="rs-table-checkbox"></th>
      <th class="rs-table-cog"></th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Name</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-desc">
          <span class="rs-table-sort-text">Sorted</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item One</a></td>
      <td class="rs-table-text">Data A</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Two</a></td>
      <td class="rs-table-text">Data B</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Three</a></td>
      <td class="rs-table-text">Data C</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Four</a></td>
      <td class="rs-table-text">Data D</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Five</a></td>
      <td class="rs-table-text">Data E</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Six</a></td>
      <td class="rs-table-text">Data F</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Seven</a></td>
      <td class="rs-table-text">Data G</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eight</a></td>
      <td class="rs-table-text">Data H</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Nine</a></td>
      <td class="rs-table-text">Data I</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Ten</a></td>
      <td class="rs-table-text">Data J</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eleven</a></td>
      <td class="rs-table-text">Data K</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Twelve</a></td>
      <td class="rs-table-text">Data L</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-error"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Thirteen</a></td>
      <td class="rs-table-text">Data M</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Fourteen</a></td>
      <td class="rs-table-text">Data N</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Fifteen</a></td>
      <td class="rs-table-text">Data O</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-warning"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Sixteen</a></td>
      <td class="rs-table-text">Data P</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Seventeen</a></td>
      <td class="rs-table-text">Data Q</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu hidden">
            <li><span class="rs-dropdown-category">Manage</span></li>
            <li><a href="#">Action Name&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-link"><a href="javascript:void(0);">Item Eighteen</a></td>
      <td class="rs-table-text">Data R</td>
    </tr>
  </tbody>
</table>
</div>

Empty State: Embedded Table

Use any time there are no items in a list and the user can create items that populate the list.

Use the text in the examples as templates for writing your empty state messages.

  1. Use the title to explain that the table is empty
  2. Use the subtitle to help the user understand what the product does for them

Example

Header Header
You don't have any [product] yet.
Setting up this product helps you do X, Y, and Z.

Markup

<div class="rs-embedded-list-table-wrapper rs-embedded-medium">
  <table class="rs-list-table rs-embedded-list-table">
    <thead>
      <tr>
        <th class="rs-table-status"></th>
        <th>
          <a href="javascript:void(0);" class="rs-table-sort">
            <span class="rs-table-sort-text">Header</span>
            <span class="rs-table-sort-indicator"></span>
          </a>
        </th>
        <th>
          <a href="javascript:void(0);" class="rs-table-sort">
            <span class="rs-table-sort-text">Header</span>
            <span class="rs-table-sort-indicator"></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div class="rs-table-overlay">
    <div class="rs-table-overlay-content">
      <div class="rs-table-overlay-subtitle">You don&#39;t have any [product] yet.</div>
      <div class="rs-table-overlay-message">Setting up this product helps you do X, Y, and Z.</div>
    </div>
  </div>
</div>

Loading State: Embedded Table

Use when loading or reloading data, applying a filter, or a running a search that does not apply instantly.

Example

Header Header
Loading…

Markup

<div class="rs-embedded-list-table-wrapper rs-embedded-medium">
  <table class="rs-list-table rs-embedded-list-table">
    <thead>
      <tr>
        <th class="rs-table-status"></th>
        <th>
          <a href="javascript:void(0);" class="rs-table-sort">
            <span class="rs-table-sort-text">Header</span>
            <span class="rs-table-sort-indicator"></span>
          </a>
        </th>
        <th>
          <a href="javascript:void(0);" class="rs-table-sort">
            <span class="rs-table-sort-text">Header</span>
            <span class="rs-table-sort-indicator"></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div class="rs-table-overlay rs-table-overlay-loading">
    <div class="rs-table-overlay-content">
      <div class="rs-table-overlay-message">Loading&hellip;</div>
    </div>
  </div>
</div>

Error State: Embedded Table

Use the error markup when a table fails to load or reload data via ajax call or for a server side error.

Example

Header Header
This is an error message.

Markup

<div class="rs-embedded-list-table-wrapper rs-embedded-medium">
  <table class="rs-list-table rs-embedded-list-table">
    <thead>
      <tr>
        <th class="rs-table-status"></th>
        <th>
          <a href="javascript:void(0);" class="rs-table-sort">
            <span class="rs-table-sort-text">Header</span>
            <span class="rs-table-sort-indicator"></span>
          </a>
        </th>
        <th>
          <a href="javascript:void(0);" class="rs-table-sort">
            <span class="rs-table-sort-text">Header</span>
            <span class="rs-table-sort-indicator"></span>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div class="rs-table-overlay rs-table-overlay-error">
    <div class="rs-table-overlay-content">
      <div class="rs-table-overlay-message"><i class="rs-icon-error-indicator"></i>This is an error message.</div>
    </div>
  </div>
</div>

Table Row Actions

  • Use Action Cogs to spawn an Action Dropdown when there are multiple actions that can be taken on an item in a list
  • Cogs should appear after status, checkboxes or radio button columns

Example

TD Class
rs-table-cog
rs-table-cog

Markup

<table class="rs-list-table rs-select-table">
  <thead>
    <tr>
      <td class="rs-table-status"></td>
      <td class="rs-table-checkbox"></td>
      <th class="rs-table-cog"></th>
      <th>TD Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-cog"></div>
      </td>
      <td class="rs-table-text">rs-table-cog</td>
    </tr>
    <tr>
      <td class="rs-table-status rs-table-status-ok"></td>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-cog">
        <div class="rs-dropdown">
          <div class="rs-cog rs-dropdown-toggle"></div>
          <ul class="rs-dropdown-menu visible">
            <li><span class="rs-dropdown-category" id="first">Identify</span></li>
            <li><a href="#table-row-actions">Rename Server&hellip;</a></li>
            <li><a href="#table-row-actions">Tag Server&hellip;</a></li>
            <li><span class="rs-dropdown-category">Image</span></li>
            <li><a href="#table-row-actions">Create Image&hellip;</a></li>
            <li><a href="#table-row-actions">Schedule Daily Image&hellip;</a></li>
          </ul>
        </div>
      </td>
      <td class="rs-table-text">rs-table-cog</td>
    </tr>
  </tbody>
</table>

Table Row Selection

  • Use check boxes for row selection when a user can perform batch operations on items in the list
  • Use radio button selection when users can only perform actions on one item at a time
  • When using javascript to select a row, put the click event on the <tr> tag to optimize the user's click target

Example

Row Class
none
selected
none
selected

Markup

<table class="rs-list-table rs-select-table">
  <thead>
    <tr>
      <th class="rs-table-checkbox"></th>
      <th>Row Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-checkbox"><input type="checkbox" /></td>
      <td class="rs-table-text">none</td>
    </tr>
    <tr class="selected">
      <td class="rs-table-checkbox"><input type="checkbox" checked="checked" /></td>
      <td class="rs-table-text">selected</td>
    </tr>
    <tr>
      <td class="rs-table-checkbox"><input type="radio" /></td>
      <td class="rs-table-text">none</td>
    </tr>
    <tr class="selected">
      <td class="rs-table-radio"><input type="radio" checked="checked" /></td>
      <td class="rs-table-text">selected</td>
    </tr>
  </tbody>
</table>

Table Row Heartbeat

  • Use the row heartbeat to provide feedback for user-initiated actions on a table row
  • Most often used in the List View Pattern, the heartbeat can also be used on embedded tables in a Detail View
  • The Heartbeat is an effective way to show the success, or lack thereof, for events that occur in a table

Example

Row Class Use Case
rs-heartbeat-ok Row action successfully completes
rs-heartbeat-warning Row action does not successfully complete
rs-heartbeat-error Deletion action successfully completes

Markup

<table class="rs-list-table">
    <thead>
        <tr>
            <th class="rs-table-status"></th>
            <th>Row Class</th>
            <th>Use Case</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rs-heartbeat-ok">
            <td class="rs-table-status rs-table-status-ok"></td>
            <td class="rs-table-text">rs-heartbeat-ok</td>
            <td>Row action successfully completes</td>
        </tr>
        <tr class="rs-heartbeat-warning">
            <td class="rs-table-status rs-table-status-ok"></td>
            <td class="rs-table-text">rs-heartbeat-warning</td>
            <td>Row action does not successfully complete</td>
        </tr>
        <tr class="rs-heartbeat-error">
            <td class="rs-table-status rs-table-status-ok"></td>
            <td class="rs-table-text">rs-heartbeat-error</td>
            <td>Deletion action successfully completes</td>
        </tr>
    </tbody>
</table>

Table Form Elements

  • Only add form elements to list tables that live on a create page or in a popover
Delete Buttons
  • Use Delete Buttons to remove simple items from a table without requiring confirmation
  • Use when delete is the only action available for an item
  • Must be set in the last column of the row

Example

Form Element TD Class
rs-table-select
rs-table-input
rs-table-input
rs-table-delete

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th>Form Element</th>
      <th>TD Class</th>
      <th class="rs-table-delete"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-select">
        <select class="rs-input-medium">
          <option value="1">Select Option 1</option>
          <option value="2">Select Option 2</option>
          <option value="3">Select Option 3</option>
        </select>
      </td>
      <td class="rs-table-text">rs-table-select</td>
      <td class="rs-table-delete"></td>
    </tr>
    <tr>
      <td class="rs-table-input rs-input-medium"><input type="text" placehoder="Input" /></td>
      <td class="rs-table-text">rs-table-input</td>
      <td class="rs-table-delete"></td>
    </tr>
    <tr>
      <td class="rs-table-input rs-input-medium"><button type="button" class="rs-btn">Button</button></td>
      <td class="rs-table-text">rs-table-input</td>
      <td class="rs-table-delete"></td>
    </tr>
    <tr>
      <td class="rs-table-input rs-input-medium"></td>
      <td class="rs-table-text">rs-table-delete</td>
      <td class="rs-table-delete"><button type="button" class="rs-delete"></button></td>
    </tr>
  </tbody>
</table>

Table Column Sorting

  • Use the classes and markup in this example with a sorting script of your choice.
  • At this time Canon does not provide javascript for handling sorting.

Example

Normal Hover Ascending Ascending Hover Descending Descending Hover
Body Body Body Body Body Body

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort">
          <span class="rs-table-sort-text">Normal</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th class="rs-table-select">
        <a href="javascript:void(0);" class="rs-table-sort hover">
          <span class="rs-table-sort-text">Hover</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-asc">
          <span class="rs-table-sort-text">Ascending</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-asc hover">
          <span class="rs-table-sort-text">Ascending Hover</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-desc">
          <span class="rs-table-sort-text">Descending</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
      <th>
        <a href="javascript:void(0);" class="rs-table-sort rs-table-sort-desc hover">
          <span class="rs-table-sort-text">Descending Hover</span>
          <span class="rs-table-sort-indicator"></span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rs-table-text">Body</td>
      <td class="rs-table-text">Body</td>
      <td class="rs-table-text">Body</td>
      <td class="rs-table-text">Body</td>
      <td class="rs-table-text">Body</td>
      <td class="rs-table-text">Body</td>
    </tr>
  </tbody>
</table>

ui components
Facets

How it works

Facets can be used to apply filters to a Table. This is not a standalone component - it should be used as part of the List View Pattern.

Rules for Use

  • The top header should reflect the name of the product - EX: "Filter Servers"
    If the product name is long and gets truncated, use "Filter List" instead.
  • Organize sections based on usefulness - For example: we place priority on tags
  • Sections must contain at least two items to appear in the facet sidebar
  • Facets can contain icons related to items in the table - see the Status example
  • Only one facet section should have icons per page to reduce cognitive load
  • Facet counts are optional and although useful, they can result in extra processing to calculate - beware of performance issues

Toggling Facet Sections

  • Limit facet sections to 5 visible facet items
  • Add the "more" / "less" link when a section has 6 or more facet items
  • Use "expanded" and "collapsed" classes on the rs-facet-section element to easily track toggled states

About Filtering

Table filtering should usually reduce result sets rather than increase them. A good analogy is that of choosing to query a system using "OR" versus "AND" operators.

How you choose to filter will depend on the nature of your data, and what your users are trying to achieve by filtering.

When filtering using "OR" logic, do not hide excluded facets - just add the "disabled" class to show that they are not within the result set.

Adherence Rating: 3

Example

clear all
Filter {Product}s
clear
Tags
  • Development
    (3)
  • Staging
    (1)
  • Production
    (1)
  • Billing
    (3)
  • Marketing
    (2)
  • Product
    (5)
  • Engineering
    (8)
  • Sales
    (2)
  • Finance
    (1)
  • more
clear
Status
  • Error
    (2)
  • Rebooting
    (3)
  • Active
    (5)
clear
Image
  • Ubuntu 10.04 LTS
    (3)
  • RHEL 6.5
    (1)
  • Debian 7 Wheezy
    (2)
  • Vyatta Network OS 6.5R2
    (4)
clear
Flavor
  • 2 GB Standard Instance
    (10)
  • 512 MB Standard Instance
    (10)

Markup

<div class="rs-sidebar rs-facets">
  <div class="rs-inner" id="facets-example">
  <div class="rs-facet-header">
    <div class="rs-facet-clear-link rs-hidden">clear all</div>
    <div class="rs-facet-title">Filter {Product}s</div>
  </div>
  <div class="rs-facet-section rs-facet-section-small">
    <div class="rs-facet-section-header">
      <div class="rs-facet-clear-link rs-hidden">clear</div>
      <div class="rs-facet-section-title">Tags</div>
    </div>
    <div class="rs-facet-section-body">
      <ul class="rs-facet-list">
        <li class="rs-facet-item">
          <div class="rs-facet-label">Development</div>
          <div class="rs-facet-count">(3)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Staging</div>
          <div class="rs-facet-count">(1)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Production</div>
          <div class="rs-facet-count">(1)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Billing</div>
          <div class="rs-facet-count">(3)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Marketing</div>
          <div class="rs-facet-count">(2)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Product</div>
          <div class="rs-facet-count">(5)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Engineering</div>
          <div class="rs-facet-count">(8)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Sales</div>
          <div class="rs-facet-count">(2)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Finance</div>
          <div class="rs-facet-count">(1)</div>
        </li>
        <li class="rs-facet-section-toggle">
          <i class="rs-facet-toggle-arrow"></i>more
        </li>
      </ul>
    </div>
  </div>
  <div class="rs-facet-section">
    <div class="rs-facet-section-header">
      <div class="rs-facet-clear-link rs-hidden">clear</div>
      <div class="rs-facet-section-title">Status</div>
    </div>
    <div class="rs-facet-section-body">
      <ul class="rs-facet-list">
        <li class="rs-facet-item">
          <i class="rs-status-error"></i>
          <div class="rs-facet-label">Error</div>
          <div class="rs-facet-count">(2)</div>
        </li>
        <li class="rs-facet-item">
          <i class="rs-status-warning"></i>
          <div class="rs-facet-label">Rebooting</div>
          <div class="rs-facet-count">(3)</div>
        </li>
        <li class="rs-facet-item">
          <i class="rs-status-ok"></i>
          <div class="rs-facet-label">Active</div>
          <div class="rs-facet-count">(5)</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="rs-facet-section">
    <div class="rs-facet-section-header">
      <div class="rs-facet-clear-link rs-hidden">clear</div>
      <div class="rs-facet-section-title">Image</div>
    </div>
    <div class="rs-facet-section-body">
      <ul class="rs-facet-list">
        <li class="rs-facet-item">
          <div class="rs-facet-label">Ubuntu 10.04 LTS</div>
          <div class="rs-facet-count">(3)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">RHEL 6.5</div>
          <div class="rs-facet-count">(1)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Debian 7 Wheezy</div>
          <div class="rs-facet-count">(2)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">Vyatta Network OS 6.5R2</div>
          <div class="rs-facet-count">(4)</div>
        </li>
      </ul>
    </div>
  </div>
  <div class="rs-facet-section">
    <div class="rs-facet-section-header">
      <div class="rs-facet-clear-link rs-hidden">clear</div>
      <div class="rs-facet-section-title">Flavor</div>
    </div>
    <div class="rs-facet-section-body">
      <ul class="rs-facet-list">
        <li class="rs-facet-item">
          <div class="rs-facet-label">2 GB Standard Instance</div>
          <div class="rs-facet-count">(10)</div>
        </li>
        <li class="rs-facet-item">
          <div class="rs-facet-label">512 MB Standard Instance</div>
          <div class="rs-facet-count">(10)</div>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
ui components
Details

When to use

Use this to display details about a single item or product. Combine this component with the action button, action dropdown, status indicator, embedded tables, and popovers. For more information on how to combine components, use the Detail View Pattern.

The content of a details component is broken into 2 main parts: The details header summarizes the item you are viewing. The details sections are sub-sections that display status, technical specifications, settings, or tables of data about the product. These are often combined with editable actions that spawn popovers.

Details Header
  • Grey text shows the category of the product.
  • Primary text shows the name of the product.
  • Include tags (if applicable).
Details Sections
  • The section header should identify the type of content within the sub-section.
  • This pattern is built to be used with content like key / value lists, embedded tables, etc.
  • The entity's status should always be the first item in the key / value list.
  • When key / value items are editable, use edit buttons to open a popover, modal or new page to update.

Adherence Rating: 1

Example

Product Category
Item Name
Item Details
  • Key
    Value
  • Key
    Value
  • Key
    Many
    Different
    Values
Item Sub-Section
  • Longer Key
    Longer Value
  • Even Longer Key
    Long Explanation Value

Markup

<div class="rs-content rs-panel">
  <div class="rs-detail-header">
    <div class="rs-detail-header-actions">
      <button class="rs-btn rs-btn-action">
        <span class="rs-cog"></span>
        Actions
        <span class="rs-caret"></span>
      </button>
    </div>
    <div class="rs-detail-header-subtitle">Product Category</div>
    <div class="rs-detail-header-title">Item Name</div>
  </div>
  <div class="rs-detail-section">
    <div class="rs-detail-section-header">
      <div class="rs-detail-section-title">Item Details</div>
    </div>
    <div class="rs-detail-section-body">
      <ul class="rs-detail-list">
        <li class="rs-detail-item">
          <div class="rs-detail-key">Key</div>
          <div class="rs-detail-value">Value</div>
        </li>
        <li class="rs-detail-item">
          <div class="rs-detail-key">Key</div>
          <div class="rs-detail-value">
            Many<br>
            Different<br>
            Values
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="rs-detail-section">
    <div class="rs-detail-section-header">
      <div class="rs-detail-section-title">Item Sub-Section</div>
    </div>
    <div class="rs-detail-section-body">
      <ul class="rs-detail-list">
        <li class="rs-detail-item">
          <div class="rs-detail-key">Key</div>
          <div class="rs-detail-value">Value</div>
        </li>
        <li class="rs-detail-item">
          <div class="rs-detail-key">Key</div>
          <div class="rs-detail-value">
            Many<br>
            Different<br>
            Values
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="rs-collapsible-section rs-detail-section collapsed">
    <div class="rs-detail-section-header">
      <div class="rs-caret"></div>
      <div class="rs-detail-section-title">Collapsible Section</div>
      <div class="rs-detail-section-subtitle">2 Options Configured</div>
    </div>
    <div class="rs-detail-section-body">
      <ul class="rs-detail-list">
        <li class="rs-detail-item">
          <div class="rs-detail-key">Key</div>
          <div class="rs-detail-value">Value</div>
        </li>
        <li class="rs-detail-item">
          <div class="rs-detail-key">Key</div>
          <div class="rs-detail-value">
            Many<br>
            Different<br>
            Values
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
ui components
Forms

How it works

Forms consist of two or more elements in key/value (or label/input) format.

  • Each key should be specific, short and easy to read.
  • When creating, name fields come first.
  • Specify the input size to match the width of the data: xsmall, small, medium, large, xlarge, xxlarge.
  • Specify form sizes to match the width of the longest label: xsmall, small, medium, large, xlarge, xxlarge. (Applies to all but Create Form)

Adherence Rating: 2

Example

Everything works!
You should at least select one item.
GB This is some subtext.
Validation error message

Markup

<form class="rs-form-horizontal rs-form-small">
  <div class="rs-control-group">
    <label class="rs-control-label">Key One</label>
   <div class="rs-controls">
      <input type="text">
    </div>
  </div>
  <div class="rs-control-group success">
    <label class="rs-control-label">Key Two</label>
    <div class="rs-controls">
      <select>
        <option>Option One</option>
        <option>Option Two</option>
      </select>
      <span class="rs-validation-inline"><i class="rs-validation-indicator"></i>Everything works!</span>
    </div>
  </div>
  <div class="rs-control-group error">
    <label class="rs-control-label">Key Three</label>
    <div class="rs-controls">
      <label class="rs-radio">
        <input type="radio" name="three">
        <strong>Option A</strong><br>
        <span class="rs-help-block">A Sub</span>
      </label>
      <label class="rs-radio">
        <input type="radio" name="three">
        <strong>Option B</strong>
        <span class="rs-help-block">B-Sub</span>
      </label>
      <span class="rs-validation-block"><i class="rs-validation-indicator"></i>You should at least select one item.</span>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Key Four</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini"> GB
      <span class="rs-help-block">This is some subtext.</span>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Key Five</label>
    <div class="rs-controls">
      <input type="text">
      <select>
        <option>One</option>
        <option>One</option>
      </select>
    </div>
  </div>
  <div class="rs-control-group error">
    <label class="rs-control-label">Key Six</label>
    <div class="rs-controls">
      <textarea class="rs-input-xlarge"></textarea>
      <span class="rs-validation-block"><i class="rs-validation-indicator"></i> Validation error message</span>
    </div>
  </div>
</form>

Create Form

Use create forms for wide pages.

  • The key / label is right-aligned to the form elements, placing the labels and fields close together for easy scanning.
  • Only use this format on create pages, and not in popovers.

Example

GB
Not Configured Create Profile…

Markup

<form class="rs-form-create">
  <div class="rs-control-group">
    <label class="rs-control-label">Instance Name</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-large">
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">RAM</label>
    <div class="rs-controls">
      <select>
        <option>512 MB</option>
        <option>1 GB</option>
        <option>2 GB</option>
        <option>4 GB</option>
        <option>8 GB</option>
        <option>16 GB</option>
      </select>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Disk</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" placeholder="1"> GB
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Disk Partition</label>
    <div class="rs-controls">
      <label class="rs-radio">
        <input type="radio" name="three">
        <strong>Manual</strong><br>
        <span class="rs-help-block">Faster build times but requires manual partitioning</span>
      </label>
      <label class="rs-radio">
        <input type="radio" name="three">
        <strong>Automatic</strong>
        <span class="rs-help-block">Entire disk is single partition and automatically resizes</span>
      </label>
    </div>
  </div>
  <div class="rs-detail-item">
    <label class="rs-detail-key">User Profile</label>
    <div class="rs-detail-value">
      <span class="rs-quiet">Not Configured</span>
      <span class="rs-key-divider"></span>
      <a href="#">Create Profile…</a>
    </div>
  </div>
</form>

Simple Horizontal Form

Horizontal forms are the most frequently used type of form - the majority for adding and editing settings within popovers.

  • Key / label is left-aligned to the form elements, aligning the text evenly along the left margin of the popover.
  • Specify the form size to match the width of the longest label: xsmall, small, medium, large, xlarge, xxlarge.
  • Only use this format within a popover, not on full-size create pages.

Example

Use the "https://" prefix to enable SSL

Markup

<form class="rs-form-horizontal rs-form-medium">
  <div class="rs-control-group">
    <label class="rs-control-label">Check Type</label>
      <div class="rs-controls">
        <select>
          <option>HTTP Check (Website)</option>
          <option>TCP Check (Port)</option>
          <option>Ping Check (Server)</option>
        </select>
      </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Check Name</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-medium">
    </div>
  </div>
  <div class="rs-control-group success">
    <label class="rs-control-label">URL</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-xlarge">
      <span class="rs-help-block">Use the "https://" prefix to enable SSL</span>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Send Alarms to</label>
    <div class="rs-controls">
      <select>
        <option>Technical Contacts - Email</option>
     </select>
    </div>
  </div>
</form>

Simple Vertical Form

Used for single field forms.

  • Key / label appears above the form.
  • These are only used within a popover.

Example

Markup

<form class="form-vertical">
  <div class="rs-control-group">
    <label class="rs-control-label">Load Balancer Name</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-large">
    </div>
  </div>
</form>

Radio Group Form

Use radio groups when the user needs to make a selection from a small set of options.

Optionally, you can explain the differences between the choices with a string of text.

Example

Markup

<form class="rs-form-horizontal rs-form-small">
  <div class="rs-control-group">
    <label class="rs-control-label">Server Name</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-large">
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Server Type</label>
    <div class="rs-controls">
      <label class="rs-radio">
        <input type="radio" name="three">
        <strong>First-Generation Server</strong><br>
        <span class="rs-help-block">Optional description text that explains the choice</span>
      </label>
      <label class="rs-radio">
        <input type="radio" name="three">
        <strong>Next-Generation Server</strong>
        <span class="rs-help-block">Optional description text that explains the choice</span>
      </label>
    </div>
  </div>
</form>

Form with Textarea

Use textareas within a form to accept a large amount of text, or allow the user to input multiple items, like a list of IP addresses.

Textarea sizes are the same as inputs: mini, small, medium, large, xlarge, xxlarge

Example

Markup

<form class="rs-form-horizontal rs-form-medium">
  <div class="rs-control-group">
    <label class="rs-control-label">Rule Type</label>
    <div class="rs-controls">
      <select>
        <option>Allow</option>
        <option>Deny</option>
      </select>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">IP Addresses</label>
    <div class="rs-controls">
      <textarea class="rs-input-xlarge" placeholder="Separate multiple IPs with commas or use CIDR notation"></textarea>
    </div>
  </div>
</form>

Form with Inline Text

Use inline text when labels can't sufficiently explain the information but is too pertinent for a tooltip.

  • Use .rs-help-inline to add units to the right of the input.
  • Use .rs-help-block to add additional help info under the field. This should be used sparingly.

Example

seconds 30-second minimum period.
seconds Alarms attached to this check will report critical if the check doesn't respond within the timeout.

Markup

<form class="rs-form-horizontal rs-form-medium">
  <div class="rs-control-group">
    <label class="rs-control-label">Check Every</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" value="30">
      <span class="rs-help-inline">seconds</span>
      <span class="rs-help-block">30-second minimum period.</span>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Timeout After</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" value="30">
      <span class="rs-help-inline">seconds</span>
      <span class="rs-help-block">Alarms attached to this check will report critical if the check doesn't respond within the timeout.</span>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Regions</label>
    <div class="rs-controls">
      <label class="rs-checkbox">
        <input type="checkbox">
        Dallas (DFW)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Hong Kong (HKG)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Washington Dulles (IAD)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        London (LON)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Chicago (ORD)
    </label>
    </div>
  </div>
</form>

Inline Validation Triggered

Inline validation triggers when a user enters invalid data in a required fields. When the user enters valid information, the error is replaced with a check mark and a success message (see next example).

  • Add .error class to the .rs-control-group.
  • Error appears only after the input has been focused for the first time.
  • Show error about the specific validation rule triggered.
  • Multiple error messages can be shown at once.

Example

seconds 30-second minimum period.
seconds Alarms attached to this check will report critical if the check doesn't respond within the timeout. Timeout must be less than check frequency.
At least one region is required.

Markup

<form class="rs-form-horizontal rs-form-medium">
  <div class="rs-control-group">
    <label class="rs-control-label">Check Every</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" value="30">
      <span class="rs-help-inline">seconds</span>
      <span class="rs-help-block">30-second minimum period.</span>
    </div>
  </div>
  <div class="rs-control-group error">
    <label class="rs-control-label">Timeout After</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" value="45">
      <span class="rs-help-inline">seconds</span>
      <span class="rs-help-block">Alarms attached to this check will report critical if the check doesn't respond within the timeout.</span>
      <span class="rs-validation-block"><i class="rs-validation-indicator"></i>Timeout must be less than check frequency.</span>
    </div>
  </div>
  <div class="rs-control-group error">
    <label class="rs-control-label">Regions</label>
    <div class="rs-controls">
      <label class="rs-checkbox">
        <input type="checkbox">
        Dallas (DFW)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Hong Kong (HKG)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Washington Dulles (IAD)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        London (LON)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Chicago (ORD)
    </label>
    <span class="rs-validation-block"><i class="rs-validation-indicator"></i>At least one region is required.</span>
    </div>
  </div>
</form>

Inline Validation Fixed

After users fix their data, the error is replaced with a check mark and a success message that appears for a few seconds and then disappears.

  • Add .success class to the .rs-control-group.
  • Show message about the specific validation rule fixed.
  • Multiple success messages can be shown at once.

Example

seconds 30-second minimum period.
seconds Alarms attached to this check will report critical if the check doesn't respond within the timeout. Timeout is less than check duration

Markup

<form class="rs-form-horizontal rs-form-medium">
  <div class="rs-control-group">
    <label class="rs-control-label">Check Every</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" value="30">
      <span class="rs-help-inline">seconds</span>
      <span class="rs-help-block">30-second minimum period.</span>
    </div>
  </div>
  <div class="rs-control-group success">
    <label class="rs-control-label">Timeout After</label>
    <div class="rs-controls">
      <input type="text" class="rs-input-mini" value="29">
      <span class="rs-help-inline">seconds</span>
      <span class="rs-help-block">Alarms attached to this check will report critical if the check doesn't respond within the timeout.</span>
      <span class="rs-validation-inline"><i class="rs-validation-indicator"></i>Timeout is less than check duration</span>
    </div>
  </div>
  <div class="rs-control-group">
    <label class="rs-control-label">Regions</label>
    <div class="rs-controls">
      <label class="rs-checkbox">
        <input type="checkbox" checked>
        Dallas (DFW)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox" checked>
        Hong Kong (HKG)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Washington Dulles (IAD)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        London (LON)
    </label>
    <label class="rs-checkbox">
        <input type="checkbox">
        Chicago (ORD)
    </label>
    </div>
  </div>
</form>
ui components
Tabs

When to use

Tabs are used to navigate lists of related content. In forms, they are used to categorize and organize similar content. The count for each list is not required, but feel free to use where appropriate.

  • Use when the content for each tab has similar structure (e.g., list tables).
  • Use when there is not enough space on the page to show all content.
  • Use when the content of each tab can be viewed separately from each other, and doesn't require comparison.
  • Do not use when the content inside each pane would function just as well in its own separate page.
  • Limit to 5-8 sections, depending on the length of each section name.

Adherence Rating: 2

Example

Tab content pane one

Name Updated ID
Table Item 1 Aug 28, 2013 123456
Table Item 2 Aug 25, 2013 789012
Table Item 3 Jul 14, 2013 345678

Tab content pane three


Markup

<ul class="rs-tabs">
  <li><a href="#one">Normal <span class="rs-quiet">(1)</span></a></li>
  <li class="active"><a href="#two">Active <span class="rs-quiet">(2)</span></a></li>
  <li class="hover"><a href="#three">Hover <span class="rs-quiet">(3)</span></a></li>
</ul>
<div class="rs-tab-content">
  <div class="rs-tab-pane">
    <p>Tab content pane one</p>
  </div>
  <div class="rs-tab-pane active">
    <p>Tab content pane two</p>
  </div>
  <div class="rs-tab-pane">
    <p>Tab content pane three</p>
  </div>
</div>
ui components
Status Indicators

How it works

Use status indicators for any entity with states that may impact the customer's experience.

  • Indicators use a solid color to represent status, such as "error, warning, active, or disabled".
  • Use .rs-status for the pill-style component. It is most often the first item on an entity's details page.
  • The colored text style (without .rs-status) is often used in a table to explain a process.
  • Improve the API status formatting as necessary (e.g., change API strings from ALL CAPS to Title Case).
  • Status specifications for Cloud Products can be found below. Use these as an example for mapping other Rackspace API statuses to the UI.

Adherence Rating: 1

Examples

Status When to Use Examples
Error Product is not working as intended Server that failed to build
Building Product is running a user-initiated process that causes it to intermittently work. It is temporarily in this state and will return to normal afterwards. Server that is builing or resizing
Warning Product is intermittently working or is trending towards unhealthy Monitoring check in warning
Active Product is working correctly Active load balancer
Disabled Product has been intentionally stopped by the user Disabled monitoring check

Markup

<span class="rs-status rs-status-error">Error</span>
<span class="rs-status rs-status-processing">Building</span>
<span class="rs-status rs-status-warning">Warning</span>
<span class="rs-status rs-status-ok">Active</span>
<span class="rs-status rs-status-disabled">Disabled</span>

Colored Status Text

The colored text is designed to be used in place of the API status indicators. It usually represents a process or condition of an entity, rather than the status of the object itself.

Primary use is in list tables to denote a process when there is no API status (e.g., Deployments).

Example

Deployments
Name Type Condition
Wordpress Deployment WordPress 3.4.1 Deployed on Aug 26, 2013 - 1:43 PM UTC
Drupal Deployment Drupal 2.3 Deployment in Progress (22%)
IPython-1 IPython Notebook 1 Deployment in Progress (78%)
Wordpress Deployment 2 WordPress 3.4.1 Error - Max Retries Exceeded

Markup

<span class="rs-status-ok">A success message about a completed process</span>
<span class="rs-status-processing">The progress of a specific process</span>
<span class="rs-status-warning">A warning message about an intermittently working process</span>
<span class="rs-status-error">An error message about a failed process</span>
<span class="rs-status-disabled">A message about a disabled process</span>

Monitoring Status List

Use to display monitoring check status in a Table row.

  • Use Tooltips to display check details.
  • Use the Plus Button to let users add checks if none exist on a monitoring-enabled device.
  • The Plus Button should spawn a Popover for creating a check on the device.
  • See the Cloud Servers list for an example.

Example

Example Device Name Monitoring
my.server.123.ord.com
no.checks.server.456.dfw.com

Markup

<table class="rs-list-table">
  <thead>
    <tr>
      <th>Example Device Name</th>
      <th>Monitoring</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>my.server.123.ord.com</td>
      <td class="rs-table-status-list">
        <ul class="rs-status-list">
          <li class="rs-status-list-item">
            <div class="rs-icon-status rs-status-ok"></div>
          </li>
          <li class="rs-status-list-item">
            <div class="rs-icon-status rs-status-warning"></div>
          </li>
          <li class="rs-status-list-item">
            <div class="rs-icon-status rs-status-error"></div>
          </li>
          <li class="rs-status-list-item">
            <div class="rs-icon-status rs-status-disabled"></div>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
ui components
Progress Bars

Progress bars visually communicate activity, status and percentage.

When to use

  • Basic Progress Bars can be used when a metric can be expressed in terms of amount consumed versus total amount
  • Multi-Step Progress Bars are good for representing a user's position in a multi-step process as well as the activity and status of each step.

How it works

  • Use status colors to reflect the parent entity's status. This can change throughout the process.
    • Green (OK) state is for processes with no impact on the uptime of a product, like uploading a file.
    • Yellow (Processing) state shows a user initiated processes, like rebuilding or resizing, that may cause a product to intermittently work.
    • Red (Error) state is used to represent a failed process, or to indicate that a device is currently offline.
    • Blue (Neutral Info) is for displaying metrics with a neutral status, like showing percent of total.
  • Use animating stripes when you need more indication that work is happening in the background.

Adherence Rating: 1

Examples: Basic Progress Bar

Progress Bar Markup 

<!-- Default Ok Bar -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 50%">
      <div class="rs-bar rs-status-ok"></div>
    </div>
  </div>
</div>

<!-- Striped Ok Bar -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 60%">
      <div class="rs-bar rs-status-ok rs-bar-striped"></div>
    </div>
  </div>
</div>


<!-- Default Warning Bar -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 50%">
      <div class="rs-bar rs-status-warning"></div>
    </div>
  </div>
</div>

<!-- Striped Warning Bar -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 60%">
      <div class="rs-bar rs-status-warning rs-bar-striped"></div>
    </div>
  </div>
</div>


<!-- Default Error Style -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 50%">
      <div class="rs-bar rs-status-error"></div>
    </div>
  </div>
</div>

<!-- Striped Error Style -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 60%">
      <div class="rs-bar rs-status-error rs-bar-striped"></div>
    </div>
  </div>
</div>


<!-- Default Info Bar -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 60%">
      <div class="rs-bar rs-status-info"></div>
    </div>
  </div>
</div>

<!-- Striped Info Bar -->
<div class="rs-progress">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 60%">
      <div class="rs-bar rs-status-info rs-bar-striped"></div>
    </div>
  </div>
</div>

Fixed Width + Label

Most often used in Detail Views when a metric needs to be a fixed size.

The label is optional but very useful.

Available in five sizes:

  • rs-progress-xsmall
  • rs-progress-small
  • rs-progress-medium
  • rs-progress-large
  • rs-progress-xlarge

Example

407.2 MB of 2 GB

Markup

<div class="rs-progress rs-progress-medium">
  <div class="rs-progress-inner">
    <div class="rs-segment" style="width: 25%">
      <div class="rs-bar rs-status-info"></div>
    </div>
  </div>
</div>
<span class="rs-progress-label">407.2 MB of 2 GB</span>

Multi-Step Progress Bars

Use when the action being taken has several distinct steps, and because of variable lengths of time, you cannot show accurate percentages.

  • The lengths are manually adjustable and should be based on proportionate time of each step.
  • Labels should display a user-friendly, one or two word description.
  • Use animating stripes to indicate the step currently in progress.
  • Use status colors to reflect connectivity throughout the process. For example, if step 4 is not required for the product to be back online, change the colors to green (OK) to reflect the API status of the entity.

Example

Server Details
  • Status
    Prepping Resize
    1. Queue
    2. Prep
    3. Build
    4. Verify
  • Public IP
    166.78.34.156
    2001:4800:7901:0000:c817:46d7:0000:0006

Markup

<div class="rs-progress-label">Prepping Resize</div>
<div class="rs-progress">
    <div class="rs-progress-inner">
      <div class="rs-segment" style="width: 20%">
        <div class="rs-bar rs-status-warning"></div>
        <div class="rs-caption">1. Step One</div>
      </div>
      <div class="rs-segment" style="width: 40%">
        <div class="rs-bar rs-status-warning rs-bar-striped"></div>
        <div class="rs-caption">2. Step Two</div>
      </div>
      <div class="rs-segment" style="width: 25%">
        <div class="rs-bar"></div>
        <div class="rs-caption">3. Step Three</div>
      </div>
      <div class="rs-segment" style="width: 15%">
        <div class="rs-bar"></div>
        <div class="rs-caption">4. Step Four</div>
      </div>
    </div>
  </div>

ui components
Tooltips

How it works

Use the tooltip when you want to convey brief snippets of information, to explain an element a bit more, or to display truncated text.

  • Activates when hovered on with mouse.
  • The tooltip disappears when mouse hovers away, or when clicked in the icon. Tooltip does not reactivate on click.
  • Tooltip should only be used on icon images, text, and table rows; use when see fit.
  • Max width for the tooltip is 500px.

Adherence Rating: 1

Example

You can also use tooltip markup without Javascript.

Markup

<p>
    <i id="tooltip-demo" class="rs-icon-help" title="This is a <strong>tooltip</strong>."></i>
</p>

<div class="rs-tooltip visible" style="top: auto; left: auto">
  <div class="rs-tooltip-inner">
    You can also use tooltip markup without Javascript.
  </div>
</div>

<script type="application/javascript">

$(document).ready(function () {

    var tooltip;

    tooltip = new canon.Tooltip();
    tooltip.attach($('#tooltip-demo'));
});

</script>