Components

Accordions
Expandable and collapsible, stacked headings that when clicked reveal content related to the heading.

Alberta signature logo
How to display the Government of Alberta (GoA) signature logo.

Buttons
Provides a linked, visual aid for important actions.

Callouts
Colour coded text boxes used to alert people to events, important changes, urgent notices, and emergencies.

Captions
Text box that describes or conveys the subject matter of an image, chart or table.

Cards
A linked, rectangular container that facilitates navigation.

Checkboxes
An input field allowing for multiple selections from a small list of options.

Colour palette
How to apply the accessible, brand-derived colour palette from the Government of Alberta colour standards.

Dividers
Thin lines used to separate blocks of content.

Drop down list
A field that allows you to select one option from a large list of hidden options.

Galleries
Visual-centric component to display multiple photos in one interactive space on a page.

Hero banner
A decorative component on a marketing page where the page title and lead sentence are visible over a large image.

Icons
A list of guidelines and references for icons used in specific user interface elements.

Images
Aspect ratios, size requirements and writing guidelines for images.

Links
A hierarchy of actions provided by buttons and various styles for in-page hyperlinks.

Notification banner
Site-wide messaging with a strong, visual emphasis about important changes or facts the public need to know.

Pagination
Pagination allows you to scroll through multiple pages or screens, as part of a related set.

Radio buttons
Input field allowing for a single selection from a small list of options commonly found in a form.

Social links
The social share component allows you to share a page through one of the Government of Alberta’s social media channels.

Spotlight panels
Highlight a featured page using a large image and overlaid heading.

Tables
A structured arrangement of detailed alphanumeric data in rows and columns.

Typography
How to use the standard Government of Alberta (GoA) typeface for all public websites and applications.