Skip to main content
Pattern Library
(ver. 2)
Menu
Getting started
Introduction
Design principles
Testing and validation
Accessibility
Brand alignment
Visual identity
Guidelines
The City of Calgary visual identifier
CPS visual identifier
Elected officials visual identifier
Web font
Colours
City of Calgary colour palette
CPS colour palette
Safety and metallic palette
Colour accessibility
Structure
Introduction
Grid system
UI elements
Headings
Text
Lists
Loading indicator
Buttons
Images
Tables
Horizontal rules
Background images
Icons and SVG images
Icon font list
Web usage
Usage
Accessibility
SVG image list
Usage
Components
Accordions
Alert banner
Breadcrumbs and navigation links
Block banner
Cards
Card silder
Card set menu
Contact information block
Content block
Usage
CTA-block
Data display widget
Duration block
Footer
Forms
Components
Layout
Accessibility
Validation
Enhanced controls
Form autofill
Example forms
Header
Hero banner
Icon subject layout
Image viewer
Interactive bar chart table
Linear navigation footer
Map
Menus
Modal
Page title block
Pagination
Parallax Banner
Search
Show more/Show less button
Sidebar
Tabs
Text on image
Tooltip
Wordmark
CPS header
CPS footer
Marketing components
Background image block
Text on image
Templates
Web Application Wrapper template
Release log
Release log and feedback
Archive
1.9
1.8
1.7
1.6
1.5
Structure introduction
The Pattern Library utilizes structures to hold UI elements together.
Grid system
