Logo cloud

How to use it

Use as a quiet strip of social proof under a hero or above pricing, and only with organisations that have agreed to be named. These names are fictional placeholders: replace them, and if you switch to real logo files use inline SVG with a <title> or images with alt text giving the organisation's name. Do not turn the names into links unless they lead to real case studies.

Accessibility

The organisations are a real <ul> introduced by a heading, so screen readers announce how many there are and can read each name; the wordmarks are styled text rather than images, so no alt text can go missing and they stay sharp at any zoom. Nothing is interactive. The heading #334155 on white is 10.35:1 and every wordmark #475569 on white 7.58:1.

Source (copy-ready)

Copy code

<section class="dcl-logos" aria-labelledby="dcl-logos-title">
  <h2 id="dcl-logos-title" class="dcl-logos__title">Trusted by planning teams at</h2>
  <ul class="dcl-logos__list" role="list">
    <li class="dcl-logos__item"><span class="dcl-logos__mark dcl-logos__mark--serif">Bramblewood</span></li>
    <li class="dcl-logos__item"><span class="dcl-logos__mark dcl-logos__mark--caps">LUMEN FREIGHT</span></li>
    <li class="dcl-logos__item"><span class="dcl-logos__mark dcl-logos__mark--light">quarry lane</span></li>
    <li class="dcl-logos__item"><span class="dcl-logos__mark dcl-logos__mark--serif">Tidewater Clinic</span></li>
    <li class="dcl-logos__item"><span class="dcl-logos__mark dcl-logos__mark--caps">COPPERLEAF</span></li>
    <li class="dcl-logos__item"><span class="dcl-logos__mark dcl-logos__mark--light">oakmere studio</span></li>
  </ul>
</section>
<style>
.dcl-logos { padding: 1.5rem 1rem; font: inherit; color: #0f172a; background-color: #ffffff; text-align: center; }
.dcl-logos__title { margin: 0 0 1rem; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #334155; background-color: #ffffff; }
.dcl-logos__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.dcl-logos__item { min-width: 0; }
.dcl-logos__mark { display: inline-block; font-size: 1.25rem; color: #475569; background-color: #ffffff; }
.dcl-logos__mark--serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; }
.dcl-logos__mark--caps { font-weight: 800; letter-spacing: 0.12em; font-size: 1rem; }
.dcl-logos__mark--light { font-weight: 400; letter-spacing: -0.02em; font-size: 1.4rem; }
</style>