42 lines
928 B
Plaintext
42 lines
928 B
Plaintext
---
|
|
interface Props {
|
|
heading?: string;
|
|
content: string;
|
|
id: string;
|
|
}
|
|
const { heading, content, id } = Astro.props;
|
|
const isPromo = id.includes('promo') || id.includes('banner');
|
|
---
|
|
<section class:list={["text-section", { promo: isPromo }]}>
|
|
<div class="container">
|
|
{heading && <h2>{heading}</h2>}
|
|
<p>{content}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.text-section h2 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
color: var(--color-primary-dark);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.text-section p {
|
|
font-size: 1rem;
|
|
color: var(--color-text);
|
|
line-height: 1.8;
|
|
font-weight: 300;
|
|
max-width: 680px;
|
|
}
|
|
.promo {
|
|
background: color-mix(in srgb, var(--color-primary), white 90%);
|
|
border-left: 4px solid var(--color-primary);
|
|
border-radius: 0 6px 6px 0;
|
|
margin: 0 auto;
|
|
}
|
|
.promo .container {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
</style>
|