Contact information block

When there is a lot of content on a page, it can take more time for users to sift through it. The contact information block provides a consistent layout and format for contact-type information (address, phone number, features, etc.). Users are able to quickly find, filter or compare location or other data.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Containers


Configure: select the dropdowns below to display the variety of options that a contact information block supports.

Southland Leisure Center

Pool and fitness facility

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

Phone number: 403-555-1234

Hours of operation:

  • Monday - Friday: 7 a.m. - 9 p.m.
  • Saturday: 7 a.m. - 8 p.m.
  • Sunday: 7 a.m. - 6 p.m.
  • Facility closed:
    • Sep. 6 (Labour Day),
    • Dec. 25th (Christmas Day)
    • Dec. 26th (Boxing Day)

Facility features:

  • Wave pool
  • Dive tank
  • Hot tub
  • Steam room
  • Water slides
  • AquaPlay structure
  • Kiddie pool
  • Weights & cardio
  • Fitness studio
  • Gymnasium
  • Squash & racquetball courts
  • Arenas



Responsive preview

Usage best practices

Contact information block can be used as a stand-alone within a page to highlight the information or as a group to show all blocks or compare data.

Consider using contact information block to:

  • display contact-type information (i.e. address, phone number, location features, etc.)
  • help users see and compare a variety of related information or options (i.e. hours, prices, etc.)

Usage examples:

  • facility location
  • rental and booking location
  • service or organization contact information


Use only one call to action link or button per item; ensure that the call to action text is specific (i.e. "Contact Joe" vs. "Contact us").

Place contact information blocks at or near the top of the page, specifically on contact pages.

Use icons consistently across all items, if an icon is used for any item in a column, an icon must also be used for all items in the block.

Use the same layout and display options when using a series of contact information blocks on a page (i.e. same section order, appearance of icons and images, etc.).


Do not replace labels with icons. Icons must only supplement text (i.e. list the Twitter handle next to the Twitter icon).

Do not include too much information. Information should be short and scannable - avoid full sentences.

Do not use an image that is unrelated to the person, place, or organization to be contacted.

Do not overwhelm users with too many contact information blocks to scroll through. Enable pagination or filtering so they can narrow their options and reduce visual congestion.