Category Tiles

<section class="sl-category-tiles" style="padding:clamp(32px,5vw,56px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1400px;margin:0 auto;">
    {%- if section.settings.heading != blank -%}
      <header style="text-align:center;margin:0 0 1.5rem;">
        <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2rem);font-family:inherit;">{{ section.settings.heading }}</h2>
        {%- if section.settings.subheading != blank -%}
          <p style="margin:.4rem 0 0;opacity:.8;">{{ section.settings.subheading }}</p>
        {%- endif -%}
      </header>
    {%- endif -%}
    <ul style="list-style:none;margin:0;padding:0;display:grid;gap:clamp(.75rem,2vw,1rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
      {%- for block in section.blocks -%}
        <li style="position:relative;" {{ block.shopify_attributes }}>
          <a href="{{ block.settings.link | default: '#' }}" aria-label="{{ block.settings.label }}" style="position:relative;display:block;aspect-ratio:4/5;border-radius:.75rem;overflow:hidden;color:#fff;text-decoration:none;font-family:inherit;">
            <img src="{{ block.settings.image | image_url: width: 800 | default: 'https://picsum.photos/seed/tile-' | append: forloop.index | append: '/800/1000' }}" alt="{{ block.settings.image_alt | default: block.settings.label }}" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;" />
            <span aria-hidden="true" style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 35%,rgba(0,0,0,.65) 100%);z-index:1;"></span>
            <span style="position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;display:flex;flex-direction:column;gap:.2rem;">
              {%- if block.settings.eyebrow != blank -%}
                <span style="font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.9;">{{ block.settings.eyebrow }}</span>
              {%- endif -%}
              <span style="font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;line-height:1.15;">{{ block.settings.label }}</span>
              <span style="font-size:.82rem;opacity:.9;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:1px;align-self:flex-start;">Shop now &rarr;</span>
            </span>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>
{% schema %}
{
  "name": "Category Tiles",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop by category" },
    { "type": "textarea", "id": "subheading", "label": "Subheading" }
  ],
  "blocks": [
    {
      "type": "tile",
      "name": "Tile",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Background image" },
        { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Category tile" },
        { "type": "text", "id": "eyebrow", "label": "Eyebrow" },
        { "type": "text", "id": "label", "label": "Label", "default": "New arrivals" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Category Tiles",
      "blocks": [
        { "type": "tile", "settings": { "eyebrow": "New in", "label": "Spring collection" } },
        { "type": "tile", "settings": { "eyebrow": "Bestsellers", "label": "Top rated" } },
        { "type": "tile", "settings": { "eyebrow": "On sale", "label": "Last chance" } },
        { "type": "tile", "settings": { "eyebrow": "Essentials", "label": "Everyday basics" } }
      ]
    }
  ]
}
{% endschema %}