Context-specific features - Canada.ca design pattern
Context-specific features are in-page components used to promote government activities, initiatives, programs and services.
When to use this pattern
- Use this component to promote government activities, initiatives, programs and services that are relevant to the page on which they appear
- Do not use this component to promote activities and initiatives that are not relevant to their context
- Do not use this component when a person's flow must not be interrupted, as in a transactional process
- Do not duplicate content or links from other components on the page
How to use this pattern
- Context-specific features always comprise a link and an image, with optional header and description text
- On navigation templates (such as theme or topic pages), use 2 or 3 features side-by-side, with each link placed above the image and the description placed underneath the image
- On destination templates (such as generic pages), limit use to a single feature with the image placed to the left of the link and description
- On navigation pages, always use a header. The default wording for this block is “Features.” Use more specific headings where possible to provide stronger context for a person
- On destination pages, use of a header is optional. When using a header, always use a specific wording to provide context
- Position context-specific features after the main content of the page, but before the footer section
- Use a maximum of 40 characters for the hyperlink text
- When applying images in contextual features, follow specifications in the images pattern
- Keep the description text short and concise
- 1 or 2 lines is ideal
- do not exceed 3 lines of text (which works out to approximately 145 characters with spaces)
- The description link text and header must be different
- do not repeat multi-word phrases in any of the header, link or description text
- Use the defined presentation classes included in the Canada.ca WET theme
- For image sizing details, consult the Canada.ca GitHub page
Working example
Destination page example with a single feature

Navigation page example with three features

- Date modified: