Two Column Text

Section

Side-by-side story columns with optional eyebrows and per-column link.

HomepageTextFree
Edit
Copied 0 times
Preview
Accent
Section code
<section class="sl-two-col" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1080px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));">
    {%- for block in section.blocks -%}
      <div {{ block.shopify_attributes }}>
        {%- if block.settings.eyebrow != blank -%}<p style="margin:0 0 .5rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.7;">{{ block.settings.eyebrow }}</p>{%- endif -%}
        <h3 style="margin:0 0 .75rem;font-size:1.35rem;">{{ block.settings.heading }}</h3>
        <div style="opacity:.85;line-height:1.6;">{{ block.settings.body }}</div>
      </div>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Two Column Text",
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "settings": [
        { "type": "text", "id": "eyebrow", "label": "Eyebrow" },
        { "type": "text", "id": "heading", "label": "Heading", "default": "A heading" },
        { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Describe your value proposition here.</p>" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Two Column Text",
      "blocks": [{ "type": "column" }, { "type": "column" }]
    }
  ]
}
{% endschema %}

Internal notesTeam only

Freeform markdown notes visible only to signed-in team members. Separate from the public description.