Ready for a proper repair?
Send the pack back and we will have it on the trail again in two days.
Astro UI
CTA Band.
The closing call to action on a full-width accent band, centred.
ConversionSection1 dependency Original, MIT
Style
Using Claude Code? Give it the agent prompt and skip these steps.
-
Import the foundation once
foundation.css holds the tokens every component reads.
--- // src/layouts/Layout.astro import "../styles/foundation.css"; --- -
Use it
--- import CtaBand from "../components/viewership/cta-band/CtaBand.astro"; --- <CtaBand />
Props 6
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | · | Headline. |
accent | string | · | Closing words of the headline. |
body | string | · | Supporting line. |
primary | { label: string; href: string } | · | Main action. |
secondary | { label: string; href: string } | · | Second action. |
as | "h2" | "h3" | "h2" | Heading element. |
Source 1 file
---
/**
* CtaBand: the closing ask on a full-width accent band, centred.
*
* @example
* <CtaBand title="Ready for a" accent="proper repair?" primary={{ label: "Book a repair", href: "/repairs" }} />
*/
import Button from "../button/Button.astro";
interface Cta {
label: string;
href: string;
}
interface Props {
title: string;
accent?: string;
body?: string;
primary: Cta;
secondary?: Cta;
as?: "h2" | "h3";
class?: string;
}
const { title, accent, body, primary, secondary, as: Heading = "h2", class: className } = Astro.props;
---
<section class:list={["vs-cta-band", className]}>
<div class="vs-cta-band__inner">
<Heading class="vs-display vs-cta-band__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
{body && <p class="vs-cta-band__body">{body}</p>}
<div class="vs-cta-band__actions">
<Button href={primary.href} variant="primary">{primary.label}</Button>
{secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
</div>
</div>
</section>
<style>
.vs-cta-band {
container-type: inline-size;
background: var(--vs-accent);
color: var(--vs-on-accent);
font-family: var(--vs-font-sans);
font-stretch: var(--vs-font-stretch);
text-align: center;
}
.vs-cta-band__inner {
display: grid;
justify-items: center;
max-width: var(--vs-container);
margin-inline: auto;
padding: var(--vs-section-y) var(--vs-gutter);
}
.vs-cta-band__title {
font-size: clamp(2.25rem, 7cqi, 4.75rem);
}
.vs-cta-band__title :global(em) {
color: inherit;
background: none;
}
.vs-cta-band__body {
max-width: 32rem;
margin: 1rem 0 0;
font-size: 1.0625rem;
line-height: 1.55;
opacity: 0.85;
}
.vs-cta-band__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 2rem;
}
</style>Original, MIT.