Linked logo section | Patterns | Vanilla documentation

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.

View example of the linked logo section full-width pattern

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.

View example of the linked logo section 50-50 pattern

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.

View example of the linked logo section 25-75 pattern

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.