Skip to main content
The LogoCloud block renders a dense, full-width grid of sponsor logos. Each cell links to the sponsor’s website when available. Logos are displayed at reduced opacity that rises to full on hover. If a sponsor has no logo, their name is displayed as text. This block is designed for compact presence — for full sponsor profiles use SponsorCards.

​
Props

​
heading
string
Optional label text above the logo grid, rendered in small-caps label-caps style with muted foreground colour.
​
autoPopulate
boolean
When true (default), the GROQ query automatically fetches all published sponsor documents and resolves their logos. When false, the sponsors reference array is used instead.
​
sponsors
Sponsor[]
Array of resolved sponsor document references. Only visible in Studio when autoPopulate is false. The GROQ query resolves references before the component receives them.
​
backgroundVariant
'white' | 'light' | 'dark' | 'primary'
Background colour token. The section itself always uses bg-muted — this field primarily affects adjacent spacing context.
​
spacing
'none' | 'small' | 'default' | 'large'
Vertical padding override. The section uses size="sm" so padding is inherently compact.
​
maxWidth
'narrow' | 'default' | 'full'
Content container max-width. Defaults to default.
​
class
string
Additional CSS classes.
​
id
string
HTML id for anchor targeting.

​
Usage in Sanity Studio

  1. Add a Logo Cloud block to a page.
  2. Optionally set a Heading label (e.g. "Trusted by industry leaders").
  3. Choose between:
    • Auto-Populate: On (default) — all published sponsors appear automatically.
    • Auto-Populate: Off — a Sponsors reference array appears; add specific sponsors manually.
Keep autoPopulate on for the sponsors page so the logo cloud stays current as new sponsors are published, without any manual maintenance.
When autoPopulate is false, Studio requires at least one sponsor reference. An empty manual list will trigger a validation error on publish.

​
Grid Layout

The grid adapts responsively:
ViewportColumns
Mobile (< sm)2
Small (sm+)4
Large (lg+)8
Logos are rendered at 120×40 max dimensions using fit('max') to avoid distortion. Cells are separated by 1px border lines from bg-border.

​
Variants / Options

No variant field. The only behavioural toggle is autoPopulate.

​
Example

// Auto-populate all sponsors
{
  _type: 'logoCloud',
  heading: 'Our Partners',
  autoPopulate: true
}

// Manual sponsor selection
{
  _type: 'logoCloud',
  heading: 'Platinum Partners',
  autoPopulate: false,
  sponsors: [
    { _ref: 'sponsor-doc-id-1', _type: 'reference' },
    { _ref: 'sponsor-doc-id-2', _type: 'reference' }
  ]
}