# Logo cloud blocks A row of customer logos with one line of social proof, for a landing or pricing page. The block is one `.svelte` file built from `SvButton`, themed from the `--sg-*` tokens. The sample wordmarks are made-up companies: an inline SVG glyph next to the name in its own type style, so nothing loads from another server. ## Installation Add the whole group, or one block by its name (shown under each demo):
See them first with `npx @svgrid/ui try blocks/logo-clouds`. No project needed. ## Logo cloud A heading and "Used by 1,200 ops teams..." over twelve wordmarks in a ruled grid: four columns on desktop, three below 860 px and two below 480 px. The six wordmarks with a case study are links, muted at rest and full contrast on hover or keyboard focus; the others stay muted. A line under the grid counts the linked stories, next to an All customer stories button. > Live demo: Logo cloud block - https://svgrid.com/demos/648-block-logo-clouds-grid/ `npx @svgrid/ui add logo-clouds-grid` ## Your customers and count The block's ` ``` ```svelte ``` ## Headless The block is a styled render of the core in its `

{cloud.proof}

``` `linkProps` sets the `href` and an `aria-label` such as "Northwind customer story", and `linkedCount` gives the number of logos with a link. ## See also - [UI blocks overview](https://svgrid.com/docs/help/ui-blocks/index/) - [SvButton](https://svgrid.com/docs/help/ui-components/sv-button/) - [SvToaster](https://svgrid.com/docs/help/ui-components/sv-toaster/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-blocks/logo-clouds/ . All docs: https://svgrid.com/llms.txt