Azzy-Blog/src/components/Heading.astro
2026-04-11 21:33:52 +01:00

40 lines
692 B
Text

---
interface Props {
as?: "h1" | "h2" | "h3";
}
const { as: Tag = "h1" } = Astro.props;
---
<Tag class:list={["heading", `heading-${Tag}`]}>
<slot />
</Tag>
<style>
.heading {
font-family: var(--font-heading);
color: var(--color-text);
letter-spacing: -0.02em;
line-height: 1.2;
}
.heading-h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--space-md);
}
.heading-h2 {
font-size: 1.375rem;
font-weight: 600;
margin-top: var(--space-xl);
margin-bottom: var(--space-sm);
}
.heading-h3 {
font-size: 1.125rem;
font-weight: 600;
margin-top: var(--space-lg);
margin-bottom: var(--space-sm);
}
</style>