Rackspace® Canon - The front-end application framework

ux patterns

Summary

UX Patterns consist of UI Components that have been arranged and combined into templatized views. Our patterns and widgets have been tested and tweaked for optimal usability and to meet user needs. These patterns accelerate design and development processes by providing a framework for most interactions in an application.

How do I use UX patterns?

Different roles benefit in different ways:

UX Designers use patterns to ensure consistency and accelerate decision making when designing application workflows.
Interaction Designers can grab markup from patterns to facilitate rapid prototyping.
Front-End Developers can reference components that make up each pattern and know exactly what is needed to build views.
Back-End Developers can reference UX patterns to help inform the construction of back-end logic based on standard workflows.

ux patterns

Navigation Model

The hub and spoke nav model here describes a flat, simple application architecture. Our model uses three main page types:

List View
Detail View
Create View

Actions are kept in context on these pages by way of the popover component. Building your application to follow this model will help users keep a consistent mental picture of the application structure and ensure they accomplish their goals quickly and intuitively.

How it works

Each large "hub" is related to a UX Pattern (details below on this page)
Each "spoke" coming off a hub represents a UI Component within the pattern
Use List Views as navigational hubs and for managing and assessing many items
Use the Detail View to present item details and show child items with their own set of actions and details
Use the Create View when items have complex configuration settings or need a help section to guide users through the creation process

Adherence Rating: 2

ux patterns

List View

Though extremely useful as a navigational hub, the real power of list views is that you can use them to do these three things:

Quickly find items
- Facet
- Search
- Sort
Easily assess item health
- Item Status
- Monitor Health
Perform actions without drilling down
- Item Actions
- Batch Actions

Complex Components:

Simple Components:

Adherence Rating: 3

{Product}s

Create {Product}

	Item Name	IP Address	Monitoring
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 1	111.222.111	HTTP Check (Website) OK Since: Nov 2, 2013 10:52:55 PM UTC HTTP connection time is normal
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 2	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 3	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 4	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 5	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 6	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 7	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 8	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 9	222.111.222
Identify Rename Item… Manage Resize Item… Add Check… Delete Item…	My Product Item 10	222.111.222

Markup

<div class="rs-content rs-panel">
  <div class="rs-inner">
    <h2 class="rs-page-title">{Product Name}</h2>
    <div class="rs-btn-group">
      <a href="#create-view" class="rs-btn rs-btn-primary">Create {Product}</a>
      <button class="rs-btn modify-selected" disabled="disabled">Delete</button>
      <input type="text" class="rs-input-large rs-pull-right" placeholder="Search 1 {Product}s">
    </div>  
    <table class="rs-list-table rs-select-table">
      <thead>
        <tr>
          <th class="rs-table-status"></th>
          <th class="rs-table-checkbox">
            <input type="checkbox">
          </th>
          <th class="rs-table-cog"></th>
          <th>
            <a href="#" class="rs-table-sort rs-table-sort-desc">
              <span class="rs-table-sort-text">Item Name</span>
              <span class="rs-table-sort-indicator"></span>
            </a>
          </th>
          <th>
            <a href="#" class="rs-table-sort">
              <span class="rs-table-sort-text">IP Address</span>
              <span class="rs-table-sort-indicator"></span>
            </a>
          </th>
          <th>
            <a href="#" class="rs-table-sort">
              <span class="rs-table-sort-text">Monitoring</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">Identify</span></li>
                <li><a href="#" class="rs-dropdown-link">Rename Item&hellip;</a></li>
                <li><span class="rs-dropdown-category">Manage</span></li>
                <li><a href="#" class="rs-dropdown-link">Resize Item&hellip;</a></li>
                <li><a href="#" class="rs-dropdown-link">Add Check&hellip;</a></li>
                <li><span class="rs-dropdown-category"></span></li>
                <li><a href="#" class="rs-dropdown-link">Delete Item&hellip;</a></li>
              </ul>
            </div>
          </td>
          <td class="rs-table-link"><a href="#detail-view">My Product Item 1</a></td>
          <td class="rs-table-text">111.222.111</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>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
  </div> 
