Menu Spotlight

<aside class="sl-menu-spotlight" style="color:inherit;font-family:inherit;max-width:360px;border-radius:.75rem;overflow:hidden;border:1px solid currentColor;">
  <a href="{{ section.settings.link | default: '#' }}" style="display:flex;flex-direction:column;color:inherit;text-decoration:none;">
    <figure style="margin:0;aspect-ratio:4/3;overflow:hidden;">
      <img src="{{ section.settings.image | image_url: width: 640 | default: 'https://picsum.photos/seed/menu-spotlight/640/480' }}" alt="{{ section.settings.image_alt | default: section.settings.heading }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
    </figure>
    <div style="padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:800;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h3 style="margin:0;font-size:1.05rem;font-weight:700;line-height:1.25;font-family:inherit;">{{ section.settings.heading | default: 'Featured collection' }}</h3>
      {%- if section.settings.body != blank -%}
        <p style="margin:.1rem 0 0;opacity:.75;line-height:1.5;font-size:.88rem;">{{ section.settings.body }}</p>
      {%- endif -%}
      <span style="margin-top:.55rem;font-size:.82rem;font-weight:700;color:var(--sl-accent,#0a5cff);border-bottom:1px solid var(--sl-accent,#0a5cff);align-self:flex-start;padding-bottom:1px;">{{ section.settings.cta_text | default: 'Shop the drop' }} &rarr;</span>
    </div>
  </a>
</aside>
{% schema %}
{
  "name": "Menu Spotlight",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Featured collection" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Just dropped" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Spring 2026 collection" },
    { "type": "textarea", "id": "body", "label": "Body", "default": "Lightweight layers in ten new colorways." },
    { "type": "text", "id": "cta_text", "label": "CTA text", "default": "Shop the drop" },
    { "type": "url", "id": "link", "label": "Link" }
  ],
  "presets": [{ "name": "Menu Spotlight" }]
}
{% endschema %}