Jump to main content

Linked logo section


Work in progress

Vanilla's patterns are newly released and still evolving as we receive feedback.

A linked logo section is used to display a list of logos which explicitly link to additional pages or resources.

The linked logo section pattern is composed of the following elements:

Element Description
title_text H2 title text.
Layout Defaults to full-width, with additional options for 50-50, and 25-75 layout splits.
Links (required) An Array<Object> of individual image link properties.
Links[].href (required) The target link for the logo.
Links[].text (required) The link text for the logo.
Links[].label (required) The aria-label for the logo.
Links[].image_html (required) The logo image element.

Full width

This is the default layout for this pattern and can be used with a maximum of 8 logos.

50/50

This variant can be used for adding a header and the logo section in different columns. This should only be used when there's a maximum of 6 logos to avoid occupying too much vertical space.

25/75

This variant can be used for adding a header and the logo section in different columns, but can accommodate up to 9 logos. Be aware that the heading only occupies 25% width here, so only very short titles would be appropriate here.

Jinja Macro

The vf_linked_logo_section Jinja macro can be used to generate a linked logo list pattern. The API for the macro is shown below.

Parameters

Name Required? Type Default Description
title_text No String N/A The text to be displayed as the heading (h2).
layout No One of:
'50/50',
'25/75',
'full-width'
full-width The intended grid layout for the section.
top_rule_variant No One of:
'default',
'muted',
'highlighted',
'none'
'default' Type of rule to render at the top of the pattern. Use 'none' to hide the top rule.
padding No One of:
'deep',
'shallow',
'default',
'none'
'default' Type of padding to apply to the pattern. Use 'none' to remove all padding. See section padding options for details.
links Yes Array N/A Array of image links.
links[].href Yes String N/A Target link for the image.
links[].text Yes String N/A Logo link text.
links[].label Yes String N/A aria-label for the logo link. This attribute is added to the wrapping `a` tag under the hood and it is this label that screenreaders will read. Additional alt text added to the image element will be ignored by assistive techology and as such can be set to null.
links[].image_attrs Yes (either image_attrs or image_html) Partial<HTMLImageElement> N/A

Props (as a dictionary) of a logo image element. The p-image-container__image class will be added automatically by the pattern.

You can construct these props manually, or use the canonicalwebteam.image-template module with output_mode="attrs".

If this argument is used, the image_html argument will be ignored.

links[].image_html Yes (either image_attrs or image_html) HTMLImageElement N/A

Raw HTML of a logo image element. This can be defined using raw HTML or using the Canonical image-template module.

Must include the p-image-container__image CSS class to comply with the Highlighted image pattern which wraps each link item under the hood.

If you use image_attrs instead of image_html, the p-image-container__image class will be added automatically by the pattern.

Import

Jinja Macro

To import the Linked Logo section Jinja macro, copy the following import statement into your Jinja template.

{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}

View the building with Jinja macros guide for macro installation instructions.

SCSS

Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.