Help?

Looked through the pattern library and found nothing suitable?

User Interface Pattern Library

Pattern Library showcases building blocks for rapid website production within the University of Adelaide Web Templates.

User Interface design patterns and associated HTML code snippets has been tested to work across multiple supported browsers and enhancements are ongoing, for further information see support.

The UI patterns are designed to be used in consultation with one of the
Online Consultants from our Web Team, Marketing & Communications.
Any enquires please don't hesitate to contact the team.

Search for UI Patterns

Links A to Z
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- O
- P
- Q
- R
- S
- T
- U
- V
- W
- X
- Y
- Z
- A
  - Accordion
  - A-Z List
- B
  - Buttons
- C
  - Captions
- D
  - Dual Columns
  - Degree-Finder Search
  - Description Panels
- E
- F
  - Featured Content
  - Forms
- G
  - Image Gallery
- H
  - Heading Styles
- I
  - Images
  - Image Gallery
  - Introductory Paragraph
- J
- K
- L
  - Link List
  - Livestream
- M
- N
- O
- P
  - Page Share Toolbar
  - Pods
  - Promo Panels
  - Page Include
  - Pop-Up Images
- Q
  - Quicklinks
- R
  - RSS Feed
- S
  - Content Slider
  - Social Media/Page Share Toolbar
- T
  - Tables
  - Page Tabs
  - Small Page Tabs
  - Tooltips
  - Typography
- U
- V
- W
  - Widget
  - Floating Widget
  - Profile Widget
  - Media Widget
  - Mixed Widget
  - Combo Widget
  - News Widget
  - EventsWidget
- X
- Y
- Z

What is a Pattern Library?

User Interface Design patterns are recurring solutions that solve common design problems. A pattern library or front end style guide is a collection of commonly used User Interface patterns or Interface elements (UI). These elements form the basic presentation level of web content.

Examples of these are: Page Tabs, Accordions, Widgets, Buttons.

Why?

Standardisation of UI pattern library. UI patterns have been developed as a consistent library of UI designed to be reused globally in multiple instances across multiple sites.

How do I Use Pattern Library?

Simple!

Find the pattern that you like (ensure you are using Firefox or Chrome - Firefox is best)
Then click on the [Show Source] link and double-click the code to highlight it
Copy that, and then either paste it into the page you are editing (via the 'HTML' icon in TMS), or into the 'code' view in Dreamweaver.

Support

UoA Pattern Library UI patterns have been built to work with the University's Content Management System (TMS) and designed primarily for use on external facing public websites. If you require access to web branding elements for other University Systems please contact us to discuss your requirements.

UI patterns has been tested and supports rendering in the following browsers:
Internet Explorer 7.0, Firefox 3.6+, Google Chrome.

Authorised by:	Chief Marketing Officer, Marketing & Communications
Maintained by:	Marketing & Communications