Logo cloud
A trusted-by logo row that renders supplied image sources and alternative text.
Try it
Trusted-by row
A real image source and explicit alt text.
Trusted by teams at
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork_marketing/components/_logo_cloud.html" %}context = {'heading': 'Trusted by teams at', 'greyscale': True, 'logos': [{'src': '/static/brickworkui/images/acme-logo.svg', 'alt': 'Acme'}]}Guide
Add it to your project
- Use the public include path "brickwork_marketing/components/_logo_cloud.html" from the installed django-brickwork package.
- Use the public include path "brickwork_marketing/components/_logo_cloud.html" from the installed django-brickwork package.
- Supply the list-shaped logos data from a view or wrapper context.
- Give every logo a source and deliberate alt text. An empty alt is a caller decision for genuinely decorative marks.
- Set greyscale true only for the decorative muted-until-hover effect.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| heading | string | Not set | No | Section heading; its semantic level is set by this component. Constraint: No additional template constraint beyond the documented type. |
| logos | list of {src, alt} | Not set | Yes | Organisation-logo records: `{src, alt}`. Constraint: Every record needs `src` and a real alt value. The component never invents a decorative empty alt. |
| logos[].src | URL | Not set | Yes | Image source for this customer or partner logo. Constraint: No additional template constraint beyond the documented type. |
| logos[].alt | string | Not set | Yes | Meaningful alternative text for this logo image. Constraint: No additional template constraint beyond the documented type. |
| greyscale | boolean | False | No | Decorative grey-until-hover treatment. Constraint: No additional template constraint beyond the documented type. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Every supplied logo has a caller-provided alt attribute. Greyscale hover is decorative and never the sole signal.
- Responsive
- Flex row wraps fluidly without a breakpoint switch.
- Without JavaScript
- Static images render without JavaScript; reduced motion disables the decorative transition.
Need help?
Troubleshooting
A logo is announced poorly by a screen reader.
Set each logo `alt` to the represented organisation name; these marks are content, not decorative images.
Explore next