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 (required) | 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. |
This is the default layout for this pattern and can be used with a maximum of 8 logos.
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.
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.
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.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
title_text
|
Yes | 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. |
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_html
|
Yes | HTMLImageElement | N/A |
Logo image element. This can be defined using raw HTML or using the Canonical image-template module. Regardless of how this is initialized, it will need to include the p-image-container__image CSS class to comply with the Highlighted image pattern which wraps each link item under the hood.
|
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.
Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend importing the entirety of Vanilla for full support.