About Vancouver
This is a landing image. Image standard is 670px by 250-360px, 72 dpi.

Formatting styles, modules, and third-party tools used on vancouver.ca

Contents

  1. Alerts and notices
  2. Text formatting
  3. Buttons
  4. Card panels discontinued
  5. Charts
  6. Content blocks
  7. Forms
  8. Gap filler
  9. Juicer
  10. Lists
  11. Number counters
  12. Progressive disclosure sets
  13. Pull quotes
  14. Quizzes
  15. Responsive iframes
  16. Shape Your City call to action
  17. Slidescreens
  18. Slideshows
  19. Subscription forms
  20. Summary block
  21. Tables
  22. Tab sets discontinued
  23. Text block discontinued
  24. Timelines
  25. Twitter feeds

Alerts and notices

We use alerts and notices on the homepage and on content pages to emphasize important information by visually distinguishing it from other content.

Notes

Notes call-out important guidance, restrictions, service interruptions, or advice to users that might be overlooked.

Cautions

Cautions tell users about incomplete actions, potential hazards, errors, or irreversible data loss, and how to avoid them.

Warnings

Warnings tell users about the potential extreme hazards and lethal situations, and how to avoid them.

Back to top

Text formatting (headings, links, bold, italic, ordered lists, unordered lists, and image alignment in paragraphs)

 

Heading 1 – used for page titles

With its scenic views, mild climate, and friendly people, Vancouver is known around the world as both a popular tourist attraction and one of the best places to live.

Vancouver is also one of the most ethnically and linguistically diverse cities in Canada with 52 percent of the population speaking a first language other than English.

Heading 2 – used in the page body, in hierarchical order

An Indigenous settlement called Xwméthkwyiem, (“Musqueam,” from masqui, “an edible grass that grows in the sea”), near the mouth of the Fraser River, was present here at least 3,000 years ago.

At the time of first European contact in the late 18th century, the Musqueam and Squamish peoples had villages around present-day Vancouver, along with the Tsleil-Waututh, ancestors of today's Burrard Band in North Vancouver.

They were all Coast Salish First Nations, sharing cultural and language traits with people in the Fraser Valley and Northern Washington.

Heading 3

Vancouver has a moderate, oceanic climate. Protected by the mountains and warmed by the Pacific ocean currents, Vancouver is one of the warmest cities in Canada.

Although Vancouver has a reputation for rain, it actually ranks as the 9th rainiest location in Canada with Prince Rupert, Port Alberni, Chilliwack, Abbotsford, Campbell River, Halifax, Sydney, and St. John's beating Vancouver for average yearly rainfall.

Heading 4

Vancouver's wettest months are November and December with an average precipitation of 182mm. And - with an average of just 41mm of precipitation - July and August are the driest months in Vancouver.

 

Links, bold, and italic

This is a link to an internal webpage, an internal document (3 MB), and an external webpage .

This text is marked in italics for low emphasis – use sparingly.

This text has an important note icon for medium emphasis – use sparingly.

This text has an important information icon for medium emphasis – use sparingly.

This text is marked bold for even high emphasis – use sparingly.

This subscript text appears half a character below the baseline, while this superscript text appears half a character above. Both are rendered in a smaller font.

Ordered and unordered lists

Ordered numeric list

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4

Ordered alphabetical list, lowercase

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Ordered alphabetical list, uppercase

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Unordered lists

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

 

Image alignment in paragraphs

Clouds and sunny skies over Vancouver and Burrard Inlet, looking from Spanish Banks

The image in this paragraph uses the right class to position on the right with the text wrapping. In the source view, add class="right" inside the img tag.

Vancouver has a moderate, oceanic climate. Protected by the mountains and warmed by the Pacific ocean currents, Vancouver is one of the warmest cities in Canada.

Although Vancouver has a reputation for rain, it actually ranks as the 9th rainiest location in Canada with Prince Rupert, Port Alberni, Chilliwack, Abbotsford, Campbell River, Halifax, Sydney, and St. John's beating Vancouver for average yearly rainfall.

 

Clouds and sunny skies over Vancouver and Burrard Inlet, looking from Spanish BanksThe image in this paragraph uses the left class to position on the left with the text wrapping. In the source view, add class="left" inside the img tag.

Vancouver has a moderate, oceanic climate. Protected by the mountains and warmed by the Pacific ocean currents, Vancouver is one of the warmest cities in Canada.

Although Vancouver has a reputation for rain, it actually ranks as the 9th rainiest location in Canada with Prince Rupert, Port Alberni, Chilliwack, Abbotsford, Campbell River, Halifax, Sydney, and St. John's beating Vancouver for average yearly rainfall.

Back to top

Buttons

This button uses the blue-button class.

View the calendar of events

External link