</div>

ux patterns

Create View

Use this pattern to create a single item or product. The content of the Create View can be broken into 3 main parts:

The Create Form allows you to break workflows into sections:
The Right Sidebar contains help text and links about best practices and next steps for further use or configuration.
The Back link points to the list view you came from.

Complex Components:

Simple Components:

Adherence Rating: 3

‹ Back to Items List

Create {Product Name}

{Product Name} Details

Item Name

Region

Virtual IP

Protocol / Port

Selection Table

Rackspace (9)
Saved (3)

		Name
		Arch 2013.9
		CentOS 6.4
		Debian 6.06 (Squeeze)
		Fedora 18 (Spherical Cow)
		FreeBSD 9.1
		Gentoo 13.3
		OpenSUSE 12.3
		Red Hat Enterprise Linux 5.9
		Scientific Linux 6.4
		Ubuntu 10.04 LTS (Lucid Lynx)
		Vyatta Network OS 6.5R2
		Windows Server 2008 R2 SP1

		Name
		Ubuntu 10.04 LTS (Lucid Lynx)
		Vyatta Network OS 6.5R2
		Windows Server 2008 R2 SP1

Add Items

Name	IPv4	IPv6
Item One	101.122.11.222	None
Item Two	10.111.22.112	None
Item Two	10.111.22.112	None

Optional Settings

This section is optional, so it's collapsed.

Your Age

Favorite Color

Cancel

Markup

