Logo Cloud

Grid or row of client/partner logos.

html

<section class="lcloud" data-grayscale="true">
  <p class="lcloud__heading">Trusted by teams at</p>
  <div class="lcloud__grid lcloud__grid--4">
    <span class="lcloud__logo" style="border-color:#241430;color:#241430;">Nimbus</span>
    <span class="lcloud__logo" style="border-color:#241430;color:#241430;">Fenwick</span>
    <span class="lcloud__logo" style="border-color:#241430;color:#241430;">Cobalt</span>
    <span class="lcloud__logo" style="border-color:#241430;color:#241430;">Ridgeline</span>
    <span class="lcloud__logo" style="border-color:#241430;color:#241430;">Halcyon</span>
  </div>
</section>
<style>
.lcloud { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; text-align: center; }
.lcloud__heading { margin: 0 0 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #24143088; }
.lcloud__grid { display: grid; gap: 16px; align-items: center; }
.lcloud__grid--3 { grid-template-columns: repeat(3, 1fr); }
.lcloud__grid--4 { grid-template-columns: repeat(4, 1fr); }
.lcloud__grid--5 { grid-template-columns: repeat(5, 1fr); }
.lcloud__grid--3 span:nth-child(n+4) { display: none; }
.lcloud__grid--4 span:nth-child(n+5) { display: none; }
.lcloud__logo { display: block; border: 1.5px solid; border-radius: 8px; padding: 14px 8px; font-weight: 700; }
.lcloud[data-grayscale="true"] .lcloud__logo { filter: grayscale(1) opacity(.75); }
</style>

tailwind

<section class="font-sans text-[#241430] p-6 text-center">
  <p class="m-0 mb-5 text-xs font-bold uppercase tracking-wide text-[#241430]/55">Trusted by teams at</p>
  <div class="lcloud-tw lcloud-tw--4 grid gap-4 items-center" data-grayscale="true">
    <span class="lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold" style="border-color:#241430;color:#241430;">Nimbus</span>
    <span class="lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold" style="border-color:#241430;color:#241430;">Fenwick</span>
    <span class="lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold" style="border-color:#241430;color:#241430;">Cobalt</span>
    <span class="lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold" style="border-color:#241430;color:#241430;">Ridgeline</span>
    <span class="lcloud-tw__logo block border-[1.5px] rounded-lg px-2 py-3.5 font-bold" style="border-color:#241430;color:#241430;">Halcyon</span>
  </div>
</section>
<style>
.lcloud-tw--3 { grid-template-columns: repeat(3, 1fr); }
.lcloud-tw--4 { grid-template-columns: repeat(4, 1fr); }
.lcloud-tw--5 { grid-template-columns: repeat(5, 1fr); }
.lcloud-tw--3 span:nth-child(n+4) { display: none; }
.lcloud-tw--4 span:nth-child(n+5) { display: none; }
.lcloud-tw[data-grayscale="true"] .lcloud-tw__logo { filter: grayscale(1) opacity(.75); }
</style>

react

export function LogoCloud({
  heading = "Trusted by teams at",
  columns = "4",
  grayscale = true,
  accent = "#241430",
}) {
  const logos = ["Nimbus", "Fenwick", "Cobalt", "Ridgeline", "Halcyon"].slice(0, Number(columns));
  return (
    <section style={{ font: "15px system-ui, sans-serif", color: "#241430", padding: 24, textAlign: "center" }}>
      <p style={{ margin: "0 0 20px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", color: "#24143088" }}>{heading}</p>
      <div style={{ display: "grid", gap: 16, alignItems: "center", gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {logos.map((logo) => (
          <span key={logo} style={{ display: "block", border: `1.5px solid ${accent}`, borderRadius: 8, padding: "14px 8px",
            fontWeight: 700, color: accent, filter: grayscale ? "grayscale(1) opacity(.75)" : "none" }}>{logo}</span>
        ))}
      </div>
    </section>
  );
}