Link to document (3 MB)

Transactional/payment link

Back to top

Charts


​
Chart one
Chart two
Chart three
Chart one

Back to top

Content blocks

Content blocks organize page body content of varying priorities, with special consideration to the content purpose - to transact, engage, and inform.

Optional

Option to add a block grey background, blue border, or grey border block to wrap at the side.

​​​​​​​Plain content block

  • Can be one-third, one-half, two-thirds, or full width
  • Include a styled header and content
  • Optional: icon on left or right, can flow around other blocks

Use for:

  • Information content
    • Learn about something
    • Find locations, hours, documents
  • Low-priority content

What's happeningBlue background content block

High-priority content

  • Can be two-thirds or full width
  • Include a styled header and content
  • Optional: "what's happening?" label for project-related content
  • No images

Use for:

  • Transaction content with a CTA
    • Pay / payment-related
    • Register
    • Donate
  • Engagement content

Add a button

Grey background content block

  • Can be one-third, one-half, two-thirds, or full width
  • Optional: icon on left or right

Use for:

  • Transaction content
    • Download
    • Report an issue
  • Information content
    • Deadlines
    • Shift behaviour
  • Engagement content
    • Contact information
    • Social media
    • Watch

Blue border content block

  • Can be one-third, one-half, two-thirds, or full width
  • Optional: icon for emphasis, positioned left or right

​​​​​​​Use for:

  • Transaction content with a CTA
    • Payment-related
    • Download
  • Information content
    • Use cases TBD
  • Engagement content with a CTA
    • Subscribe (not a content block but listed here for reference)

Grey border content block

  • Can be one-third, one-half, two-thirds, or full width
  • Optional: icon on left or right

Use for: 

  • Information content
    • Learn about something related

Back to top

Forms

Back to top

Gap filler

Used to balance out white space.

  • Can be one-third or two-thirds
  • Can be a sketch of a harbour, city scape, or house

Formatting styles, modules, and third-party tools used on vancouver.ca

Formatting styles, modules, and third-party tools used on vancouver.ca

Formatting styles, modules, and third-party tools used on vancouver.ca

Formatting styles, modules, and third-party tools used on vancouver.ca

Back to top

Lists

  • Display a set of links to specified page or documents (and include metadata like titles, descriptions, and images)

Event minilists

  • Display a specified quantity of upcoming events (either all events or ones tagged with specified keywords)
  • Can link to the event calendar to view additional events beyond the quantity in the list
  • Can be one-third, one-half, two-thirds, or full width
  • Include:
    • Header
    • Event name – from the event page's metadata
    • Event date and time – metadata

This event minilist is one-half width

Feature image lists

  • Can be one-third, one-half, two-thirds, or full width
  • Can be tagged with a keyword to aggregate pages, like news topics
  • Include:
    • Header
    • Feature image – from the connected page's metata
    • Page title – metadata
    • Page description – metadata

Half-width feature image list

Stanley Park Cycling Plan

We're improving cycling facilities in Stanley Park to make it safer for everyone.

Half-width list of Park Board news

Tails and tales: The Canine Library returns to John Hendry Park

September 5 2024 - The Park Board and the Public Library invite you to the 5th annual Canine Library on September 21, 2024, at Trout Lake Park.

Join the Vancouver Park Board and Roundhouse Community Arts and Recreation Centre for ‘Field Guides’

September 5 2024 - Field Guides runs from Sept 27 to Oct 6, showcasing work of artists and cultural facilitators from the Fieldhouse Activation Project.

Stanley Park to see traffic impacts in September from events and projects

August 30 2024 - Stanley Park will host a series of large-scale events in addition to operational activities that will result in traffic impacts in the park.

Large icon lists

  • Are one-third, two-thirds, and full-width
  • Include:
    • Optional large icon image – from the connected page's metadata
    • Page title – metadata
      • Maximum 3 lines
      • Character count: No limits for full-size, 80-100 for 2/3, 40-60 for 1/3 width
    • Page description – metadata
      • Maximum 8 lines
      • Character count: 145

Finding rental housing

Resources for finding rental housing in Vancouver and identifying rental properties with health or safety issues.

Supportive housing

Supportive housing is affordable housing that provides a range of on-site supports to its residents.

Homelessness services

Find details on supportive housing, shelters, financial aid, low-cost meals, and more.

Simple lists

  • Can be one-third, one-half, two-thirds, or full width
  • Include:
    • Header
    • Page title – from the connected page's metadata
    • Optional page description – metadata

Simple list of only page titles

Stanley Park Cycling Plan


Back to top

Number counters

  • Are one-third width
  • Displays a number that, on page load, quickly counts up towards a specified amount
  • Include:
Text before number
Text after number

 

Back to top

