diff --git a/common-design-patterns/feature-tiles.md b/common-design-patterns/feature-tiles.md index 1377fd624..12cabc139 100644 --- a/common-design-patterns/feature-tiles.md +++ b/common-design-patterns/feature-tiles.md @@ -1,153 +1,218 @@ --- altLangPage: https://conception.canada.ca/configurations-conception-communes/vignettes-promotionnelles.html date: null -dateModified: '2018-12-19' -description: null -title: Context-specific features design pattern +dateModified: '2024-04-03' +description: Guidance about using the context specific features pattern on Canada.ca. +title: Context-specific features --- - - -
- -
-

- 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 -

-
-
-
-
- - Promotional feature tiles pattern - -
- Screenshot illustrating a the context-specific feature pattern with a single heading, image, link and description on Canada.ca. Details on this graphic can be found in the surrounding text. -
-
-
-
-
-

- Navigation page example with three features -

-
-
-
-
- - Promotional feature tiles pattern - -
- Screenshot illustrating the context-specific features pattern with a group of 3 sets of links, images and descriptions placed under a single heading on Canada.ca. Details on this graphic can be found in the surrounding text. -
-
-
-
-
- - - - - +

Last updated: {{ page.dateModified }}

+

The context-specific features pattern includes an image along with a link and a description for promoting government activities, initiatives, programs and services.

+
+
+

On this page

+ +
+
+

When to use

+

Use feature tiles for promotions that are contextually related to the page.

+
+
+

What to avoid

+

Don't use this pattern to promote unrelated content or content that doesn’t fit the context of the page.

+

Don’t use this pattern when it may distract from the task flow.

+
+
+

Content and design

+

Find content and design specifications and visual examples.

+

Content specifications

+

Position context-specific feature tiles after the main content of the page, but before the footer section.

+

Use a maximum of 3 features on a page.

+

Always use a heading for this block:

+ +

Design specifications

+ +

Interactions

+

Hyperlink the entire container of the featured element:

+ +

Visual examples

+
+
+
Context-specific features - large screen
+ Context-specific features for large screen. Text version below: +
+ Image description: context-specific features - large screen +

+ A heading titled “Features” is followed by two feature placeholders in a horizontal row. Each has an image placeholder surrounded by a light grey background. Within the image placeholder are the prescribed image + dimensions: 360px x 203px. Below each image placeholder on the grey background is a placeholder hyperlink that reads [Feature hyperlink text]. Underneath is the following placeholder text: Brief description of the + feature being promoted. +

+
+
+
+
+
+
Context-specific features - small screen
+ Context-specific features for small screen. Text version below: +
+ Image description: context-specific features - small screen +

+ A heading titled “Features” is followed by two feature placeholders in a vertical row. Each has an image placeholder surrounded by a light grey background. Within the image placeholder are the prescribed image + dimensions: 360px x 203px. Below each image placeholder on the grey background is a placeholder hyperlink that reads [Feature hyperlink text]. Underneath is the following placeholder text: Brief description of the + feature being promoted. +

+
+
+
+
+
+

How to implement

+

Find working examples and code for implementing the context-specific features pattern.

+

GCweb (WET) theme implementation reference

+ +

Implementations

+

Determine what best suits the type of page you're creating.

+
+
+
+
+
+ GC-AEM +

For the Government of Canada Adobe Experience Manager (AEM):

+ +
+
+ CDTS +

For the Centrally Deployed Templates Solution (CDTS):

+ +
+
+ Drupal WxT +

For Drupal WxT:

+ +
+
+
+
+
+
+
+

Research and rationale

+

Consult research findings and policy rationale.

+

Research findings

+

+ Less is more. Research on improving promotions on Canada.ca shows that features are the most effective when they’re relevant to the content on the page. A single feature tile works best, but keep the number to a minimum if you plan + to use more than one. +

+

Policy rationale

+

This is an optional pattern for the following mandatory templates:

+ +
+
+

Latest changes

+
+
+ +
+
Updated the guidance to include content and design specifications, visual examples and implementation guidance
+
+
diff --git a/images/contextual-features-en.png b/images/contextual-features-en.png new file mode 100644 index 000000000..431511b08 Binary files /dev/null and b/images/contextual-features-en.png differ diff --git a/images/contextual-features-sm-en.png b/images/contextual-features-sm-en.png new file mode 100644 index 000000000..6c449f3c6 Binary files /dev/null and b/images/contextual-features-sm-en.png differ