UX Patterns

Combined UI components to solve common design problems.

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.

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

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:

  1. Quickly find items
  2. Easily assess item health
  3. Perform actions without drilling down

Complex Components:

Simple Components:

Adherence Rating: 3

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

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:

  1. The Create Form allows you to break workflows into sections:
    1. Configure the product
    2. Select important options
    3. Add related items
  2. The Right Sidebar contains help text and links about best practices and next steps for further use or configuration.
  3. The Back link points to the list view you came from.

Complex Components:

Simple Components:

Adherence Rating: 3

Setting Up This Item

Configuration Help

Short blurb about best practices for complex settings in the create process. Limit to 3 lines.

More Details About Blurb »


Help Me With...

Learn More about This Product »


What's Next

Visit Our Knowledge Center »

Create {Product Name}

{Product Name} Details
 / 
Selection Table
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
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:

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

Complex Components:

Simple Components:

Adherence Rating: 3

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 »


Help Me With...

Learn More about This Product »


What's Next

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
Item One 101.122.11.222 None
Item Two 10.111.22.112 None
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 -->