Logo List

<section class="sl-logos" aria-label="{{ section.settings.heading | default: 'As featured in' }}" style="padding:clamp(24px,4vw,48px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    {%- if section.settings.heading != blank -%}
      <p style="text-align:center;text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;opacity:.7;margin:0 0 1.5rem;font-weight:600;">{{ section.settings.heading }}</p>
    {%- endif -%}
    <div style="display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);justify-content:center;align-items:center;">
      {%- for block in section.blocks -%}
        {%- assign seed_slug = block.settings.name | handle | default: block.id -%}
        {%- capture fallback -%}https://picsum.photos/seed/logo-{{ seed_slug }}/160/60?grayscale{%- endcapture -%}
        {%- if block.settings.link != blank -%}<a href="{{ block.settings.link }}" rel="noopener" style="display:inline-flex;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s;" onmouseover="this.style.filter='none';this.style.opacity='1'" onmouseout="this.style.filter='grayscale(1)';this.style.opacity='.8'" aria-label="{{ block.settings.name | default: 'Partner logo' }}" {{ block.shopify_attributes }}>{%- else -%}<span style="display:inline-flex;filter:grayscale(1);opacity:.8;" {{ block.shopify_attributes }}>{%- endif -%}
          <img src="{{ block.settings.logo | image_url: width: 220 | default: fallback }}" alt="{{ block.settings.name | default: 'Partner logo' }}" loading="lazy" style="height:clamp(28px,4vw,44px);width:auto;max-width:160px;object-fit:contain;" />
        {%- if block.settings.link != blank -%}</a>{%- else -%}</span>{%- endif -%}
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Logo List",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "As featured in" }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        { "type": "image_picker", "id": "logo", "label": "Logo" },
        { "type": "text", "id": "name", "label": "Name", "default": "Publication" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Logo List",
      "blocks": [
        { "type": "logo", "settings": { "name": "Vogue" } },
        { "type": "logo", "settings": { "name": "Wired" } },
        { "type": "logo", "settings": { "name": "Forbes" } },
        { "type": "logo", "settings": { "name": "GQ" } },
        { "type": "logo", "settings": { "name": "Elle" } }
      ]
    }
  ]
}
{% endschema %}