<div class="rs-back-link"><a href="#" id="create-example-back-link">&lsaquo; Back to Items List</a></div>
    <div class="rs-main rs-panel">
      <div class="rs-sidebar rs-pull-right">
        <div class="rs-inner">
          <h3>Setting Up This Item</h3>
          <h4>Next steps help text</h4>
          <p>Short blurb about best practices next steps with this item. Try to keep this to 3 lines maximum.</p>
          <p><a target="blank" href="#">More Details About Blurb &raquo;</a></p>
          <hr>
          <h4>Help Me With...</h4>
          <ul>
            <li><a target="blank" href="#">Best Practice Number One</a></li>
            <li><a target="blank" href="#">Best Practice Number Two</a></li>
            <li><a target="blank" href="#">Best Practice Number Three</a></li>
          </ul>
          <p><a target="blank" href="#">Learn More about This Product &raquo;</a></p>
          <hr>
          <h4>What's Next</h4>
          <ul>
            <li><a target="blank" href="#">Top Action Number One</a></li>
            <li><a target="blank" href="#">Top Action Number Two</a></li>
            <li><a target="blank" href="#">Top Action Number Three</a></li>
          </ul>
          <p><a target="blank" href="#">Visit Our Knowledge Center &raquo;</a></p>
        </div>
      </div>
      <div class="rs-content rs-panel">
        <form class="rs-form-create">
          <div class="rs-detail-section">
            <div class="rs-detail-section-header">
              <h2 class="rs-page-title">Create {Product Name}</h3>
              <div class="rs-detail-section-title">{Product Name} Details</div>
            </div>
            <div class="rs-detail-section-body">
              
              <div class="rs-control-group">
                <label class="rs-control-label">Item Name</label>
                <div class="rs-controls">
                  <input type="text" class="rs-input-large" value="item-name-01">
                </div>
              </div>
              <div class="rs-control-group">
                <label class="rs-control-label">Region</label>
                <div class="rs-controls">
                  <select>
                    <option value="IAD">Northern Virginia (IAD)</option>
                    <option value="DFW" selected="selected">Dallas (DFW)</option>
                    <option value="SYD">Sydney (SYD)</option>
                    <option value="HKG">Hong Kong (HKG)</option>
                    <option value="ORD">Chicago (ORD)</option>
                  </select>
                </div>
              </div>
              <div class="rs-control-group">
                <label class="rs-control-label">Virtual IP</label>
                <div class="rs-controls">
                  <select>
                    <option value="PUBLIC">Accessible on the Public Internet</option>
                    <option value="SERVICENET">On the Private Rackspace Network</option>
                  </select>
                </div>
              </div>
              <div class="rs-control-group">
                <label class="rs-control-label">Protocol / Port</label>
                <div class="rs-controls">
                  <select class="rs-input-medium">
                    <option value="DNS_TCP">DNS(TCP)</option>
                    <option value="DNS_UDP">DNS(UDP)</option>
                    <option value="FTP">FTP</option>
                    <option value="HTTP" selected="selected">HTTP</option>
                    <option value="HTTPS">HTTPS</option>
                    <option value="IMAPS">IMAPS</option>
                    <option value="IMAPv2">IMAPv2</option>
                    <option value="IMAPv3">IMAPv3</option>
                    <option value="IMAPv4">IMAPv4</option>
                    <option value="LDAP">LDAP</option>
                    <option value="LDAPS">LDAPS</option>
                    <option value="MYSQL">MySQL</option>
                    <option value="POP3">POP3</option>
                    <option value="POP3S">POP3S</option>
                    <option value="SFTP">SFTP</option>
                    <option value="SMTP">SMTP</option>
                    <option value="TCP">TCP</option>
                    <option value="TCP_CLIENT_FIRST">TCP(Client First)</option>
                    <option value="UDP">UDP</option>
                    <option value="UDP_STREAM">UDP(Stream)</option>
                  </select>
                  &nbsp;/&nbsp;
                  <input type="text" value="80" class="rs-input-mini">
                </div>
              </div>
            
            </div>
          </div>
          <div class="rs-detail-section">
            <div class="rs-detail-section-header">
              <div class="rs-detail-section-title">Select Option</div>
            </div>
            <div class="rs-detail-section-body">
              <ul class="rs-tabs">
                <li class="active"><a href="#rackspace-images">Rackspace <span class="rs-quiet">(9)</span></a></li>
                <li><a href="#saved-images">Saved <span class="rs-quiet">(3)</span></a></li>
              </ul>
              <div class="rs-tab-content">
                <div class="rs-tab-pane active" id="rackspace-images"><div class="rs-embedded-list-table-wrapper rs-embedded-small">
  <table class="rs-list-table rs-embedded-list-table rs-select-table">
    <thead>
      <tr>
        <th class="rs-table-radio"></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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/archlinux-20x20.png">
        </td>
        <td class="rs-table-text">Arch 2013.9</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/centos-20x20.png">
        </td>
        <td class="rs-table-text">CentOS 6.4</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/debian-20x20.png">
        </td>
        <td class="rs-table-text">Debian 6.06 (Squeeze)</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/fedora-20x20.png">
        </td>
        <td class="rs-table-text">Fedora 18 (Spherical Cow)</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/freebsd-20x20.png">
        </td>
        <td class="rs-table-text">FreeBSD 9.1</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/gentoo-20x20.png">
        </td>
        <td class="rs-table-text">Gentoo 13.3</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/opensuse-20x20.png">
        </td>
        <td class="rs-table-text">OpenSUSE 12.3</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/redhat-20x20.png">
        </td>
        <td class="rs-table-text">Red Hat Enterprise Linux 5.9</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/scientific-linux-20x20.png">
        </td>
        <td class="rs-table-text">Scientific Linux 6.4</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/ubuntu-20x20.png">
        </td>
        <td class="rs-table-text">Ubuntu 10.04 LTS (Lucid Lynx)</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/vyatta-20x20.png">
        </td>
        <td class="rs-table-text">Vyatta Network OS 6.5R2</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/windows-20x20.png">
        </td>
        <td class="rs-table-text">Windows Server 2008 R2 SP1</td>
      </tr>
    </tbody>
  </table>
