Components
Reusable page components used throughout the CenturyLink Platform UI/UX.
Primary Content
Increase page speed to comprehension by giving the page a visual hierachy. Use the .primary
class to wrap a .container
to add a white background to the main content of the view. For an example, see the basic starter page.
Page Header Content
Secondary Content
<div class="primary">
<div class="container">
<div class="row">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
Action Toolbar
Use .action-toolbar
on an <ol>
or <ul>
to
get a menu style toolbar. using the overflowMenu
widget, as seen bellow, allowes
for dynamic creation of a "more" dropdown link when the toolbar is too narrow.
<div class="action-area">
<ol class="action-toolbar" data-bind="widget: 'overflowMenu'">
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-play' /></svg> start</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-stop' /></svg> stop</button></li>
<li><button type="button" disabled><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-stop' /></svg> disabled</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-refresh' /></svg> restart</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-archive' /></svg> archive</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-snapshot' /></svg> snapshot</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-disaster-recovery' /></svg> recovery</button></li>
</ol>
</div>
If you need to have a right align link use the classes action-toolbar-left
and
action-toolbar-right
. If you need more than a single link use a
dropdown.
<div class="action-area">
<ol class="action-toolbar-left" data-bind="widget: 'overflowMenu'">
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-play' /></svg> start</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-stop' /></svg> stop</button></li>
<li><button type="button" disabled><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-stop' /></svg> disabled</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-refresh' /></svg> restart</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-archive' /></svg> archive</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-snapshot' /></svg> snapshot</button></li>
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-disaster-recovery' /></svg> recovery</button></li>
</ol>
<ol class="action-toolbar-right">
<li><button type="button"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-settings' /></svg> settings</button></li>
</ol>
</div>
ActionToolbar Active Button
Some actions may take a long period of time to complete, or toggle a slideWell open and closed. By adding the .active
class to the button and changing the verbage, we can let the user know that an action is taking place.
<li><button type="button" class="active"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-play' /></svg> starting…</button></li>
Action Toolbar Confirmations
Some actions can be costly or even dangerous and therefore should be confirmed to make sure that the user actually wants to preform them. This shouldn’t be done on every action just ones that have possible negative side effects, like taking a service offline for a period of time.
Cyclops provides a widget, the actionToolbarConfirm
, that can be used to get
confirmation from the user. For more information about the specific options and
configurations available please see the
actionToolbarConfirm code page.
<div class="action-area">
<ol class="action-toolbar-left" data-bind="widget: 'overflowMenu'">
<li><a href="#" data-bind="widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-play'></svg> start</a></li>
<li><a href="#" data-bind="widget: {
name: 'actionToolbarConfirm',
options: {
classes: 'action-toolbar-confirm-danger',
messageHtml: 'Are you sure you want to delete this server?',
yesHtml: '<svg class="cyclops-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-trash"></use></svg> Delete'}}"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-stop'></svg> stop</a></li>
<li><a href="#" class="disabled"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-stop'></svg> disabled</a></li>
<li><a href="#" data-bind="widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-refresh'></svg> restart</a></li>
<li><a href="#" data-bind="widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-archive'></svg> archive</a></li>
<li><a href="#"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-snapshot'></svg> snapshot</a></li>
<li><a href="#" data-bind="widget: 'actionToolbarConfirm'"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-disaster-recovery'></svg> recovery</a></li>
</ol>
<ol class="action-toolbar-right">
<li><a href="#"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-settings'></svg> settings</a></li>
</ol>
</div>
Activity History
An important part of the CenturyLink Control Portal experience, is the logging of user activity. Actions performed by the user against your service (CRUD operations for example) should be logged and displayed in the Accounts' activity history, as well as on the entity (e.g. server) or rollup pages (e.g. data center, server group).
RECENT ACTIVITY
Tuesday Sep 29
-
Password change for user trent.andersonPassword change for user trent.anderson by systemsystem
-
Password change for user alyssa.carizalesPassword change for user alyssa.carizales by systemsystem
-
User alyssa.carizales Password ResetUser alyssa.carizales password reset by systemsystem
-
Server WA1ACMEVMA01 DeletedServer WA1ACMEVMA01 Deleted by trent.andersonsystem
Thursday Jul 30
-
Roles updated for user trent.andersonRoles updated to:
AccountAdmintrent.anderson -
User nathan.young.corp createdUser trent.anderson created by trevor.transomtrevor.transom
<div class="activity-history">
<h5 class="content-header">
RECENT ACTIVITY
</h5>
<section class="day">
<h5 class="content-header">Tuesday Sep 29</h5>
<ol>
<li>
<div class="timestamp">2:50:05 PM</div>
<div class="details">
<div class="subject">Password change for user trent.anderson</div>
<div class="body">Password change for user trent.anderson by system</div>
<div class="attribution">
<span class="createdBy">system</span>
</div>
</div>
</li>
</ol>
</section>
<section class="day">
<h5 class="content-header">Tuesday Sep 29</h5>
<ol>
<li>
<div class="timestamp">2:50:05 PM</div>
<div class="details">
<div class="subject">Password change for user trent.anderson</div>
<div class="body">Password change for user trent.anderson by system</div>
<div class="attribution">
<span class="createdBy">system</span>
</div>
</div>
</li>
</ol>
</section>
</div>
Alerts
Provide contextual feedback messages for user actions with alert messages. Wrap any text and an optional dismiss button in .alert
and one of the four contextual classes (e.g., .alert-success
) for basic alert messages. Responsive behavior is built in.
Instructions or Helpful Info!
This is a helpful message.
Success!
This is a successful message.
Helpful Information!
This alert should be used to display information that isn't inherently obvious.
Warning!
This is a warning message.
Danger!
This message is important and may have a major impact.
A message with a button.
H1 Headline
This is a helpful message.
H1 Headline
This is a helpful message.
H3 Headline
This is a helpful message.
H4 Headline
This is a helpful message.
// alert with an icon and header
<div class="alert alert-success" role="alert">
<div class="alert-icon">
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle'></svg>
</div>
<h4>Success!</h4>
<p>This is a successful message.</p>
</div>
// text only alert
<div class="alert alert-info" role="alert">
...
</div>
Alert Banners
Alert banners should be used for portal or service wide notifications. It should be the first element inside <main>
so that it appears immediately below the page header navigation.
<div class="alert alert-banner alert-info alert-dismissible alert--texture" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
This is a dismissible system alert.
</div>
<div class="alert alert-success alert-info " role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="alert-icon">
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle' /></svg>
</div>
<h4>This is a dismissible alert!</h4>
<p>This is a warning message.</p>
</div>
Dismissible Alerts
If an alert should be dismissible, add .alert-dismissible
, which adds extra padding to the right of the alert, and positions the .close
button.
This is a dismissible alert!
This is a warning message.
<div class="alert alert-banner alert-warning alert-dismissible alert--texture" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
This is a dismissible system alert.
</div>
<div class="alert alert-success alert-warning " role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="alert-icon">
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-plus-circle' /></svg>
</div>
<h4>This is a dismissible alert warning!</h4>
<p>This is a warning message.</p>
</div>
Billing Summary
When possible, expose a billing estimate for your service so that customers can see how their usage of individual services will impact their total bill. Add .billing-summary
to a .row
, and within each grid column, wrap the unit in .heading
and the value in .currency
.
<div class="row billing-summary">
<div class="col-sm-4 col-xs-6">
<div class="heading">MONTH ESTIMATE</div>
<div class="currency">$15.74</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="heading">CURRENT HOUR</div>
<div class="currency">$0.02</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="heading">MONTH TO DATE</div>
<div class="currency">$7.08</div>
</div>
</div>
Billing estimate with a one time charge (setup fees)
<div class="row billing-summary">
<div class="col-sm-3 col-xs-6">
<div class="heading">MONTH ESTIMATE</div>
<div class="currency">$1,136.34</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="heading">CURRENT HOUR</div>
<div class="currency">$1.51</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="heading">ONE TIME CHARGES</div>
<div class="currency">$0.00</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="heading">MONTH TO DATE</div>
<div class="currency">$480.40</div>
</div>
</div>
Billing estimate with one time charge and promo balance.
<div class="row billing-summary">
<div class="col-sm-1-5">
<div class="heading">MONTH ESTIMATE</div>
<div class="currency">$1,136.34</div>
</div>
<div class="col-sm-1-5">
<div class="heading">CURRENT HOUR</div>
<div class="currency">$1.51</div>
</div>
<div class="col-sm-1-5">
<div class="heading">ONE TIME CHARGES</div>
<div class="currency">$0.00</div>
</div>
<div class="col-sm-1-5">
<div class="heading">MONTH TO DATE</div>
<div class="currency">$480.40</div>
</div>
<div class="col-sm-1-5">
<div class="heading">PROMO BALANCE</div>
<div class="currency">($623.40)</div>
</div>
</div>
Loading Behavior
When loading data, use a …
to indicate that data is loading in place, and a —
when the data fails to load.
Price Estimate
When possible, show a price estimate on the left side of a Create form page so that customers can get an understanding of how their actions impact potential costs. Changes in to settings in the create form (e.g. changing cpu count), should impact the values displayed in the price estimate.
Within a .row
, use the .priceEstimateContainer
to display the estimate values and .createFormContainer
to contain the <form>
. The price estimate container, by default, is positioned as sticky content.
<div class="row">
<div id="priceEstimateContainer">
<div id="priceEstimate">
<h5 class="content-header">ESTIMATED COST AS CONFIGURED</h5>
<div class="cost-value">$75.29</div>
<div class="cost-interval">PER MONTH</div>
<div class="cost-value">$0.10</div>
<div class="cost-interval">PER HOUR</div>
<div class="disclaimer">Does not include bandwidth charges. Final cost will vary based on usage.</div>
</div>
<div id="priceBreakdown">
<div class="line-item">
<div class="line-item-display">2 CPUs</div>
<div class="line-item-cost">(~$0.02/hr)</div>
</div>
<div class="line-item">
<div class="line-item-display">4GB Memory</div>
<div class="line-item-cost">(~$0.06/hr)</div>
</div>
<div class="line-item">
<div class="line-item-display">100GB Storage</div>
<div class="line-item-cost">(~$0.02/hr)</div>
</div>
</div>
</div>
<div id="createFormContainer">
<form>...</form>
</div>
</div>
Breadcrumb
Use .breadcrumb
on an <ol>
to automatically get breadcrumb styles. If the breadcrumb is immediately followed by an <h1>
, the top margin of the <h1>
will be spaced accordingly.
Page Title
<ol class="breadcrumb">
<li><a href="#">US West - Seattle (WA1)</a></li>
<li><a href="#">Public Web App</a></li>
<li class="active">WA1WEBAP01</li>
</ol>
Git Stats
Display the github stats of a repo.
<ul class="git-stats">
<li>
<svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-cloud-upload' /></svg> 20 deploys
</li>
<li>
<a href="#"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-code-fork' /></svg> 2 forks</a>
</li>
<li>
<a href="#"><svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-star' /></svg> 21 stars</a>
</li>
</ul>
Pagination
Simple pagination for lists with many results. Use .active
to indicate the current page, and .disabled
for unclickable links (i.e. beginning or end of the list).
<nav>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Progress Bars
Progress bars are block elements that can be displayed using the progress
HTML5 tag. Set the
max
to the amount of work to complete — the value which the value property
will be divided by. Set the value
attribute to the amount of work complete.
To indicate a state, the color of the bar can be changed using .info
, .warning
or .danger
. The default color is green.
0%
50%
100%
info
warning
error
<progress value="0" max="100">0%</progress>
<progress value="50" max="100">50%</progress>
<progress value="100" max="100">100%</progress>
<progress class="info" value="75" max="100">75%</progress>
<progress class="warning" value="75" max="100">75%</progress>
<progress class="danger" value="75" max="100">75%</progress>
Supporting IE9
Not all browsers support the progress element, in our support matrix it is only IE9 for this case we need to offer a decent fall back to our users. This is where the text inside the progress tag comes into play. On browsers that do not support the tag it will just be treated like a div and the text will be displayed. So the text in the tag needs to be meaningful to the current use case. For instance, something like "70% complete" or "100GB of 1000GB used"
<progress value="0" max="100" data-bind="value: progress">
<!-- ko text: progressText--><!-- /ko -->
</progress>
Search Input
A set of standard markup to make a simple search box.
<span class="search-input">
<label class="sr-only" for="inputSearch">search</label>
<input type="text" id="inputSearch"/>
<svg class="cyclops-icon" aria-hidden="true">
<use xlink:href='#icon-search'></use>
</svg>
</span>
Show Password API documentation
A control to show a password. After 15 seconds
, it will automatically hide itself.
-
usernamematthew.osborn
-
password
-
IP Adrress192.168.1.1
<ul class="list-info">
<li>
<div class="info-label">password</div>
<div class="info-value">
<show-password params="getPassword: getPassword"></show-password>
</div>
</li>
</ul>
Slide Well
Slide wells are used to reveal additional content (i.e. forms) when toggled by a button or link. The .slide-well
class gives it's contents an “inset” appearance by adding an inner shadow. See the fadeSlide binding if you would like to use just the hide/show functionality on any element.
<button class="btn btn-default" data-bind="click: toggleOpen">toggle slide well</button> <div class="slide-well" data-bind="fadeSlide: open"> ... </div>
self.open = ko.observable(false); self.toggleOpen = function(){ self.open(!self.open()) };
Tags
Tags scale to match the size of the immediate parent element by using relative font sizing and em units. Add any of the modifier classes to change its appearnace.
H1 Heading Tag
H2 Heading Tag
H3 Heading Tag
H4 Heading Tag
H5 Heading Tag
H6 Heading Tag
Paragraph Tag
default tag primary tag info tag warning tag danger tag
default tag link primary tag link info tag link warning tag link danger tag link
<h1>H1 Heading <span class="tag tag-default">Tag</span></h1>
<h2>H2 Heading <span class="tag tag-default">Tag</span></h2>
<h3>H3 Heading <span class="tag tag-default">Tag</span></h3>
<h4>H4 Heading <span class="tag tag-default">Tag</span></h4>
<h5>H5 Heading <span class="tag tag-default">Tag</span></h5>
<h6>H6 Heading <span class="tag tag-default">Tag</span></h6>
<p>Paragraph <span class="tag tag-default">Tag</span></p>
<span class="tag tag-default">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-info">Info</span>
<span class="tag tag-warning">Warning</span>
<span class="tag tag-danger">Danger</span>
<a href="#" class="tag tag-default">default tag link</a>
<a href="#" class="tag tag-primary">primary tag link</a>
<a href="#" class="tag tag-info">info tag link</a>
<a href="#" class="tag tag-warning">warning tag link</a>
<a href="#" class="tag tag-danger">danger tag link</a>
Tree
Use .tree
to display a hierarchical list, with expand/collapse functionality.
Upcoming Events
Use .upcoming-events
to display scheduled events. The .task-datetime
should link to the task's respective scheduling page. Responsive behavior is built in.
UPCOMING EVENTS
<div class="upcoming-events">
<h5 class="content-header">UPCOMING EVENTS</h5>
<div class="event">
<a class="task-datetime" href="#">
<span class=" date">10/17</span>
<span class="time">11:24 am</span>
</a>
<div class="details">
<div class="category">Delete Snapshot</div>
<div class="subject">CA3-DNS-01</div>
</div>
</div>
<div class="event">
<a class="task-datetime" href="#">
<span class=" date">10/21</span>
<span class="time">07:33 am</span>
</a>
<div class="details">
<div class="category">Delete Snapshot</div>
<div class="subject">WA1-DEMO-01</div>
</div>
</div>
</div>