Copy environment

Logo Grid

<div class="logo-grid  ">
    <div class="logo-grid__row js-in-viewport">
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="logo-grid__row js-in-viewport">
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="logo-grid__row js-in-viewport">
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="logo-grid__row js-in-viewport">
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
        <div class="logo-grid__item">
            <a href="#" class="logo-grid__link" target="_blank" rel="noopener">
                <div class="image  logo-grid__image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20230%2080%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" data-sizes="auto"
                            alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/230x80" srcset="//placehold.it/230x80 230w, //placehold.it/460x160 460w, //placehold.it/690x240 690w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "rows": [
      {
        "items": [
          {
            "link": "#"
          },
          {
            "link": "#"
          },
          {
            "link": "#"
          }
        ]
      },
      {
        "items": [
          {
            "link": "#"
          },
          {
            "link": "#"
          },
          {
            "link": "#"
          }
        ]
      },
      {
        "items": [
          {
            "link": "#"
          },
          {
            "link": "#"
          },
          {
            "link": "#"
          }
        ]
      },
      {
        "items": [
          {
            "link": "#"
          },
          {
            "link": "#"
          },
          {
            "link": "#"
          }
        ]
      }
    ]
  }
}
  • Handle: @logo-grid--default
  • Tags:
  • Preview:
  • Filesystem Path: src/patterns/components/logo-grid/logo-grid.twig
  • References (1): @image
  • Referenced by (1): @partners-logos