V6 Clearleft Patterns

Inline Logos 

<ul class="Inline-logos" role="list">
    <li class="Inline-logos__logo">
        <div class="Inline-logos__wrapper">
            <img src="https://via.placeholder.com/300x150" alt="" loading="lazy" />
        </div>
    </li>
    <li class="Inline-logos__logo">
        <div class="Inline-logos__wrapper">
            <img src="https://via.placeholder.com/150x300" alt="" loading="lazy" />
        </div>
    </li>
    <li class="Inline-logos__logo">
        <div class="Inline-logos__wrapper">
            <img src="https://via.placeholder.com/150x150" alt="" loading="lazy" />
        </div>
    </li>
</ul>
 
<ul class="Inline-logos" role="list">
  {% for logo in logos %}
    <li class="Inline-logos__logo">
      <div class="Inline-logos__wrapper">
        <img src="{{ logo.src }}" alt="{{ logo.alt }}" loading="lazy" />
      </div>
    </li>
  {% endfor %}
</ul>
 
{
  "logos": [
    {
      "src": "https://via.placeholder.com/300x150",
      "alt": ""
    },
    {
      "src": "https://via.placeholder.com/150x300",
      "alt": ""
    },
    {
      "src": "https://via.placeholder.com/150x150",
      "alt": ""
    }
  ]
}
  • Content: 
    .Inline-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--space-2xl), 1fr));
  grid-gap: var(--space-s-m) var(--gutter);
  max-width: 424px;

  &__wrapper {
    height: 0;
    position: relative;
    padding-bottom: 100%;
  }

  img {
    object-fit: contain;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }
}
  • URL: /components/raw/inline-logos/inline-logos.css
  • Filesystem Path: src/templates/components/inline-logos/inline-logos.css
  • Size: 381 Bytes

No notes defined.