-
-
Notifications
You must be signed in to change notification settings - Fork 947
/
Headline.astro
48 lines (44 loc) · 1.08 KB
/
Headline.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
---
import type { Headline as Props } from "~/types";
import { twMerge } from "tailwind-merge";
const {
title = await Astro.slots.render("title"),
subtitle = await Astro.slots.render("subtitle"),
tagline,
classes = {},
} = Astro.props;
const {
container: containerClass = "max-w-3xl",
title: titleClass = "text-3xl md:text-4xl ",
subtitle: subtitleClass = "text-xl",
} = classes;
---
{
(title || subtitle || tagline) && (
<div
class={twMerge("mb-8 md:mx-auto md:mb-12 text-center", containerClass)}
>
{tagline && (
<p
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
set:html={tagline}
/>
)}
{title && (
<h2
class={twMerge(
"font-bold leading-tighter tracking-tighter font-heading text-heading text-3xl",
titleClass
)}
set:html={title}
/>
)}
{subtitle && (
<p
class={twMerge("mt-4 text-muted", subtitleClass)}
set:html={subtitle}
/>
)}
</div>
)
}