</div></div>
                <div class="rs-tab-pane" id="saved-images"><div class="rs-embedded-list-table-wrapper rs-embedded-small">
  <table class="rs-list-table rs-embedded-list-table rs-select-table">
    <thead>
      <tr>
        <th class="rs-table-radio"></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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/ubuntu-20x20.png">
        </td>
        <td class="rs-table-text">Ubuntu 10.04 LTS (Lucid Lynx)</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/vyatta-20x20.png">
        </td>
        <td class="rs-table-text">Vyatta Network OS 6.5R2</td>
      </tr>
      <tr>
        <td class="rs-table-radio">
          <input type="radio" name="item-image">
        </td>
        <td>
          <img src="https://0ffddf3700fca63d7eee-f2158e9965ca1e4dc7433839c207ae5c.ssl.cf1.rackcdn.com/site_media/images/distros/windows-20x20.png">
        </td>
        <td class="rs-table-text">Windows Server 2008 R2 SP1</td>
      </tr>
    </tbody>
  </table>
</div></div>
              </div>
            </div>
          </div>
          <div class="rs-collapsible-section rs-detail-section">
            <div class="rs-detail-section-header">
              <div class="rs-caret"></div>
              <div class="rs-detail-section-title">Add Items</div>
            </div>
            <div class="rs-detail-section-body">
              <div class="rs-btn-group">
                <button class="rs-btn rs-popover-source" type="button" data-popover-target="add-items-button" data-popover="add-items-popover" data-popover-position="bottom-right" id="add-items-button">Add Things</button>
              </div>
              <div class="rs-embedded-list-table-wrapper rs-embedded-medium" id="detail-example-embedded-list-table">
                <table class="rs-list-table rs-embedded-list-table">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>IPv4</th>
                      <th>IPv6</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="rs-table-text">Item One</td>
                      <td class="rs-table-text">101.122.11.222</td>
                      <td class="rs-table-text"><span class="rs-quiet">None</span></td>
                    </tr>
                    <tr>
                      <td class="rs-table-text">Item Two</td>
                      <td class="rs-table-text">10.111.22.112</td>
                      <td class="rs-table-text"><span class="rs-quiet">None</span></td>
                    </tr>
                    <tr>
                      <td class="rs-table-text">Item Two</td>
                      <td class="rs-table-text">10.111.22.112</td>
                      <td class="rs-table-text"><span class="rs-quiet">None</span></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </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">Optional Settings</div>
              <div class="rs-detail-section-subtitle">This section is optional, so it&#39;s collapsed.</div>
            </div>
            <div class="rs-detail-section-body">
              <div class="rs-control-group">
                <label class="rs-control-label">Your Age</label>
                <div class="rs-controls">
                  <input type="text" class="rs-input-medium">
                </div>
              </div>
              <div class="rs-control-group">
                <label class="rs-control-label">Favorite Color</label>
                <div class="rs-controls">
                  <select>
                    <option value="Yellow Ochre">Yellow Ochre</option>
                    <option value="Green" selected="Amber">Amber</option>
                    <option value="Sage">Sage</option>
                    <option value="Azule">Azule</option>
                    <option value="Kelly Green">Kelly Green</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="rs-detail-section">
            <div class="rs-detail-section-header rs-btn-group">
              <button class="rs-btn rs-btn-primary" type="button">Create Item</button>
              <a href="javascript:void(0);" class="rs-btn rs-btn-link">Cancel</a>
            </div>
          </div>
        </form>
      </div>
    </div>

ux patterns

Detail View

Use this pattern for details about a single item or product. The content of a detail view can be broken into 3 main parts:

The Details Component summarizes the product or item you are viewing. Combine with the components listed below for navigation, status details, and embedded actions.
The Right Sidebar contains help text and links about managing the product in view.
The Back Link points to the list view you came from.

Complex Components:

Simple Components:

Back Link
Action Button
Status Indicator
Edit Button
Action Cog
Dropdowns:
- Actions Dropdown
- Cog Dropdown
Popovers:

Adherence Rating: 3

‹ Back to Items List

Managing This Product

Top action helpful text

Short blurb about best practices for a top action on this item. Try to keep this to 3 lines maximum.

More Details About Blurb »

Learn More about This Product »

What's Next

Top Action Number One
Top Action Number Two
Top Action Number Three

Visit Our Knowledge Center »

Product Category

Item Name

Item Details

Status

Active
ID

123456
Public IP

166.78.34.156
2001:4800:7901:0000:c817:46d7:0000:0006
RAM

912.23 MB of 2 GB
Disk

