Zoeken...  ⌘K GitHub

HeadingMinimal heading

HeadingMinimal component.

/heading-minimal
src/components/heading/HeadingMinimal.astro
---
/**
 * HeadingMinimal — minimale sectiekop: titel + sub.
 *
 * Props:
 * - title?: string
 * - sub?: string
 */
interface Props {
  title?: string;
  sub?: string;
}

const {
  title = 'Onze werkwijze',
  sub = 'Eenvoud is de ultieme verfijning.',
} = Astro.props;
---

<section class="bl-section hd-minimal-section">
  <div class="bl-inner hd-minimal">
    <h2 class="hd-minimal__title">{title}</h2>
    {sub && <p class="hd-minimal__sub">{sub}</p>}
  </div>
</section>

<style>
.hd-minimal__title{margin:0 0 .5rem;font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:700;color:var(--color-primary);line-height:1.2}
.hd-minimal__sub{margin:0;font-size:1rem;color:#777;line-height:1.55}
</style>