HeadingTag heading

---
/**
 * HeadingTag — links uitgelijnde sectiekop met outline-tag boven een H2 en
 * een beschrijvende sub. Geschikt als intro van een case of artikel.
 *
 * Props:
 * - tag?: string       outline-label boven de kop
 * - headline?: string  de H2-kop
 * - description?: string ondertekst
 */
interface Props {
  tag?: string;
  headline?: string;
  description?: string;
}

const {
  tag = 'Case study',
  headline = 'Van 0 naar 3,2 miljoen omzet in 18 maanden',
  description = 'Hoe een lokale retailer met een doordachte e-commerce aanpak landelijk marktleider werd.',
} = Astro.props;
---

<section class:list={['bl-section', 'hd-tag']}>
  <div class="bl-inner hd-tag__inner">
    {tag && <span class="hd-tag__tag">{tag}</span>}
    <h2 class="hd-tag__title">{headline}</h2>
    {description && <p class="hd-tag__desc">{description}</p>}
  </div>
</section>

<style>
.hd-tag__inner{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hd-tag__tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);border:1.5px solid var(--color-accent);padding:.2rem .6rem;border-radius:4px;margin-bottom:.85rem}
.hd-tag__title{margin:0 0 .75rem;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:var(--color-primary);line-height:1.15;letter-spacing:-.02em}
.hd-tag__desc{margin:0;max-width:640px;font-size:1.05rem;color:var(--color-muted);line-height:1.65}
</style>