Clickable logos
This component lets you add a row of clickable logos, icons or images which link to other websites. They’re typically used to showcase our partners, but they could also be used for other purposes.
Clickable logos example
How to use clickable logos
Use this component when you need to add icons, logos or images which link the user to another website when they click them. You can add up to 4 logos per row.
Make sure each logo has appropriate alt text.
You can use this component within:
- Accordion
- Tabs
- 50:50 panel
Don’t use this component within:
- Inset text
- Bullets
- Quote
If you don’t need the logos to be clickable, you can just add a row of images using the image component or icon component. If you need to provide more information like a title, summary or button, you could use the card component.
Adding clickable logos in the CMS
You can add a logo panel using either the Logo single row or Logo 50/50 templates. You can also add logos to an existing panel using the ‘Partner logos component’. You’ll need to give it a label for screen readers. You can then add individual ‘Image with Link Component’s underneath the ‘partner logos’ component.
You’ll need to select the image, icon or logo from the media library and also add the relevant link. Remember to give each logo alt text explaining where the link will take them or what the logo is.
Clickable logos modifier rules
- Background: default (white) or ‘background’ (grey)
- Grid span: 8
- Padding: default
- Alignment: default
Accessibility
Give each logo alt text. Instead of describing the logo itself, just say which organisation it’s for or what the logo does. For example ‘Visit the Sills Development Scotland website’ or ‘Top 10 flexible employer award’.
The navigation label given at the component level also helps assistive technology understand what the panel is for. If the component is being used for partner logos, something like ‘Partners we work with’ or ‘In partnership with’ helps give the logos context.