Progressive disclosure sets (accordions)

  • Collapse content to help people quickly scan headings and then expand the one that applies
  • Include:
    • An introduction
    • One or more sections, each with a summary and detail

Back to top

Pull quotes

  • Can be left, middle, and right aligned
  • Can be styled with a line on the left side, a line above and below, or large quotation marks
  • Can be hidden on mobile
  • Contain 180 characters or less

Pull quotes emphasize key points

Back to top

Responsive iframes

  • Can embed YouTube videos, Vimeo videos, Google maps, and more
  • Flex the embedded content to match the screen width

Video with text wrapped

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to top

Shape Your City CTA

Link to Shape Your City project pages.

Review Public Engagement's Shape Your City user guide for more details on project pages.

What's happeningShape Your City CTA

Learn more about the Jericho Lands planning program and share your feedback on the planning and engagement process.

Get involved on
Shape Your City  

Back to top

Slidescreens

  • Can be oriented horizontally or vertically
  • Include:
    • Before and after image
    • Optional content before the slidescreen
before-sample after-sample

Back to top

Slideshows

Quiet.ly slideshows

 

2015 Book Award winner and finalists

By City of Vancouver

The 2015 shortlist covers a range of genres: non-fiction, short stories, poetry, and a children’s book. The short-listed books create a street-level walk through our city to amplify our pride and understanding of the flawed and beautiful, young but wise city we inhabit.

  • Wayde Compton, Winner

    By City of Vancouver

    The Outer Harbour | Arsenal Pulp Press | This collection of short stories is a creative manifesto for a radical change in Vancouver’s attitude to its marginalized citizens and land use to avert a crash-course with a dystopic, very-near future. Borrow this book from the library.

  • Bren Simmers, Finalist

    By City of Vancouver

    Hastings-Sunrise | Nightwood Editions | This book-length poem is a whimsical, yet political collection which balances vibrancy and eccentricity against the anxiety and despair of living amidst an affordability crisis in East Vancouver. Borrow this book from the library.

  • Aaron Chapman, Finalist

    By City of Vancouver

    Live at the Commodore | Arsenal Pulp Press | This work of non-fiction is an homage to the “Fabulous Commodore Ballroom,” a music venue which for 85 years has served as a cultural barometer for Vancouver. Borrow this book from the library.

  • Lois Simmie and Cynthia Nugent, Finalists

    By City of Vancouver

    Mister Got To Go, Where are you? | Red Deer Press | Author: Lois Simmie (top left). Illustrator: Cynthia Nugent (lower left) | This children’s book is the third in a lovingly written and illustrated Vancouver-based series featuring an impromptu journey by the iconic cat from the Sylvia Hotel. Borrow this book from the library.

  • Thank you to the jury

    By City of Vancouver

    We thank the independent jury for the months taken to read nominated titles and select the shortlist and winner. The 2015 jury included: Anna Ling Kaye (editor of Ricepaper Magazine and 2015 Journey Prize Anthology author), Zoey Leigh Peterson (novelist and librarian), and Sirish Rao (Artistic Director and Co-Founder of the Indian Summer Festival).

 

What's in the Mayors' Plan for Vancouver?

By City of Vancouver

Vancouver will welcome 170,000 more residents and 120,000 new jobs by 2045. The Mayors' Plan tackles unreliable commute times and overcrowding now, then grows with us for the future.

  • More accessible service

    By City of Vancouver

    80 per cent more NightBus service and 30 per cent more HandyDART service.

  • New SkyTrain rail cars

    By City of Vancouver

    220 new SkyTrain rail cars for 50 per cent more service on the SkyTrain system. 

  • More bus service

    By City of Vancouver

    25 per cent more bus service, including West 4th Avenue, Southeast Marine Drive, and Kingsway.

  • More B-Line

    By City of Vancouver

    5 new B-Line rapid bus routes. 

  • Seabus service

    By City of Vancouver

    Service every 10 minutes during rush hour and every 15 minutes at all other times.

  • Road improvements

    By City of Vancouver

    Upgrades to quadruple investment in regional road improvements over the next 10 years.

 

Vancouver's 28 wild places