100 GB
Region

Dallas (DFW)

Embedded List

	Name	IPv4	IPv6
Edit Item… Delete Item…	Item One	101.122.11.222	None
Edit Item… Delete Item…	Item Two	10.111.22.112	None
Edit Item… Delete Item…	Item Two	10.111.22.112	None

Additional Item Details

Created

Mar 26, 2013 - 5:35 pm UTC
Updated

Aug 22, 2013 - 11:43 pm UTC

Markup

<!-- Back Link -->
    <div class="rs-back-link"><a href="#">&lsaquo; Back to Items List</a></div>
    <!-- Container -->
    <div class="rs-main rs-panel">
      
      <!-- Help Sidebar -->
      <div class="rs-sidebar rs-pull-right">
        <div class="rs-inner">
          <h3>Managing This Product</h3>
          <h4>Top action helpful text</h4>
          <p>Short blurb about best practices for a top action on this item. Try to keep this to 3 lines maximum.</p>
          <p><a target="blank" href="#">More Details About Blurb &raquo;</a></p>
          <hr>
          <h4>Help Me With...</h4>
          <ul>
            <li><a target="blank" href="#">Best Practice Number One</a></li>
            <li><a target="blank" href="#">Best Practice Number Two</a></li>
            <li><a target="blank" href="#">Best Practice Number Three</a></li>
          </ul>
          <p><a target="blank" href="#">Learn More about This Product &raquo;</a></p>
          <hr>
          <h4>What's Next</h4>
          <ul>
            <li><a target="blank" href="#">Top Action Number One</a></li>
            <li><a target="blank" href="#">Top Action Number Two</a></li>
            <li><a target="blank" href="#">Top Action Number Three</a></li>
          </ul>
          <p><a target="blank" href="#">Visit Our Knowledge Center &raquo;</a></p>
        </div>
      </div>
      <!-- End Help Sidebar -->

      <!-- Main Content -->
      <div class="rs-content rs-panel">
        <div class="rs-detail-header">
          <div class="rs-detail-header-actions">
            <div class="rs-dropdown">
              <button class="rs-btn rs-btn-action rs-dropdown-toggle">
                <span class="rs-cog"></span>
                Actions
                <span class="rs-caret"></span>
              </button>
              <ul class="rs-dropdown-menu" style="right:0;">
                <li><span class="rs-dropdown-category">Identify</span></li>
                <li><a href="#">Rename Item&hellip;</a></li>
                <li><a href="#">Tag Item&hellip;</a></li>
                <li><span class="rs-dropdown-category">Manage</span></li>
                <li><a href="#">Connect Via Terminal&hellip;</a></li>
                <li><a href="#">Reboot Item&hellip;</a></li>
                <li><a href="#">Change Password&hellip;</a></li>
                <li><a href="#">Delete Item&hellip;</a></li>
              </ul>
            </div>
          </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">Status</div>
                <div class="rs-detail-value">
                  <div class="rs-status rs-status-ok">Active</div>
                </div>
              </li>
              <li class="rs-detail-item">
                <div class="rs-detail-key">ID</div>
                <div class="rs-detail-value">123456</div>
              </li>
              <li class="rs-detail-item">
                <div class="rs-detail-key">Public IP</div>
                <div class="rs-detail-value">
                  166.78.34.156<br>
                  2001:4800:7901:0000:c817:46d7:0000:0006<br>
                </div>
              </li>
              <li class="rs-detail-item">
                <div class="rs-detail-key">Size</div>
                <div class="rs-detail-value">100 GB <button class="rs-edit"></button></div>
              </li>
              <li class="rs-detail-item">
                <div class="rs-detail-key">Region</div>
                <div class="rs-detail-value">Dallas (DFW)</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="rs-detail-section">
          <div class="rs-detail-section-header">
            <div class="rs-detail-section-title">Embedded List</div>
          </div>
          <div class="rs-detail-section-body">
            <div class="rs-embedded-list-table-wrapper rs-embedded-medium" id="detail-example-embedded-list-table">
              <table class="rs-list-table rs-embedded-list-table">
                <thead>
                  <tr>
                    <th class="rs-table-status"></th>
                    <th class="rs-table-cog"></th>
                    <th>Name</th>
                    <th>IPv4</th>
                    <th>IPv6</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="rs-table-status rs-table-status-ok"></td>
                    <td class="rs-table-cog">
                      <div class="rs-dropdown">
                        <div class="rs-cog rs-dropdown-toggle"></div>
                        <ul class="rs-dropdown-menu">
                          <li><span class="rs-dropdown-category" id="first">Identify</span></li>
                          <li><a href="javascript:void(0);">Edit Item&hellip;</a></li>
                          <li><a href="javascript:void(0);">Delete Item&hellip;</a></li>
                        </ul>
                      </div>
                    </td>
                    <td class="rs-table-text">Item One</td>
                    <td class="rs-table-text">101.122.11.222</td>
                    <td class="rs-table-text"><span class="rs-quiet">None</span></td>
                  </tr>
                  <tr>
                    <td class="rs-table-status rs-table-status-warning"></td>
                    <td class="rs-table-cog">
                      <div class="rs-dropdown">
                        <div class="rs-cog rs-dropdown-toggle"></div>
                        <ul class="rs-dropdown-menu">
                          <li><a href="javascript:void(0);">Edit Item&hellip;</a></li>
                          <li><a href="javascript:void(0);">Delete Item&hellip;</a></li>
                        </ul>
                      </div>
                    </td>
                    <td class="rs-table-text">Item Two</td>
                    <td class="rs-table-text">10.111.22.112</td>
                    <td class="rs-table-text"><span class="rs-quiet">None</span></td>
                  </tr>
                  <tr>
                    <td class="rs-table-status rs-table-status-error"></td>
                    <td class="rs-table-cog">
                      <div class="rs-dropdown">
                        <div class="rs-cog rs-dropdown-toggle"></div>
                        <ul class="rs-dropdown-menu">
                          <li><a href="javascript:void(0);">Edit Item&hellip;</a></li>
                          <li><a href="javascript:void(0);">Delete Item&hellip;</a></li>
                        </ul>
                      </div>
                    </td>
                    <td class="rs-table-text">Item Two</td>
                    <td class="rs-table-text">10.111.22.112</td>
                    <td class="rs-table-text"><span class="rs-quiet">None</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="rs-detail-section">
          <div class="rs-detail-section-header">
            <div class="rs-detail-section-title">Additional 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">Created</div>
                <div class="rs-detail-value">Mar 26, 2013 - 5:35 pm UTC</div>
              </li>
              <li class="rs-detail-item">
                <div class="rs-detail-key">Updated</div>
                <div class="rs-detail-value">Aug 22, 2013 - 11:43 pm UTC</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- End Main Content -->
    </div>
    <!-- End Container -->

	RAM	Disk
	256 MB	10 GB
	512 MB	20 GB
	1 GB	40 GB
	2 GB	80 GB
	4 GB	160 GB
	8 GB	320 GB
	15 GB	620 GB
	30 GB	1.2 TB

	RAM	Disk
	256 MB	10 GB
	512 MB	20 GB
	1 GB	40 GB
	2 GB	80 GB
	4 GB	160 GB
	8 GB	320 GB
	15 GB	620 GB
	30 GB	1.2 TB

Item Name	Status
My Product Item 1	Pending Deletion
My Product Item 2	Pending Deletion
My Product Item 3	Pending Deletion

Name	IPv4	Detail
Item One	101.122.11.222	More Detail Here
Item Two	10.111.22.112	More Detail Here
Item Two	10.111.22.112	More Detail Here

How do I use UX patterns?

How it works

Adherence Rating: 2

Complex Components:

Simple Components:

Adherence Rating: 3

{Product}s

Markup

Complex Components:

Simple Components:

Adherence Rating: 3

Setting Up This Item

Configuration Help

Help Me With...

What's Next

Create {Product Name}

Markup

Complex Components:

Simple Components:

Adherence Rating: 3

Managing This Product

Top action helpful text

Help Me With...

What's Next

Markup