Logo Grid

Company Name in Text

Astro

  <LogoGrid gridItems={logoGridData} />

Compiled

  <div data-layout="Grid" data-component="LogoGrid" class="grid justify-items-center items-center grid-cols-2 gap-16 lg:grid-cols-4">
    <a data-component="LogoGridItem" href="https://google.com">
      <img src="https://place-hold.it/500x300" alt="alt text" width="500" height="300" loading="lazy" decoding="async">
    </a>
    <a data-component="LogoGridItem" href="https://google.com">
      <img src="https://place-hold.it/500x300" alt="alt text" width="500" height="300" loading="lazy" decoding="async">
    </a>
    <a data-component="LogoGridItem" href="https://google.com">
      <img src="https://place-hold.it/500x300" alt="alt text" width="500" height="300" loading="lazy" decoding="async">
    </a>
    <a data-component="LogoGridItem" href="https://google.com">
      <img src="https://place-hold.it/500x300" alt="alt text" width="500" height="300" loading="lazy" decoding="async">
    </a>
    <a data-component="LogoGridItem" href="https://google.com">
      <img src="https://place-hold.it/500x300" alt="alt text" width="500" height="300" loading="lazy" decoding="async">
    </a>
    <a data-component="LogoGridItem" href="https://google.com">
      <img src="https://place-hold.it/500x300" alt="alt text" width="500" height="300" loading="lazy" decoding="async">
    </a>
    <a data-component="LogoGridItem" href="https://google.com" class="underline hover:no-underline focus:no-underline h-full w-full flex items-center justify-center"> Company Name in Text </a>
  </div>

API Reference

The following are the props that can be passed to the page block.

Prop	Type	Default
gridItems Array of links and logo images	array	—
gridItems.link	object	—
gridItems.link.href	string	—
gridItems.link.text	string	—
gridItems.link.aria_label	string	—
gridItems.image	asset	—