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


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.


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.


Charts


Chart one
Chart two
Chart three
Chart one


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

Forms


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

Juicer

Juicer is a social media feed.

We recommend the medium pricing level which allows your team to moderate posts.

It is the responsibility of your department to create an account, pay for the membership, and moderate posts.


    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

    Stanley Park to temporarily close overnight due to extreme fire risk

    July 30 2021 - The Vancouver Board of Parks and Recreation will be temporarily closing Stanley Park from 10pm to 6am due to extreme fire risk.

    City and Park Board activating additional heat safety measures in response to Environment Canada heat warning

    July 28 2021 - We're putting additional measures in place as part of our heat response plan following the heat warning issued by Environment Canada.

    Vancouver’s urban forest to receive urgent relief from drought conditions

    July 23 2021 - Street and park trees will get some drought relief as emergency watering measures go into effect today to mitigate the impact of the summer heat.

    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


    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

    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

    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


    Quizzes


    Responsive iframes

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

    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  


    Slidescreens

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

    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

    Slides slideshows


    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


    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

    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

    Text blocks

    • Can be one-third, one-half, two-thirds, or full width
    • Include a styled header and content

    Two-thirds width text block

    We’re taking City Hall on the road

    Pop-Up City Hall brings City services directly to people and communities that have trouble accessing in-person City services.


    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

    Interactive timeline 1

    Interactive timeline 2, by Tiki-Toki


    Twitter feeds