UI Components
Overview
Shared UI
This section lists core UI components and patterns that can be shared across all websites. .
Libraries and frameworks
Where possible related code libraries, front end frameworks, and documentation are referenced.
A-Z Components
Ask Auckland
The Ask Auckland component in its various forms, including the expanded “Support/do you need help” variant.
Breadcrumbs
Breadcrumbs help users understand their location and navigate back through the site hierarchy.
Buttons
Buttons provide clear, actionable triggers for user tasks.
Cards
Cards are used to present content in digestible, scannable blocks.
Errors
Errors allow us to communicate issues clearly and guide users to resolution (including form validation, feedback and alerts, and pages).
Filters
Filters enable users to refine results and find relevant content quickly.
Footers
Footers offer consistent access to essential links and information.
Headers
Headers establish structure, brand and identity, and provide global navigation.
Icons
Icons are graphic devices used to convey meaning quickly with compact visual cues.
Image gallery
The image gallery component is used to showcase visual content in an organized, engaging way.
Modals
Modals capture focused user attention for critical tasks or messages.
Notifications
Notification components are used to deliver timely updates or feedback without disrupting flow.
Pagination
Pagination breaks content into manageable chunks for easier navigation.
Personal toolbar
Centralises access to user-specific tools and actions.
Pop ups
Pop ups are used to highlight key information or processes without leaving the page.
Progress bar
Progress bars are used to visualize task completion and reduce uncertainty.
Sign in
Provide a smooth entry to personalized or secure experiences.
Search
Put users in control to find exactly what they need fast. Includes autocomplete and autosuggestion, and search results. Related components include filters, facets and pagination.
Spinners
Spinners are used to provide feedback to the user, letting them no the system is working.
Table
Tables organize and present data for easy reading and comparison.
Tabs
Tabs are utilised to group related content while saving space and reducing clutter.
Video
Embedded video component.
Frontend web components
The Uoa frontend web components library provides a range of UI controls that work in any major framework.
Find out more
Can’t find what you’re looking for? Get in touch