Rich Text Centered

Section

Centered rich-text block with eyebrow, signature, dual CTA, and background color.

HomepageTextFree
Edit
Copied 0 times
Preview
Accent
Section code
<section class="sl-rich-text" style="padding:clamp(40px,6vw,72px) 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center;">
    {%- 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 -%}
    {%- if section.settings.heading != blank -%}
      <h2 style="margin:0;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.15;max-width:18ch;">{{ section.settings.heading }}</h2>
    {%- endif -%}
    {%- if section.settings.body != blank -%}
      <div style="line-height:1.75;font-size:clamp(1rem,1.5vw,1.15rem);opacity:.9;">{{ section.settings.body }}</div>
    {%- endif -%}
    {%- if section.settings.signature != blank -%}
      <p style="margin:.5rem 0 0;font-style:italic;opacity:.75;font-size:.95rem;">{{ section.settings.signature }}</p>
    {%- endif -%}
    <div style="display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:.35rem;">
      {%- if section.settings.cta_text != blank -%}
        <a href="{{ section.settings.cta_link | default: '#' }}" style="display:inline-block;padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-weight:700;font-family:inherit;">{{ section.settings.cta_text }}</a>
      {%- endif -%}
      {%- if section.settings.cta_secondary_text != blank -%}
        <a href="{{ section.settings.cta_secondary_link | default: '#' }}" style="display:inline-block;padding:.85rem 1.5rem;border:1px solid currentColor;border-radius:.375rem;text-decoration:none;color:inherit;font-weight:600;font-family:inherit;">{{ section.settings.cta_secondary_text }}</a>
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Rich Text Centered",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Our story" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Crafted for the long haul" },
    { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Every piece we make is designed to outlast trends — built from durable fabrics, stitched to last, and made for the way you live. We source less, make better, and stand behind every seam for two full years.</p>" },
    { "type": "text", "id": "signature", "label": "Signature / sign-off", "default": "The founders" },
    { "type": "text", "id": "cta_text", "label": "Primary button text", "default": "Our story" },
    { "type": "url", "id": "cta_link", "label": "Primary button link" },
    { "type": "text", "id": "cta_secondary_text", "label": "Secondary button text", "default": "Shop new arrivals" },
    { "type": "url", "id": "cta_secondary_link", "label": "Secondary button link" },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "presets": [{ "name": "Rich Text Centered" }]
}
{% endschema %}

Internal notesTeam only

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