Featured Article

<section class="sl-featured-article" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  {%- assign article = articles[section.settings.article] -%}
  <article style="max-width:1080px;margin:0 auto;display:grid;gap:clamp(1rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;">
    <figure style="margin:0;border-radius:.5rem;overflow:hidden;">
      <img src="{{ article.image | image_url: width: 1000 | default: section.settings.fallback_image | default: 'https://picsum.photos/seed/featured-article/1000/700' }}" alt="{{ article.image.alt | default: article.title | default: section.settings.fallback_alt | default: 'Featured article image' }}" loading="lazy" style="width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;" />
    </figure>
    <div>
      {%- if section.settings.category_tag != blank -%}
        <span style="display:inline-block;padding:.25rem .6rem;margin:0 0 .75rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.75rem;border-radius:.25rem;text-transform:uppercase;letter-spacing:.05em;">{{ section.settings.category_tag }}</span>
      {%- endif -%}
      <h2 style="margin:0 0 .75rem;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;"><a href="{{ article.url | default: '#' }}" style="color:inherit;text-decoration:none;">{{ article.title | default: section.settings.fallback_title | default: 'Featured article' }}</a></h2>
      <p style="margin:0 0 1rem;opacity:.85;line-height:1.6;">{{ article.excerpt_or_content | strip_html | truncate: 200 | default: section.settings.fallback_excerpt | default: 'A short, compelling excerpt for your featured article that draws readers in.' }}</p>
      <p style="margin:0 0 1.25rem;font-size:.85rem;opacity:.7;">
        <span>{{ article.author | default: section.settings.fallback_author | default: 'Editorial team' }}</span>
        {%- if article.published_at -%}
           &middot; <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: '%B %-d, %Y' }}</time>
        {%- endif -%}
      </p>
      <a href="{{ article.url | default: '#' }}" style="display:inline-block;padding:.6rem 1.2rem;border:2px solid var(--sl-accent,#0a5cff);color:var(--sl-accent,#0a5cff);border-radius:.375rem;text-decoration:none;font-weight:600;">{{ section.settings.read_more | default: 'Read the article' }} &rarr;</a>
    </div>
  </article>
  {%- if article -%}
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": {{ article.title | json }},
      "datePublished": "{{ article.published_at | date: '%Y-%m-%d' }}",
      "author": { "@type": "Person", "name": {{ article.author | json }} },
      "image": "{{ article.image | image_url: width: 1200 }}",
      "url": "{{ shop.url }}{{ article.url }}"
    }
    </script>
  {%- endif -%}
</section>
{% schema %}
{
  "name": "Featured Article",
  "settings": [
    { "type": "article", "id": "article", "label": "Article" },
    { "type": "text", "id": "category_tag", "label": "Category tag", "default": "Editorial" },
    { "type": "text", "id": "read_more", "label": "Read more text", "default": "Read the article" },
    { "type": "image_picker", "id": "fallback_image", "label": "Fallback image" },
    { "type": "text", "id": "fallback_alt", "label": "Fallback alt text", "default": "Featured article image" },
    { "type": "text", "id": "fallback_title", "label": "Fallback title", "default": "Featured article" },
    { "type": "textarea", "id": "fallback_excerpt", "label": "Fallback excerpt", "default": "A short, compelling excerpt for your featured article that draws readers in." },
    { "type": "text", "id": "fallback_author", "label": "Fallback author", "default": "Editorial team" }
  ],
  "presets": [{ "name": "Featured Article" }]
}
{% endschema %}