/

<LogoGrid> Component

Displays a grid of company logos. Typically populated by data from DatoCMS.

Share
Code Editor
<LogoGrid

  data={[

    {

      name: 'Solo.io',

      description: 'Company description',

      link: 'https://solo.io',

      logo: { url: 'https://www.datocms-assets.com/2885/1531117610-sknnx4wk400x4002.svg', format: 'svg' },

    }

  ]}

  details={true}

/>

Where it's used

Latest:5.2.0
Search with

Releases

Latest:5.2.0
registry.npmjs.org
[object Object]
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...

Props

NameDescription
data
array
An array of data for displaying logos
Array members must be of the type below:
data[x]
object
Object contains nested props, see below:
data[x].name
string
data[x].description
string
data[x].logo
object
Object contains nested props, see below:
data[x].logo.url
string
url of the image
data[x].logo.alt
string
alt text for the image
data[x].logo.format
string
format of the image, like "jpg" or "svg"
data[x].integrationPage
string
color
string
Color modifier for logos - make sure all logos have the selected color in the data
Options: "monochrome", "white"
size
string
Display size of the logos within the grid
Options: "small", "medium", "large"
removeBorders
boolean
If true, borders around logo items will be removed
hashUrl
boolean
If true, hashes the url with the company slug when clicked
integrationLink
boolean
If true, links to integration pages are enabled if an item has a valid data.integrationPage property. It will override details if true
details
boolean
If true, creates a popup with company details when a logo is clicked
className
string
Optional className to render on the root element

Playground