The MAAS GUI Framework is a HTML, CSS framework developed for MAAS a cloud application built by Canonical the Ubuntu people. The framework is written in Sass and is a theme based off our own Vanilla framework. We created this framework to act as the central location for all our MAAS web UI components, styles and patterns.
Brand colours are used for elements of importance; primarily used for global action buttons. Another use case would be for active/selected states within main and secondary navigation, and rollover hover states for text links.
Orange - #e95420
Cool grey - #333333
Avoid using as a static text colour, as it’s not readable as a colour combination with MAAS’s default background colour. Research has highlighted it isn’t accessible by web standards.
Grey colours palette is used for text, backgrounds, form styles, lines and borders. For typography, particularly body copy we use primarily use Cool Grey and Ash. For backgrounds we use Porcelain only as it’s more legible for grey text colours used throughout MAAS.
Black - #000000
Cool grey - #333333
Ash - #888888
Silk - #cdcdcd
Porcelain - #f7f7f7
White - #ffffff
Avoid using as main and group button styles.
UI colours are used for status icons, flash messages and form elements. The colours are only used to direct users, highlight problems or decisions that need action to be taken.
Red - #c7162b
Green - #0e8420
Blue - #19b6ee
Yellow - #f99b11
Avoid using as text, main and group button styles or background colours.
Vanilla typography starts with a base font size of 16px and a font weight of 300 for large screens. For medium screens the base size drops to 15px and at small screens it becomes 14px.
Our headline size scales to 5 sizes. Our base font size is 16px and is applied to body
found in the _base.main.scss
file. All headings uses Ubuntu Light font and have a line-height
of 1.3
and font-weight
of 300
unless specified otherwise. Here are some examples with large size screen font sizes.
Used to provide title for a page type or each row section on a page. <h1>
headings should be used for main headings, followed by <h2>
headings, then the less important <h3>
, and so on.
Avoid using different title types if they both have the same rank with in a content section or page.
32px - h1 heading type size
23px - h2 heading type size
20px - h3 heading type size
16px - h4 heading type size
14px - h5 heading type size
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
Text can be set in a number of different html tags — <p>
, <small>
, <strong>
, <time>
, etc. Body text should use the Ubuntu Light font at 16px
with a line-height
of 1.5
. Use for main content blocks or descriptions or any other content that needs to be represented as a paragraph.
Avoid using <p>
for navigation, title purposes or the creation of lists of content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi id officia doloribus quasi nihil qui sapiente suscipit, magni perferendis aperiam quibusdam, vel rerum consequuntur, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, minima, assumenda fugit dolorum et nemo tempore architecto.
<p>...</p>
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor). Used for page navigation, page links within tables, page link or content links within blocks of text and tags.
Should not be used as a primary action style or form action style. If required add a button class to signify a primary / secondary action.
<a href="#">...</a>
Easy to re-align blocks of text components with a direction alignment class. Used to place text content in the correct layout or to re-align table data content e.g. Number content is set to right alignment whereas text content is left aligned.
Avoid using text alignment classes to align blocks of content next to each other. Resort to using block alignment modifiers or the grid system.
Left aligned text
Center aligned text
Right aligned text
<p class="u-align--left">...</p>
<p class="u-align--center">...</p>
<p class="u-align--right">...</p>
We provide over 30 icons for the MAAS UI. These can be used as accent visual aids or as action buttons with in the application. Using icons as action buttons with in a table; Edit, Delete or Adding a new row to a table. Feedback icons can be used with error messaging, success feedback or with global feedback.
Avoid using icons to just show feedback without any context, icons are primary used with content.
<i class="icon icon--add">...</i>
<i class="icon icon--account">...</i>
<i class="icon icon--debug">...</i>
<i class="icon icon--delete">...</i>
<i class="icon icon--edit">...</i>
<i class="icon icon--error">...</i>
<i class="icon icon--help">...</i>
<i class="icon icon--info">...</i>
<i class="icon icon--loading u-animation--spin">...</i>
<i class="icon icon--mount">...</i>
<i class="icon icon--unmount">...</i>
<i class="icon icon--partition">...</i>
<i class="icon icon--logical-volume">...</i>
<i class="icon icon--power-error">...</i>
<i class="icon icon--power-off">...</i>
<i class="icon icon--power-on">...</i>
<i class="icon icon--remove">...</i>
<i class="icon icon--success">...</i>
<i class="icon icon--success-grey">...</i>
<i class="icon icon--settings">...</i>
<i class="icon icon--search">...</i>
<i class="icon icon--sync">...</i>
<i class="icon icon--system-shutdown">...</i>
<i class="icon icon--tags">...</i>
<i class="icon icon--tick">...</i>
<i class="icon icon--tooltip">...</i>
<i class="icon icon--warning">...</i>
<i class="icon icon--open">...</i>
<i class="icon icon--close">...</i>
<i class="icon icon--status-failed">..</i>
<i class="icon icon--status-in-progress">..</i>
<i class="icon icon--status-queued">..</i>
<i class="icon icon--status-succeeded">..</i>
<i class="icon icon--status-waiting">..</i>
<i class="icon icon--status-running">..</i>
<i class="icon icon--status-pending">..</i>
<i class="icon icon--status-pass">..</i>
<i class="icon icon--status-timed-out">..</i>
<i class="icon icon--add-pod">..</i>
<i class="icon icon--compose-machine">..</i>
Applying a size class to an icon gives the ability to keep the size inline to the content
<i class="icon icon--success icon--huge">...</i>
<i class="icon icon--success icon--gigantic">...</i>
<i class="icon icon--success icon--mega">...</i>
<i class="icon icon--success icon--large">...</i>
<i class="icon icon--success">...</i>
<i class="icon icon--success icon--small">...</i>
The default wrapper and rows are combined to create content rows. Each row should contain a .wrapper--inner
to set the content width inside and center it to the page. .wrapper--inner
is set to 1440px
wide and mainly used for page content blocks such as a summary of content.
Avoid small break down of content areas, a row should be used as a whole and not in a granular fashion.
Use .wrapper
for a full width container spanning the whole width of the browser or device.
<div class="wrapper">...</div>
Using .wrapper--inner
to create a fixed with fluid container.
<div class="wrapper--inner">...</div>
Use .row
for a full width row container spanning the whole width of the browser or device with a dividing bottom border.
<div class="row">...</div>
Vanilla's default grid has 12 columns and 20px gutters. On large screens, each column takes up 6.3053% of the total width. Layouts can be created combining rows with different number of columns to an ideal maximum of 4 columns per row. Each column should span a minimum of 3 column units.
Used To create two or three column layouts, dropdown forms on tables or the page header controls. Also used to align content blocks side by side and to create a responsive layout.
Avoid going lower than 3 column units as content will get too small and not flow correctly.
<div class="twelve-col">...</div>
<div class="eleven-col">...</div>
<div class="ten-col">...</div>
<div class="nine-col">...</div>
<div class="eight-col">...</div>
<div class="seven-col">...</div>
<div class="six-col">...</div>
<div class="five-col">...</div>
<div class="four-col">...</div>
<div class="three-col">...</div>
<div class="two-col">...</div>
<div class="one-col">...</div>
Spacing can be applied using either margin or padding. Both margin and padding share the same predefined scale. There are 6 available spacing sizes; tiny, small, default, large, huge and none. There are also 4 directions prefix with; top, right, bottom, left.
Overrides an padding for an element or a direction. Base value is set to 20px
.
Shouldn’t be used to override a patterns padding unless advised, used to add spacing to blocks or elements which lack enough padding.
<div class="u-padding">...</div>
<div class="u-padding--top">...</div>
<div class="u-padding--right">...</div>
<div class="u-padding--bottom">...</div>
<div class="u-padding--left">...</div>
Removing padding is available. adding -none
to each direction will remove the desired padding.
<div class="u-padding-none">...</div>
<div class="u-padding--top-none">...</div>
<div class="u-padding--right-none">...</div>
<div class="u-padding--bottom-none">...</div>
<div class="u-padding--left-none">...</div>
<div class="u-padding--none">...</div>
tiny
, small
, large
and huge
will decrease or increase the value to 5px, 10px, 40px, 80px.
<div class="u-padding--tiny">...</div>
<div class="u-padding--small">...</div>
<div class="u-padding--large">...</div>
<div class="u-padding--huge">...</div>
Overrides the margins for an element or a direction of the element. Base value is set to 20px
.
Used to add spacing between two elements when required e.g. between a delete and edit icon or two buttons next to each other.
Shouldn’t be used to override a patterns margin unless advised.
<div class="u-margin">...</div>
<div class="u-margin--top">...</div>
<div class="u-margin--right">...</div>
<div class="u-margin--bottom">...</div>
<div class="u-margin--left">...</div>
Removing margin is available. adding -none
to each direction will remove the desired margin.
<div class="u-margin--top-none">...</div>
<div class="u-margin--right-none">...</div>
<div class="u-margin--bottom-none">...</div>
<div class="u-margin--left-none">...</div>
<div class="u-margin--none">...</div>
tiny
, small
, large
and huge
will decrease or increase the value to 5px, 10px, 40px, 80px.
<div class="u-margin--tiny">...</div>
<div class="u-margin--small">...</div>
<div class="u-margin--large">...</div>
<div class="u-margin--huge">...</div>
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen. Can be used to provide information of concepts/terms/actions that are not self explanatory or well known. Can be introduced to provide information of a disabled actionable element, e.g. for disabled buttons provide information why why they are disabled.
Avoid using tooltips to provide instructions or guidance. They shouldn't be used to show rich information including images and formatted text and avoid placing over plain text or other places where they are not discoverable.
<a href="#" class="tooltip" aria-label="This is a default tooltip">...</a> <a href="#" class="tooltip tooltip--right" aria-label="This is a right tooltip">...</a> <a href="#" class="tooltip tooltip--bottom" aria-label="This is a bottom tooltip">...</a> <a href="#" class="tooltip tooltip--left" aria-label="This is a left tooltip">...</a>
To display nested content in a list. This can be used to show nested services of a device or app, to show a file structure or an IA hierarchy in a site map.
Avoid using this to display lists of data content or as a main navigation style.
<ul class="list__tree no-bullets"> <li class="list__item"> List item <ul class="list__tree list__tree--sub-level"> <li class="list__item"> Sub list item </li> <li class="list__item"> Sub list item </li> </ul> </li> <li class="list__item"> List item </li> <li class="list__item"> List item </li> <li class="list__item"> List item </li> </ul>
The main button style can be used in form submission buttons and other important call to actions. Apply using the class. Primary button styles are for the critical, or most important action on a form/page. Use the secondary button as the general button style. Button text are for non-critical actions or for keeping the interface simple.
Apply disabled
when the action cannot be performed (note: if it is not clear why an action is disabled, accompany with a tooltip).
Avoid using more that one primary button in a page and try to not overload the page with buttons.
<button class="button--positive button--inline">Button positive</button> <button class="button--destructive button--inline">Button destructive</button> <button class="button--secondary button--inline">Button secondary</button> <button class="button--base button--inline">Button base</button> <button class="button--positive button--inline" disabled="disable">Button disabled</button>
A drop down button selects between multiple selections. The button displays the current state and a down arrow. Use for high-level multiple actions on a page. Use this button style if a section has two or more actions and if possible actions are placed in order of importance. therwise they are alphabetically ordered. If the actions exceed the maximum displayable number (to be decided) add a scrollbar in the dropdown.
Avoid using this pattern for one action buttons.
<div class="button-group button-group--inline">
<a href="" class="button-group__link button--positive">Actions</a>
<ul class="button-group__dropdown">
<li class="button-group__item">
<a href="" class="button-group__item-link">Add hardware</a>
</li>
<li class="button-group__item">
<a href="" class="button-group__item-link">Remove hardware</a>
</li>
<li class="button-group__item">
<a href="" class="button-group__item-link">Commission</a>
</li>
</ul>
</div>
<div class="button-group button-group--inline">
<a href="" class="button-group__link button--secondary">Actions</a>
<ul class="button-group__dropdown">
<li class="button-group__item">
<a href="" class="button-group__item-link">Add hardware</a>
</li>
<li class="button-group__item">
<a href="" class="button-group__item-link">Remove hardware</a>
</li>
<li class="button-group__item">
<a href="" class="button-group__item-link">Commission</a>
</li>
</ul>
</div>
<div class="button-group button-group--inline">
<a href="" class="button-group__link button--destructive">Actions</a>
<ul class="button-group__dropdown">
<li class="button-group__item">
<a href="" class="button-group__item-link">Add hardware</a>
</li>
<li class="button-group__item">
<a href="" class="button-group__item-link">Remove hardware</a>
</li>
<li class="button-group__item">
<a href="" class="button-group__item-link">Commission</a>
</li>
</ul>
</div>
Form controls have global styling defined at the html
element level. Labels and most input types are set to 100% width of the form
parent element. All form controls are wrapped in .form-group
for other modifier classes to change the layout.
Used for controlling change in content or to submit new data to a web server. E.g updating settings or to request new data.
<form class="form"> <div class="form__group"> <label class="form__group-label" for="exampleInputEmail1">Email address</label> <div class="form__group-input"> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form__group"> <label class="form__group-label" for="exampleInputPassword1">Password</label> <div class="form__group-input"> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> </div> <div class="form__group"> <label class="form__group-label" for="exampleInputFile">File input</label> <div class="form__group-input"> <input type="file" id="exampleInputFile"> </div> <p class="form__help-text">Example form help text.</p> </div> <div class="form__group"> <input type="checkbox" id="CheckMe"> <label for="CheckMe">Check me out</label> </div> <div class="form__group"> <input type="radio" name="RadioOptions" id="Radio1" value="option1"> <label for="Radio1">Radio 1</label> <input type="radio" name="RadioOptions" id="Radio2" value="option2"> <label for="Radio2">Radio 2</label> <input type="radio" name="RadioOptions" id="Radio4" value="option4"> <label for="Radio4">Radio 4</label> <input type="radio" name="RadioOptions" id="Radio6" value="option6"> <label for="Radio6">Radio 6</label> </div> <button type="submit" class="button--positive button--inline">Submit</button> </form>
Inline form styles are a layout change and keep all form elements inline with each other including form responses. Use for forms which are concealed in dropdowns and do not need to take up a lot of space or small forms i.e login forms.
Add .form--inline
to your form for left-aligned and inline-block form elements.
Avoid using this style with forms which contain a large amount of controls or complexity. Not advised to be used with textarea
.
<form class="form form--inline"> <div class="form__group"> <label class="form__group-label" for="exampleInputEmail1">Email address</label> <div class="form__group-input"> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form__group"> <label class="form__group-label" for="exampleInputPassword1">Password</label> <div class="form__group-input"> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> </div> <div class="form__group"> <input type="checkbox" id="exampleCheckboxTable"> <label for="exampleCheckboxTable">Save password</label> </div> <button type="submit" class="button--positive button--inline">Sign in</button> </form>
Add .form--stacked
and our grid system to your form for stacked inline form elements. Used for large form control blocks such as; system details, address forms or setting control layouts. It supports all form controls in any layout.
Avoid using this layout for smaller forms such as login or one input forms. Resort to using the inline form style.
<form class="form form--stack"> <fieldset class="form__fieldset u-margin--bottom-none six-col"> <div class="form__group"> <label class="form__group-label two-col" for="exampleInputEmail3">Email address</label> <div class="form__group-input four-col last-col"> <input class="has-error" type="email" id="exampleInputEmail3" placeholder="Email"> <ul class="form__error errors"> <li class="form__error-item">Test</li> </ul> </div> </div> <div class="form__group"> <label class="form__group-label two-col" for="exampleInputPassword3">Password</label> <input type="password" class="four-col last-col" id="exampleInputPassword3" placeholder="Password"> </div> <div class="form__group"> <label class="form__group-label two-col" for="exampleSelectCountry">Country</label> <select class="four-col last-col" name="exampleSelectCountry" id="exampleSelectCountry"> <option value="disabled" disabled selected>Choose a country...</option> <option value="UK">United Kingdom</option> <option value="US">United States</option> <option value="FRA">France</option> <option value="GER">Germany</option> </select> </div> <div class="form__group"> <label class="form__group-label two-col" for="exampleTextarea">More information</label> <textarea class="four-col last-col" name="exampleTextarea" rows="8" cols="40" placeholder="Add text..."></textarea> </div> </fieldset> </form>
Using form__group-subtle
will change the design of any form control and apply a new hover state to the control. Used for form controls which auto update on input change and blur.
Not to be used with forms which have an active save control or any type of submit changes button.
<form class="form form--stack"> <fieldset class="form__fieldset u-margin--bottom-none six-col"> <div class="form__group form__group--subtle"> <label class="form__group-label two-col" for="exampleInputEmail3">Email address</label> <div class="form__group-input four-col last-col"> <input type="email" id="exampleInputEmail3" placeholder="Email"> </div> </div> <div class="form__group form__group--subtle"> <label class="form__group-label two-col" for="exampleInputPassword3">Password</label> <div class="form__group-input four-col last-col"> <input type="password" id="exampleInputPassword3" placeholder="Password"> </div> </div> </fieldset> </form>
Wrap .form__siblings
around two subtle form group elements to link their hover and active effects.
Avoid using with forms which have an active save control or any type of submit changes button. Alos not to be used with form controls which haven’t had the subtle class applied.
<form class="form form--stack"> <fieldset class="form__fieldset u-margin--bottom-none"> <div class="form__siblings"> <div class="form__group form__group--subtle"> <label class="form__group-label two-col" for="exampleInput1">Sibling 1</label> <div class="form__group-input four-col last-col"> <input type="text" id="exampleInput1" placeholder="Form field sibling 1"> </div> </div> <div class="form__group form__group--subtle"> <label class="form__group-label two-col" for="exampleInput2">Sibling 2</label> <div class="form__group-input four-col last-col"> <input type="text" id="exampleInput2" placeholder="Form field sibling 2"> </div> </div> </div> <div class="form__group form__group--subtle"> <label class="form__group-label two-col" for="examplePassword4">Password</label> <div class="form__group-input four-col last-col"> <input type="password" id="examplePassword4" placeholder="Password"> </div> </div> </fieldset> </form>
Add the disabled
state to any form control and it will prevent any user interaction. It will make the input appear lighter and any hover effect will come up with a no action cursor to show nothing can be done to the user.
Can be used on input
, textarea
or button
and other form controls.
Do not use to prevent users interacting with the content use readonly
instead.
<form class="form form--stack"> <fieldset class="form__fieldset u-margin--bottom-none six-col"> <div class="form__group"> <label class="form__group-label two-col" for="exampleInputEmail3">Email address</label> <div class="form__group-input four-col last-col"> <input type="email" id="exampleInputEmail3" placeholder="Email" disabled="disabled"> </div> </div> <div class="form__group"> <label class="form__group-label two-col" for="exampleInputPassword3">Password</label> <div class="form__group-input four-col last-col"> <input type="password" id="exampleInputPassword3" placeholder="Password" disabled="disabled"> </div> </div> </fieldset> </form>
Use tabs when there are multiple categories/views/panes of content, but there is the need to only show one pane at a time.
Don’t use tabs for pagination of content or cases involve viewing content, not navigating between groups of content. Tabs can not be nested or be mixed with icons or button styles.
<ul class="tabs"> <li class="tabs__tab is-active"> <a href="" class="tabs__tab-link">Machines</a> </li> <li class="tabs__tab"> <a href="" class="tabs__tab-link">Devices</a> </li> <li class="tabs__tab"> <a href="" class="tabs__tab-link">Controllers</a> </li> </ul>
Used to hold snippets of code or machine / log output with numberd lines. Primarly used to display code or machine output which is non editible.
Avoid using for areas which users may require to edit the content or for long code files.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem culpa dicta illo dolor est, enim adipisci aliquam asperiores hic voluptate reprehenderit, libero aspernatur nihil quos eligendi quidem voluptatum nemo esse assumenda omnis vitae quas sit. Iste dicta saepe, a quo, vel provident laborum eligendi nesciunt incidunt obcaecati maiores, molestias nobis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem culpa dicta illo dolor est, enim adipisci aliquam asperiores hic voluptate reprehenderit, libero aspernatur nihil quos eligendi quidem voluptatum nemo esse assumenda omnis vitae quas sit. Iste dicta saepe, a quo, vel provident laborum eligendi nesciunt incidunt obcaecati maiores, molestias nobis!
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<pre class="code-block">...</pre> <pre class="code-block code-block--terminal">...</pre> <pre class="code-block code-block--numbering"> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> </pre> <pre class="code-block code-block--numbering code-block--terminal"> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> <code class="code-block__line">...</code> </pre>
Users need to see structured data in a manner that makes the data readable, scannable, and comparable. Tables can include non-text elements such as icons as well as form elements such as checkboxes or radio buttons. For non primary content, load [x] more pattern can be used to avoid long tables. Tab headers can be used to set which column is visible within a table if nessicary.
Avoid trying to paginate table content or applying loading more links on primary content tables.
Table heading | Table heading Table heading | lorem 2 | lorem 3 |
---|---|---|---|
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
test | test | test | test |
<table> <thead> <tr> <th>Table heading</th> <th> <a href="#">Table heading</a> <span class="divide"></span> <a href="">Table heading</a> </th> <th>lorem 2</th> <th>lorem 3</th> </tr> </thead> <tbody> <tr> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr class="table--success"> <td aria-label="label"><i class="icon icon--success"></i> test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr><tr> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr class="table--warning"> <td aria-label="label"><i class="icon icon--warning"></i> test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr class="table--error"> <td aria-label="label"><i class="icon icon--error"></i> test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr class="table--information"> <td aria-label="label"><i class="icon icon--info"></i> test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> <tr> <td aria-label="label"> <input type="checkbox" id="exampleCheckbox"> <label for="exampleCheckbox"></label> test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> <td aria-label="label">test</td> </tr> </tbody> </table>
Context classes are to be used on rows to show content feedback. Use feedback styles to provide feedback on a row action. This will replace the standard style of the row with the feedback style.
<tr class="table--information">...</tr> <tr class="table--success">...</tr> <tr class="table--error">...</tr> <tr class="table--warning">...</tr>
Column classes are used to set a cell width from 1%
to 100%
. Use appropriate widths to show all the content if possible.
Avoid creating columns that the collective value exceeds 100%.
<td class="table--1">...</td> ... <td class="table--100">...</td>
Using .table
on block elements creates a pseudo table style which can be used to create powerful interactive tables which wouldn't be possible using standard <table>
elements.
This pattern should be used when a table requires configuration fields (add, edit). Expandable rows can also be used to supply additional information not visible on the table row.
Aviid using this pattern for standard data tables.
<section class="table u-margin--bottom"> <header class="table__head"> <div class="table__row"> <div class="table__header table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div class="table__header table-col--15">Name</div> <div class="table__header table-col--15">Size</div> <div class="table__header table-col--15">Device Type</div> <div class="table__header table-col--15">File system</div> <div class="table__header table-col--15"> <a class="table__header-link">Model</a> <span class="divide"></span> <a class="table__header-link">Serial</a> </div> <div class="table__header table-col--15">Tags</div> <div class="table__header table-col--7"></div> </div> </header> <main class="table__body"> <div class="table__row"> <div aria-label="label" class="table__data table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div aria-label="label" class="table__data table-col--15"> sda </div> <div aria-label="label" class="table__data table-col--15">8.5 G</div> <div aria-label="label" class="table__data table-col--15">Physical</div> <div aria-label="label" class="table__data table-col--15"> <a class="table__controls table__controls--secondary">Format</a> </div> <div aria-label="label" class="table__data table-col--15">QEMU HARDDISK</div> <div aria-label="label" class="table__data table-col--15 u-display--hidden">937368252</div> <div aria-label="label" class="table__data table-col--15">rotary, storage, machine</div> <div aria-label="label" class="table__data table-col--7 table--mobile-controls"> <div class="table__controls"> <a class="icon icon--partition u-display--desktop"></a> <a class="button--secondary u-display--mobile">Add partition</a> </div> </div> </div> <div class="table__row is-active"> <div aria-label="label" class="table__data table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div aria-label="label" class="table__data table-col--15"> <span hidden>sdb</span> <input type="text" value="sdb" class="table__input"> </div> <div aria-label="label" class="table__data table-col--15"><span class="u-display--hidden">8.5 G</span></div> <div aria-label="label" class="table__data table-col--15"><span class="u-display--hidden">Physical</span></div> <div aria-label="label" class="table__data table-col--15"><span class="u-display--hidden"> fat32 <a class="table__controls table__controls--secondary u-margin--left-small">Mount</a></span> </div> <div aria-label="label" class="table__data table-col--15"><span class="u-display--hidden">QEMU HARDDISK</span></div> <div aria-label="label" class="table__data table-col--15 u-display--hidden">937368252</div> <div aria-label="label" class="table__data table-col--15"><span class="u-display--hidden"> <div class="table__tags">rotary, storage, test, hp, machine<span class="table__controls table__controls--secondary">, <a>edit</a></span></div></span> </div> <div aria-label="label" class="table__data table-col--7"> <div class="table__controls"> <a class="icon icon--partition">Partition</a> <a class="icon icon--delete">Delete</a> </div> </div> <div class="table__dropdown"> <div class="table__dropdown-title"> <h2 class="u-float--left">Editing</h2> <i class="icon icon--remove u-float--right u-margin--top-small u-margin--right-small"></i> </div> <div class="table__row is-active"> <form aria-label="label" class="table__data u-padding--top table-col--100 form form--stack"> <fieldset class="form__fieldset six-col"> <div class="form__group"> <label class="two-col" for="example-input">Example input</label> <input class="table__input three-col" type="text" id="example-input" placeholder="Example"> </div> <div class="form__group"> <label class="two-col" for="example-input">Example input</label> <input class="table__input three-col" type="text" id="example-input" placeholder="Example"> </div> <div class="form__group"> <label class="two-col" for="example-input">Example input</label> <input class="table__input three-col" type="text" id="example-input" placeholder="Example"> </div> </fieldset> <fieldset class="form__fieldset six-col last-col"> <div class="form__group"> <label class="two-col" for="example-input">Example input</label> <input class="table__input three-col" type="text" id="example-input" placeholder="Example"> </div> <div class="form__group"> <label class="two-col" for="example-input">Example input</label> <input class="table__input three-col" type="text" id="example-input" placeholder="Example"> </div> <div class="form__group"> <label class="two-col" for="example-input">Example input</label> <input class="table__input three-col" type="text" id="example-input" placeholder="Example"> </div> </fieldset> </form> </div> <div class="table__row table__dropdown-row is-active"> <div aria-label="label" class="table__data u-float--right"> <a class="button--base button--inline">Cancel</a> <button class="button--positive button--inline">Mount</button> </div> </div> </div> </div> <div class="table__row"> <div aria-label="label" class="table__data table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div aria-label="label" class="table__data table-col--15"> sdb </div> <div aria-label="label" class="table__data table-col--15">8.5 G</div> <div aria-label="label" class="table__data table-col--15">Physical</div> <div aria-label="label" class="table__data table-col--15"> <a class="table__controls table__controls--secondary">Format</a> </div> <div aria-label="label" class="table__data table-col--15">QEMU HARDDISK</div> <div aria-label="label" class="table__data table-col--15 u-display--hidden">937368252</div> <div aria-label="label" class="table__data table-col--15">rotary, storage, machine</div> <div aria-label="label" class="table__data table-col--7 table--mobile-controls"> <div class="table__controls"> <a class="icon icon--partition u-display--desktop"></a> <a class="button--secondary u-display--mobile">Add partition</a> </div> </div> </div> <div class="table__row"> <div aria-label="label" class="table__data table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div aria-label="label" class="table__data table-col--15"> sdc </div> <div aria-label="label" class="table__data table-col--15">8.5 G</div> <div aria-label="label" class="table__data table-col--15">Physical</div> <div aria-label="label" class="table__data table-col--15"> <a class="table__controls table__controls--secondary">Format</a> </div> <div aria-label="label" class="table__data table-col--15">QEMU HARDDISK</div> <div aria-label="label" class="table__data table-col--15 u-display--hidden">937368252</div> <div aria-label="label" class="table__data table-col--15">rotary, storage, machine</div> <div aria-label="label" class="table__data table-col--7 table--mobile-controls"> <div class="table__controls"> <a class="icon icon--partition u-display--desktop"></a> <a class="button--secondary u-display--mobile">Add partition</a> </div> </div> </div> <div class="table__row"> <div aria-label="label" class="table__data table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div aria-label="label" class="table__data table-col--15"> sdd </div> <div aria-label="label" class="table__data table-col--15">8.5 G</div> <div aria-label="label" class="table__data table-col--15">Physical</div> <div aria-label="label" class="table__data table-col--15"> <a class="table__controls table__controls--secondary">Format</a> </div> <div aria-label="label" class="table__data table-col--15">QEMU HARDDISK</div> <div aria-label="label" class="table__data table-col--15 u-display--hidden">937368252</div> <div aria-label="label" class="table__data table-col--15">rotary, storage, machine</div> <div aria-label="label" class="table__data table-col--7 table--mobile-controls"> <div class="table__controls"> <a class="icon icon--partition u-display--desktop"></a> <a class="button--secondary u-display--mobile">Add partition</a> </div> </div> </div> <div class="table__row"> <div aria-label="label" class="table__data table-col--3"> <input type="checkbox" id="exampleCheckboxAll"> <label for="exampleCheckboxAll"></label> </div> <div aria-label="label" class="table__data table-col--15"> vg0-lv0 </div> <div aria-label="label" class="table__data table-col--15">8.5 G</div> <div aria-label="label" class="table__data table-col--15">Logical volume</div> <div aria-label="label" class="table__data table-col--15"> <a class="table__controls table__controls--secondary">Format</a> </div> <div aria-label="label" class="table__data table-col--15"></div> <div aria-label="label" class="table__data table-col--15 u-display--hidden"></div> <div aria-label="label" class="table__data table-col--15">rotary, storage, machine</div> <div aria-label="label" class="table__data table-col--7 table--mobile-controls"> <div class="table__controls"> <a class="icon icon--partition u-display--desktop"></a> <a class="button--secondary u-display--mobile">Add partition</a> </div> </div> </div> </main> </section>
Navigation guides users through different parts MAAS. Ideal to prioritise the navigation items based on common user tasks. Will indicate the current position of the user.
<header class="banner global"> <nav class="nav-primary"> <span class="accessibility-aid"> <a href="#main-content">Jump to main content</a> </span> <div class="logo"> <a href="/"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="25.2px" viewBox="545.3 412.6 100 25.2" enable-background="new 545.3 412.6 100 25.2" xml:space="preserve"> <g id="artwork"></g> <g id="AW"> <g> <g> <g> <path fill="#E95420" d="M557.9,412.6c-7,0-12.6,5.7-12.6,12.6c0,7,5.7,12.6,12.6,12.6c7,0,12.6-5.7,12.6-12.6 C570.5,418.2,564.9,412.6,557.9,412.6z"></path> </g> <g> <path fill="#FFFFFF" d="M563.8,419.2L563.8,419.2h-11.9l0,0c-0.3,0-0.5,0.2-0.5,0.5v0.7c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0h11.9 c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5v-0.7C564.4,419.4,564.1,419.2,563.8,419.2z"></path> <path fill="#FFFFFF" d="M563.8,422.6L563.8,422.6l-11.9,0v0c-0.3,0-0.5,0.2-0.5,0.5v0.7c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0h11.9 c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5v-0.7C564.4,422.8,564.1,422.6,563.8,422.6z"></path> <path fill="#FFFFFF" d="M563.8,426L563.8,426h-11.9l0,0c-0.3,0-0.5,0.2-0.5,0.5v0.7c0,0.3,0.2,0.5,0.5,0.5h11.9l0,0 c0.3,0,0.5-0.2,0.5-0.5v-0.7C564.4,426.3,564.1,426,563.8,426z"></path> <path fill="#FFFFFF" d="M563.8,429.4L563.8,429.4h-11.9l0,0c-0.3,0-0.5,0.2-0.5,0.5v0.7c0,0.3,0.2,0.5,0.5,0.5h11.9l0,0 c0.3,0,0.5-0.2,0.5-0.5V430C564.4,429.7,564.1,429.4,563.8,429.4z"></path> </g> </g> <g> <path fill="#FFFFFF" d="M587.1,431.3c-0.2-0.4-0.4-1-0.7-1.7c-0.3-0.7-0.7-1.5-1.1-2.3c-0.4-0.8-0.8-1.7-1.2-2.5 c-0.4-0.9-0.8-1.7-1.2-2.5c-0.4-0.8-0.7-1.4-1-2c-0.3-0.6-0.5-1-0.6-1.2c-0.2,2.1-0.4,4.4-0.5,6.9c-0.1,2.5-0.2,5.1-0.3,7.8h-1.7 c0.2-3.2,0.3-6.3,0.5-9.2s0.4-5.8,0.7-8.4h1.5c0.5,0.9,1.1,1.8,1.6,2.9c0.6,1.1,1.2,2.3,1.7,3.5c0.6,1.2,1.1,2.4,1.7,3.5 s1,2.2,1.4,3.1c0.4-0.9,0.9-2,1.4-3.1c0.5-1.2,1.1-2.3,1.7-3.5c0.6-1.2,1.1-2.4,1.7-3.5c0.6-1.1,1.1-2.1,1.6-2.9h1.5 c0.3,2.7,0.5,5.5,0.7,8.4s0.4,6,0.5,9.2h-1.8c-0.1-2.7-0.2-5.3-0.3-7.8c-0.1-2.5-0.3-4.8-0.5-6.9c-0.1,0.2-0.3,0.6-0.6,1.2 c-0.3,0.6-0.6,1.2-1,2c-0.4,0.8-0.8,1.6-1.2,2.5c-0.4,0.9-0.8,1.7-1.2,2.5c-0.4,0.8-0.7,1.6-1.1,2.3c-0.3,0.7-0.6,1.3-0.7,1.7 H587.1z"></path> <path fill="#FFFFFF" d="M613.1,433.9c-0.3-0.9-0.6-1.7-0.9-2.5c-0.3-0.8-0.6-1.6-0.8-2.3h-8.6c-0.3,0.8-0.6,1.5-0.9,2.3 c-0.3,0.8-0.6,1.6-0.9,2.5h-1.8c0.7-1.8,1.3-3.6,1.9-5.1c0.6-1.6,1.2-3.1,1.8-4.5c0.6-1.4,1.1-2.8,1.7-4.1 c0.6-1.3,1.2-2.6,1.8-3.9h1.5c0.6,1.3,1.2,2.6,1.8,3.9c0.6,1.3,1.1,2.7,1.7,4.1c0.6,1.4,1.2,2.9,1.7,4.5c0.6,1.6,1.2,3.3,1.9,5.1 H613.1L613.1,433.9z M607.1,418.2c-0.6,1.5-1.3,3-1.9,4.5c-0.6,1.5-1.2,3.1-1.9,4.9h7.5c-0.7-1.8-1.3-3.4-1.9-4.9 C608.3,421.1,607.7,419.6,607.1,418.2z"></path> <path fill="#FFFFFF" d="M630.4,433.9c-0.3-0.9-0.6-1.7-0.9-2.5c-0.3-0.8-0.6-1.6-0.8-2.3H620c-0.3,0.8-0.6,1.5-0.9,2.3 c-0.3,0.8-0.6,1.6-0.9,2.5h-1.8c0.7-1.8,1.3-3.6,1.9-5.1c0.6-1.6,1.2-3.1,1.8-4.5c0.6-1.4,1.1-2.8,1.7-4.1 c0.6-1.3,1.2-2.6,1.8-3.9h1.5c0.6,1.3,1.2,2.6,1.8,3.9c0.6,1.3,1.1,2.7,1.7,4.1s1.2,2.9,1.7,4.5c0.6,1.6,1.2,3.3,1.9,5.1H630.4 L630.4,433.9z M624.3,418.2c-0.6,1.5-1.3,3-1.9,4.5c-0.6,1.5-1.2,3.1-1.9,4.9h7.5c-0.7-1.8-1.3-3.4-1.9-4.9 C625.6,421.1,625,419.6,624.3,418.2z"></path> <path fill="#FFFFFF" d="M639.1,432.7c1.4,0,2.4-0.3,3.2-0.8c0.8-0.5,1.1-1.3,1.1-2.4c0-0.6-0.1-1.2-0.4-1.6 c-0.2-0.4-0.6-0.8-1-1.1s-0.9-0.6-1.4-0.8c-0.5-0.2-1.1-0.4-1.7-0.7c-0.7-0.3-1.4-0.6-2-0.9c-0.6-0.3-1.1-0.6-1.5-1 c-0.4-0.4-0.7-0.8-0.9-1.3c-0.2-0.5-0.3-1.1-0.3-1.7c0-1.5,0.5-2.7,1.5-3.4s2.4-1.2,4.2-1.2c0.5,0,0.9,0,1.4,0.1s0.9,0.2,1.3,0.3 c0.4,0.1,0.8,0.2,1.1,0.4c0.3,0.1,0.6,0.3,0.8,0.4l-0.6,1.5c-0.5-0.3-1.1-0.6-1.8-0.8s-1.5-0.3-2.3-0.3c-0.6,0-1.1,0.1-1.5,0.2 c-0.5,0.1-0.9,0.3-1.2,0.5s-0.6,0.6-0.8,0.9c-0.2,0.4-0.3,0.8-0.3,1.4c0,0.5,0.1,1,0.3,1.4c0.2,0.4,0.5,0.7,0.9,1 c0.4,0.3,0.8,0.5,1.3,0.7c0.5,0.2,1,0.5,1.6,0.7c0.7,0.3,1.4,0.6,2,0.9c0.6,0.3,1.2,0.6,1.6,1c0.5,0.4,0.8,0.9,1.1,1.4 c0.3,0.6,0.4,1.2,0.4,2.1c0,1.6-0.6,2.8-1.7,3.6s-2.6,1.2-4.5,1.2c-0.7,0-1.3,0-1.9-0.1s-1.1-0.2-1.5-0.3 c-0.4-0.1-0.8-0.3-1.1-0.4c-0.3-0.1-0.5-0.3-0.7-0.4l0.6-1.5c0.2,0.1,0.4,0.2,0.7,0.4c0.3,0.1,0.6,0.3,1,0.4 c0.4,0.1,0.8,0.2,1.3,0.3C638,432.7,638.5,432.7,639.1,432.7z"></path> </g> </g> </g> </svg> </a> </div> <div id="nav"> <div class="nav-toggle"> <a href="#nav" class="nav-toggle__link open"></a> <a href="#" class="nav-toggle__link close"></a> </div> <ul> <li><a href="#" class="active">Nav item</a></li> <li><a href="#">Nav item</a></li> <li><a href="#">Nav item</a></li> </ul> <div class="u-float--right"> <div class="p-notification-signal u-margin--top-small u-margin--right"> <a href="#" class="p-notification-signal__link">3 Notifications</a> </div> <ul class="u-float--right"> <li><a href="#">Nav item</a></li> <li><a href="#">Nav item</a></li> </ul> </div> </div> </nav> </header>
The header is used as a focal point of page title, global controls, tabs and any page status information. Is to be used consistently on all pages, should contain the main page title.
All form controls which are contained in the page header section should be relevant to the entire page.
Avoid using the page header to raise global or local error notifications. Controls in the header shouldn't reflect one specified section on the page.
<div class="page-header"> <div class="wrapper--inner"> <h1 class="page-header__title">MAAS test title</h1> <ul class="tabs"> <li class="tabs__tab is-active"> <a href="" class="tabs__tab-link">Machines</a> </li> <li class="tabs__tab"> <a href="" class="tabs__tab-link">Devices</a> </li> <li class="tabs__tab"> <a href="" class="tabs__tab-link">Controllers</a> </li> </ul> <div class="page-header__controls"> <a class="u-display--inline u-margin--right">1 Selected</a> <div class="button-group button-group--inline"> <a href="" class="button-group__link button--secondary">Actions</a> <ul class="button-group__dropdown"> <li class="button-group__item"> <a href="" class="button-group__item-link">Add hardware</a> </li> <li class="button-group__item"> <a href="" class="button-group__item-link">Remove hardware</a> </li> <li class="button-group__item"> <a href="" class="button-group__item-link">Commission</a> </li> </ul> </div> </div> <div class="page-header__dropdown is-open"> <section class="page-header__section twelve-col u-margin--bottom-none"> <h3 class="page-header__dropdown-title">Add machine</h3> <form class="form form--stack"> <fieldset class="form__fieldset u-margin--bottom-none six-col"> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> </div> </div> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> </div> </div> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> <span class="form__group-remove"></span> </div> </div> </fieldset> <fieldset class="form__fieldset u-margin--bottom-none six-col last-col"> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> </div> </div> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> </div> </div> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> </div> </div> <div class="form__group"> <label for="machine-name" class="form__group-label two-col">Machine name</label> <div class="form__group-input three-col"> <input id="machine-name" placeholder="Choose a machine name (optional)" type="text"> </div> </div> </fieldset> </form> </section> <div class="page-header__section twelve-col u-margin--bottom-none"> <div class="page-header__controls"> <a href="" class="button--base button--inline">Cancel</a> <button class="button--secondary button--inline">Save and add another</button> <button class="button--positive button--inline">Save machine</button> </div> </div> </div> </div> </div>
Alternative form dropdown layout using our inline form styles.
<div class="page-header"> <div class="wrapper--inner"> <h1 class="page-header__title">MAAS test title</h1> <div class="page-header__controls"> <div class="button-group button-group--inline"> <a href="" class="button-group__link button--secondary">Actions</a> <ul class="button-group__dropdown" hidden> <li class="button-group__item"> <a href="" class="button-group__item-link">Add hardware</a> </li> <li class="button-group__item"> <a href="" class="button-group__item-link">Remove hardware</a> </li> <li class="button-group__item"> <a href="" class="button-group__item-link">Commission</a> </li> </ul> </div> </div> <div class="page-header__dropdown is-open"> <div class="page-header__section twelve-col u-margin--bottom-none"> <form class="form form--inline"> <fieldset class="form__fieldset"> <div class="form__group"> <label for="name" class="form__group-label">Name</label> <div class="form__group-input"> <input type="text" id="name" placeholder="Name (optional)"> </div> </div> </fieldset> <p class="page-header__message page-header__message--error">Error</p> <div class="page-header__controls"> <a href="" class="button--base button--inline">Cancel</a> <button class="button--positive button--inline">Save</button> </div> </form> </div> </div> </div> </div>
Feedback examples follow the four styles similar to the flashmessage feedback pattern. Feedback should be used when adding an entity use for confirmation messages, eg. Are you sure you want to delete this item? Or when performing an action from the header, use to provide feedback information for the action
Do not use to provide feedback for an action initiated somewhere else on the page.
<div class="page-header"> <div class="wrapper--inner"> <h1 class="page-header__title">MAAS test title</h1> <div class="page-header__controls"> <div class="button-group button-group--inline"> <a href="" class="button-group__link button--secondary">Actions</a> <ul class="button-group__dropdown" hidden> <li class="button-group__item"> <a href="" class="button-group__item-link">Add hardware</a> </li> <li class="button-group__item"> <a href="" class="button-group__item-link">Remove hardware</a> </li> <li class="button-group__item"> <a href="" class="button-group__item-link">Commission</a> </li> </ul> </div> </div> <div class="page-header__dropdown is-open"> <div class="page-header__section twelve-col u-margin--bottom-none"> <form class="form form--inline"> <fieldset class="form__fieldset"> <div class="form__group"> <label for="name" class="form__group-label">Name</label> <div class="form__group-input"> <input type="text" id="name" placeholder="Name (optional)"> </div> </div> </fieldset> <p class="page-header__message page-header__message--error">Error</p> <div class="page-header__controls"> <a href="" class="button--base button--inline">Cancel</a> <button class="button--positive button--inline">Save</button> </div> </form> </div> </div> </div> </div>
Various system status found within MAAS. Should be used to show the status of the page and a place to indicate the page is loading.
Do not use for the status of individual items of a list in the page.
<p class="page-header__status"> Ready <span class="u-margin--left-small u-text--on"> <i class="icon u-margin--right-tiny icon--power-on"></i>Power on </span> <a href="" class="page-header__status-check">check now</a> </p> <p class="page-header__status"> Ready <span class="u-margin--left-small u-text--error"> <i class="icon u-margin--right-tiny icon--power-error"></i>Power error </span> <a href="" class="page-header__status-check">check now</a> </p> <p class="page-header__status"> Ready <span class="u-margin--left-small u-text--off"> <i class="icon u-margin--right-tiny icon--power-off"></i>Power off </span> <a href="" class="page-header__status-check">check now</a> </p> <p class="page-header__status"> Ready <span class="u-margin--left-small u-text--loading"> <i class="icon u-margin--right-tiny icon--loading u-animation--spin"></i>Loading </span> <a href="" class="page-header__status-check">check now</a> </p>
Editing the page title, only used on node detail pages with in MAAS.
<h1 class="page-header__title"> <span contenteditable="true">undictatorial-evita.ubnt</span> <span class="page-header__title-dot">.</span> <select class="page-header__title-domain"> <option value="0" selected="selected" label="maas">maas</option> <option value="1" label="sample">sample</option><option value="2" label="ubnt">ubnt</option> </select> </h1> <a href="" class="button--base button--inline u-margin--bottom-small">Cancel</a> <a href="" class="button--positive button--inline u-margin--bottom-small">Save</a>
Used as secondary navigation for pages which are too long or require tabbed content.
<header class="page-header u-margin--bottom-none"> <div class="wrapper--inner"> <h1 class="page-header__title">MAAS test title</h1> </div> </header> <div class="page-navigation"> <div class="wrapper--inner"> <nav class="page-navigation__links"> <a href="#" class="page-navigation__link is-active">Secondary nav link 1</a> <a href="#" class="page-navigation__link">Secondary nav link 2</a> <a href="#" class="page-navigation__link">Secondary nav link 3</a> <a href="#" class="page-navigation__link">Secondary nav link 4</a> </nav> </div> </div>
Global or section responses and to be used to inform a user of any alert. Used to show error, warning, information and success messages. Should be placed at the top of the page for page specific messages and in row for section messages.
Do not use for generic form feedback, use any form error handling to show form responses.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis!
Blocked:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis!
Error:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis! Dismiss
Success:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis!
<div class="p-notification"> <p class="p-notification__response"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis! </p> </div> <div class="p-notification--warning"> <p class="p-notification__response"> <span class="p-notification__status">Blocked:</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis! </p> </div> <div class="p-notification--error"> <p class="p-notification__response"> <span class="p-notification__status">Error:</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis! <a href="#" class="p-notification__action">Dismiss</a> </p> </div> <div class="p-notification--success"> <p class="p-notification__response"> <span class="p-notification__status">Success:</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ipsum nemo autem reiciendis nulla tempore natus repudiandae dolorem. Corporis maxime, iure maiores repellat, odit facilis! </p> </div>
Grouped selection of responses. To be used when multiple notifications can be grouped on a page. Using the .is-open
class on the list will hide / show the notification listing. Also setting data-count
on the main repsonse element will show the notification amount.
Do not use for generic form feedback, use any form error handling to show form responses.
Error
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at illo saepe, aspernatur, facilis eligendi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at illo saepe, aspernatur, facilis eligendi!
Consectetur adipisicing elit. Facilis, magnam, voluptate tenetur provident nihil illo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ab, voluptatibus porro, veniam tempora asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ipsam, facilis temporibus harum quae sunt?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus ullam labore nesciunt. Earum, iusto.
Warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at illo saepe, aspernatur, facilis eligendi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at illo saepe, aspernatur, facilis eligendi!
Consectetur adipisicing elit. Facilis, magnam, voluptate tenetur provident nihil illo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ab, voluptatibus porro, veniam tempora asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ipsam, facilis temporibus harum quae sunt?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus ullam labore nesciunt. Earum, iusto.
Success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at illo saepe, aspernatur, facilis eligendi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur at illo saepe, aspernatur, facilis eligendi!
Consectetur adipisicing elit. Facilis, magnam, voluptate tenetur provident nihil illo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ab, voluptatibus porro, veniam tempora asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ipsam, facilis temporibus harum quae sunt?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus ullam labore nesciunt. Earum, iusto.
<div class="p-notification--error p-notification--group"> <p class="p-notification__response"> <span class="p-notification__status" data-count="2">Error</span><i class="icon icon--open"></i> </p> <ul class="p-notification__list is-open"> <li class="p-notification__item"> <p class="p-notification__msg">..</p> <time class="p-notification__date">34m</time> </li> <li class="p-notification__item"> <p class="p-notification__msg">...</p> <time class="p-notification__date">2h</time> </li> </ul> </div> <div class="p-notification--warning p-notification--group"> <p class="p-notification__response"> <span class="p-notification__status" data-count="2">Warning</span><i class="icon icon--open"></i> </p> <ul class="p-notification__list is-open"> <li class="p-notification__item"> <p class="p-notification__msg">..</p> <time class="p-notification__date">34m</time> </li> <li class="p-notification__item"> <p class="p-notification__msg">...</p> <time class="p-notification__date">2h</time> </li> </ul> </div> <div class="p-notification--success p-notification--group"> <p class="p-notification__response"> <span class="p-notification__status" data-count="2">Success</span><i class="icon icon--open"></i> </p> <ul class="p-notification__list is-open"> <li class="p-notification__item"> <p class="p-notification__msg">..</p> <time class="p-notification__date">34m</time> </li> <li class="p-notification__item"> <p class="p-notification__msg">...</p> <time class="p-notification__date">2h</time> </li> </ul> </div>
Global search style, used on listing pages or to filter content such as system logs in a table. Should accompany pages which contain large tables of listing data. Searching should filter any content on the page. Consistantly should be placed at the top of the page under a page header section.
Avoid using for system wide page search and do not carry the text of a local/ section search field to other pages.
<div class="search"> <input placeholder="Search..." class="search__input" type="search"> <input class="search__submit" type="submit"> </div>
Clear style used on the submit button of the global search. Should be visible when a single character has been entered to the global search and clears all content when clicked.
Avoid using this style with generic form controls.
<div class="search"> <input placeholder="Search..." class="search__input" type="search"> <input class="search__submit search__submit--close" type="submit"> </div>
Disabled state of the global search. Use when global search functions don’t need to be active and if another primary action is in progress disable the global search.
Only use the disabled state when required and not as a form response or to take focus away from the input.
<div class="search"> <input placeholder="Search..." class="search__input" type="search" disabled="disabled"> <input class="search__submit" type="submit"> </div>
Side bar accordion, used in listing pages or as navigation. Can hold multiple navigation items or to be used as a filter of content. Use to hold filtering items (header and content if available).
Do not use to display page content.
<div class="accordion three-col"> <h3 class="accordion__title">Filter by</h3> <div class="accordion__tab"> <h4 class="accordion__tab-title">Lorem</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> <div class="accordion__tab"> <h4 class="accordion__tab-title is-active">Ipsum</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item is-active"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> <div class="accordion__tab"> <h4 class="accordion__tab-title">Dolor</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> <div class="accordion__tab"> <h4 class="accordion__tab-title">Sit amet</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> </div>
Using .is-disabled
will leave the accordion unuseable. If a primary action is in progress disable the filtering accordion.
<div class="accordion is-disabled three-col"> <h3 class="accordion__title">Filter by</h3> <div class="accordion__tab"> <h4 class="accordion__tab-title">Lorem</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> <div class="accordion__tab"> <h4 class="accordion__tab-title is-active">Ipsum</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item is-active"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> <div class="accordion__tab"> <h4 class="accordion__tab-title">Dolor</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> <div class="accordion__tab"> <h4 class="accordion__tab-title">Sit amet</h4> <div class="accordion__tab-content"> <ul class="accordion__tab-list"> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Lorem ipsum dolor</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Sit amet</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Consectetur</a> </li> <li class="accordion__tab-item"> <a class="accordion__tab-link" href="">Adipisicing elit</a> </li> </ul> </div> </div> </div>
Similar style as the page header dropdown, to be used for in page actions or as an important form container.
Do not use outside of a container, such as a table, header etc.
<div class="action-card"> <h2 class="action-card__title">Add rack controller</h2> <form class="form form--inline"> <div class="form__group u-margin--right"> <label class="u-margin--right-small" for="node-list">Select a ready node</label> <select name="node-list" id="node-list"> <option value="" disabled="disabled" selected="selected">Select</option> <option value="1">Snowwhite</option> <option value="2">Pocahontas</option> <option value="3">Yasmin</option> <option value="4">(4 more)</option> </select> <label class="u-margin--left-small">or go to <a href="#">Node listing</a> to view all ready machines</label> </div> <div class="action-card__controls"> <div class="u-float--right"> <button class="button--base button--inline">Cancel</button> <button type="submit" class="button--positive button--inline">Provision</button> </div> </div> </form> </div>
Login pattern to be used for user login and logout.
Login to continue to ubuntu MAAS
<div class="action-card action-card--login"> <h1 class="action-card__title">Welcome</h1> <p class="u-text--subtle u-border--bottom u-border--dotted u-padding--bottom u-margin--bottom">Login to continue to ubuntu MAAS</p> <form class="form"> <div class="form__group"> <label for="id_username"> Username <span>(required)</span> </label> <div class="form__group-input"> <input id="id_username" maxlength="254" name="username" placeholder="Enter username" type="text"> </div> </div> <div class="form__group"> <label for="id_password"> Password <span>(required)</span> </label> <div class="form__group-input"> <input id="id_password" maxlength="254" name="password" placeholder="Enter password" type="text"> </div> </div> <button type="submit" class="button--positive">Login</button> </form> </div>
Meter element is to be used for showing how full / empty a value can be. For example in MAAS it is used to show how many cores or memory is in current use.
Do not use as a progress bar or to show over all completeness of a task.
0% 100%
<meter max="500" value="350">350 degrees</meter>
Ultiity class to add a border to an element or a set direction border.
.u-border--top
.u-border--right
.u-border--bottom
.u-border--left
<div class="u-border--top"></div> <div class="u-border--right"></div> <div class="u-border--bottom"></div> <div class="u-border--left"></div>
Removes any border off an element or pattern. Can remove all four borders or a set direction.
.u-border--top-none
.u-border--right-none
.u-border--bottom-none
.u-border--left-none
.u-border--none
<div class="u-border--top-none"></div> <div class="u-border--right-none"></div> <div class="u-border--bottom-none"></div> <div class="u-border--left-none"></div> <div class="u-border--none"></div>
Applies dotted, solid or dashed border styles.
.u-border--dotted
.u-border--solid
.u-border--dashed
<div class="u-border--dotted"></div> <div class="u-border--solid"></div> <div class="u-border--dashed"></div>
Used to move a block element to the left, right or remove their position completely.
.u-float--left
.u-float--right
<div class="u-float--left"></div> <div class="u-float--right"></div> <div class="u-float--none"></div>
Sets display to the element or hides it completely.
<div class="u-display--block"></div> <div class="u-display--inline"></div> <div class="u-display--inline-block"></div> <div class="u-display--hidden"></div>
When child elements are floated, their parent element will collapse. To expand the parent again, you must clear those floats with a clearfix.
<div class="u-clearfix"></div>
Layout styles to set an absolute divisible width on to an element. This does not follow the grid and guttering layout.
.u-width--full
.u-width--half
.u-width--half
.u-width--third
.u-width--third
.u-width--third
.u-width--quarter
.u-width--quarter
.u-width--quarter
.u-width--quarter
<div class="u-width--full"></div> <div class="u-width--half"></div> <div class="u-width--third"></div> <div class="u-width--quarter"></div>
Colour states to be used for important text or responses.
.u-text--error
.u-text--success
.u-text--information
.u-text--warning
.u-text--subtle
<div class="u-text--error">...</div> <div class="u-text--success">...</div> <div class="u-text--information">...</div> <div class="u-text--warning">...</div> <div class="u-text--subtle">...</div>
Colour borders to be used to focus on an important area of content or used in application responses.
.u-border--error
.u-border--success
.u-border--information
.u-border--warning
<div class="u-border--error">...</div> <div class="u-border--success">...</div> <div class="u-border--information">...</div> <div class="u-border--warning">...</div>
Used to focus on an important area of content or used in application responses.
.u-background--error
.u-background--success
.u-background--information
.u-background--warning
<div class="u-background--error">...</div> <div class="u-background--success">...</div> <div class="u-background--information">...</div> <div class="u-background--warning">...</div>
Animation styles to be used on any element for interaction or asethetic reasons. Mainly used for the loading spinner icon within MAAS.
.u-animation--spin
.u-animation--pulse
<div class="u-animation--spin">...</div> <div class="u-animation--pulse">...</div>