AUI - AUI Examples

Intro

This page is a set of examples to quickly identify the component you need and give links to further information. Note that the Atlassian Design Guidelines pages are created with AUI and serve as further examples; and all components are documented in the AUI Developer Guide.

Note this page is created using the AUI Page Suite: the typography, header, content area and footer are all supplied by Page.

Avatars

Design Rules

Badges

Small pieces of extra information within components like Navigation, eg. a count: 42

Documentation

Buttons

AUI Buttons cover combinations of free standing, grouped, disabled and toggled buttons:

Sets of grouped buttons can be contained in Toolbar2 for a complete toolbar.

Dropdown2

Shipmates The Crimson Short One

Red Dwarf
Low Red Dwarf
High Red Dwarf
Nanobot Red Dwarf

Support Ships

Starbug
Blue Midget
White Giant

Other Ships

Wildfire
SSS Esperanto
Nova 5

Documentation

If you're working with an existing implementation you might encounter the old dropdown as well...

Don't make new ones, but you'll still find this workhorse around the place.

Documentation

Dialogs

Modal dialog:

Forms

Available in several flavours including compact top-label style, long-label and short-label:

Icons

Examples (small):

ViewConfigureAddHelpSearchSuccessWorkbox

Examples (large):

ViewConfigureAddHelpSearchSuccessWorkbox

For the full set of icons and sizes, refer to the docs.

Inline Dialogs

If you don't need a full modal Dialog, you you can use an Inline Dialog: something inline

Layout (Group + Item)

Evenly spaced item

Split group - first item aligned left.

Split group - second item aligned right.

Trio group - first item aligned left.

Trio group - second item aligned centre.

Trio group - third item aligned right.

Keyboard Shortcuts (WhenIType)

WhenIType allows you to trigger various events based on keyboard input. For example, Type "z" then "e" to execute some simple JavaScript.

Labels

AUI provides a CSS-only Label component - each product's implementation is expected to be different, so no default JS is provided.

unclickableUncloseableclickableclosableNoUrl(remove closableNoUrl)splitLabel(remove splitLabel)

Lozenges

Standard and Subtle variations:

default success error current complete moved

Messages

This is a generic message.

It is pitch black. You are likely to be eaten by a grue.

It's dangerous to go alone

Here, take this.

Woah! Something went wrong!

The savepoints are really far apart in this level.

Thank you Mario!

But the Princess is in another castle.

We'll give you a hint to avoid that problem next time.

But first you have to catch the Help Cat with that stupid Wiimote.

Multi-step Progress Tracker

Step One
Step Two
Step Three
Step Four
Step Five

AUI has a core set of navigation elements, which are most commonly used in Horizontal and Vertical navgroups.

Should be placed immediately before .aui-page-panel

Usually placed inside an .aui-page-panel-nav but will expand horizontally to fit any appropriate container element.

Page Header