By City of Vancouver

 

  • Stanley Park forest

    By City of Vancouver

    Contains some of the oldest trees in Fraser Lowland; isolated old trees occur elsewhere

  • Fraserview Golf Course

    By City of Vancouver

    Substantial area of older, mixed forest; fragmented by golf course use 

  • Stanley Park shoreline

    By City of Vancouver

    Diverse, rocky intertidal and subtidal zone; important for overwintering seaducks

  • Spanish Bank

    By City of Vancouver

    Large, intertidal sand flat fed by bluff erosion; important for fish and shorebirds

  • Everett Crowley and Captain Cook parks

    By City of Vancouver

    Large area of deciduous forest and open meadows and shrublands in southeast Vancouver

  • Musqueam Marsh

    By City of Vancouver

    Largest estuarine marsh in Vancouver; productive fish habitat

  • Musqueam Park and Creek

    By City of Vancouver

    Vancouver's healthiest remaining stream; supports salmon and trout

  • Jericho forest

    By City of Vancouver

    Large area of maturing deciduous forest

  • Lost Lagoon

    By City of Vancouver

    Largest freshwater body in Vancouver; tidal until 1917 causeway construction

  • Pacific Spirit Regional Park

    By City of Vancouver

    Largest natural area in Point Grey peninsula

  • Kitsilano shoreline

    By City of Vancouver

    Diverse, rocky intertidal and subtidal zone; low recreation use

  • Renfrew Ravine

    By City of Vancouver

    Remnant forested ravine with open stream

  • Beaver Lake

    By City of Vancouver

    Important freshwater wetland in Stanley Park; rapidly infilling with sediment

  • Trout Lake

    By City of Vancouver

    Important lake and wetland in east Vancouver; remnant shore bog on east side

  • VanDusen forest

    By City of Vancouver

    Mix of native forest, planted trees, ponds, and gardens in western side of botanical garden

  • Fraser River Park wetland

    By City of Vancouver

    Constructed intertidal slough and wetlands provides a range of habitats

  • Sanctuary Pond in Hastings Park

    By City of Vancouver

    Constructed small lake recognized for bird diversity; constructed in 1999

  • Jericho Park wetland

    By City of Vancouver

    Freshwater wetlands with rich bird and invertebrate diversity

  • Second Narrows escarpment forest

    By City of Vancouver

    Band of mixed forest east of the Second Narrows Bridge; connects to Burnaby

  • Queen Elizabeth Park forest

    By City of Vancouver

    Maturing native conifers within the developed gardens; important for migrating songbirds

  • Vanier forest

    By City of Vancouver

    Prominent patch of red alder and black cottonwood forest adjacent to the Burrard St Bridge

  • Southlands foreshore

    By City of Vancouver

    Created intertidal marsh and adjacent riparian area along the Southlands Trail

  • Still Creek riparian corridor

    By City of Vancouver

    Narrow and fragmented stream corridor that is partially restored

  • Stanley Park bluff

    By City of Vancouver

    Unique rock bluffs on northern edge of park including Prospect Point

  • Langara Golf Course pond

    By City of Vancouver

    Large created pond or small lake that is important for waterfowl and other birds

  • Burnaby shoal

    By City of Vancouver

    Shallow subtidal area east of Brockton Point

  • Hinge Park

    By City of Vancouver

    Constructed wetland, riparian zone, island, and intertidal areas adjacent to Olympic Village

  • Avalon Pond

    By City of Vancouver

    Large freshwater wetland in Everett Crowley Park; doubled in size in 2010

Back to top

Subscription forms

  • Can be one-third, one-half, two-thirds, or full width
  • Can be left and right aligned
  • Include:
    • Header
    • One or more mailing lists
    • Optional sample newsletters
    • Optional content above and below the form

Get updates

* Indicates required fields

View Privacy Policy

Back to top

Summary block

Summarizes the most important points the user should know at the top of the page.

Provides jump links to help the user navigate within the page.

What you need to know

The Pacific Great Blue Herons are back for the 20th consecutive year. 

  • Watch the herons
  • How to use Heron Cam
  • Help support the heron colony

Back to top

Tables

2-column table

Header Header
Data Data
Data Data
Data Data

3-column table with collapse class that reorganizes on smaller screens

Header (see note 1) Header (see note 2) Header (see note 2)
Data Data Data
Data Data Data
Data Data Data

Notes

  1. 50% width on desktop
  2. 25% width on desktop

3-column table with collapse-no-header class that reorganizes and hides headers on smaller screens

Header Header Header
Data Data Data
Data Data Data
Data Data Data

Back to top

Back to top

Timelines

Static timeline beta version

  • Show the status and progress of a project
  • Are coded in HTML in an ASCII module

  • Mar 2016

    Phase 1: guiding principles

    Identify aspirations and concerns that will shape the initial concepts and site options

    • Mar 8 open house
    • Mar 8-20 online questionnaire

  • May 2016

    Phase 2: development concept options

    Identify and evaluate site development options and policy objectives

  • We are here
    • June 18 and 22 open houses
    • May 18-June 12 social impacts online questionnaire

  • Jul 2016

    Phase 3: preferred development concept and draft policy

    Review and refine a preferred development concept and draft set of policies

  • Sep 2016

    Policy Statement considered by City Council

    If adopted, the Policy Statement will guide the subsequent rezoning process

Back to top

Twitter feeds

Back to top