Multi Column With Icons

<section class="sl-multi-col-icons" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    {%- if section.settings.heading != blank -%}
      <header style="text-align:center;margin:0 0 2rem;">
        {%- if section.settings.eyebrow != blank -%}
          <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        <h2 style="margin:.25rem 0 .5rem;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;">{{ section.settings.heading }}</h2>
        {%- if section.settings.subheading != blank -%}
          <p style="margin:0 auto;max-width:640px;opacity:.85;line-height:1.55;">{{ section.settings.subheading }}</p>
        {%- endif -%}
      </header>
    {%- endif -%}
    <div style="display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
      {%- for block in section.blocks -%}
        <article style="display:flex;flex-direction:column;gap:.55rem;padding:.25rem;" {{ block.shopify_attributes }}>
          <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.75rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:1.4rem;line-height:1;">{{ block.settings.icon | default: '★' }}</span>
          <h3 style="margin:.35rem 0 0;font-size:1.1rem;line-height:1.3;font-weight:700;">{{ block.settings.title }}</h3>
          {%- if block.settings.body != blank -%}
            <p style="margin:0;line-height:1.6;opacity:.85;font-size:.95rem;">{{ block.settings.body }}</p>
          {%- endif -%}
          {%- if block.settings.link_text != blank -%}
            <a href="{{ block.settings.link_url | default: '#' }}" style="margin-top:.25rem;align-self:flex-start;color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--sl-accent,#0a5cff);">{{ block.settings.link_text }} &rarr;</a>
          {%- endif -%}
        </article>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Multi Column With Icons",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Our promise" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Built on three promises" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Quality, care, and craft in every piece — from source to seam." }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji or symbol)", "default": "★" },
        { "type": "text", "id": "title", "label": "Title", "default": "Made to last" },
        { "type": "textarea", "id": "body", "label": "Body", "default": "Premium fabrics, reinforced stitching, and details that outlast trends." },
        { "type": "text", "id": "link_text", "label": "Link text" },
        { "type": "url", "id": "link_url", "label": "Link URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi Column With Icons",
      "blocks": [
        { "type": "column", "settings": { "icon": "🧵", "title": "Made to last", "body": "Premium fabrics, reinforced stitching, and details that outlast trends.", "link_text": "Our craft" } },
        { "type": "column", "settings": { "icon": "🌱", "title": "Better materials", "body": "85% of our fabrics come from recycled or regenerative sources.", "link_text": "Our materials" } },
        { "type": "column", "settings": { "icon": "🤝", "title": "Fair workshops", "body": "Every piece is made in workshops we visit — people we know by name.", "link_text": "Our partners" } }
      ]
    }
  ]
}
{% endschema %}