Keep it going.
Every pack we have ever made is still repairable. Send yours in.
Astro UI
CTA Ink.
A dark band with an oversized headline and the actions tucked bottom right.
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 CtaInk from "../components/viewership/cta-ink/CtaInk.astro"; --- <CtaInk />
Props 6
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | · | Headline, set very large. |
accent | string | · | Closing words, drawn in the accent colour. |
body | string | · | Short line above the actions. |
primary | { label: string; href: string } | · | Main action (accent button). |
secondary | { label: string; href: string } | · | Second action. |
as | "h2" | "h3" | "h2" | Heading element. |
Source 1 file
---
/**
* CtaInk: a dark band with an oversized headline and the actions tucked
* bottom right. The loudest way to end a page.
*
* @example
* <CtaInk title="Keep it" accent="going." 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-ink", className]}>
<div class="vs-cta-ink__inner">
<Heading class="vs-display vs-cta-ink__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
<div class="vs-cta-ink__side">
{body && <p class="vs-cta-ink__body">{body}</p>}
<div class="vs-cta-ink__actions">
<Button href={primary.href} variant="accent">{primary.label}</Button>
{secondary && <Button href={secondary.href} variant="secondary">{secondary.label}</Button>}
</div>
</div>
</div>
</section>
<style>
.vs-cta-ink {
container-type: inline-size;
background: var(--vs-ink);
color: var(--vs-ink-inverse);
font-family: var(--vs-font-sans);
font-stretch: var(--vs-font-stretch);
}
.vs-cta-ink__inner {
display: grid;
gap: 36px;
max-width: var(--vs-container);
margin-inline: auto;
padding: var(--vs-section-y) var(--vs-gutter);
}
.vs-cta-ink__title {
font-size: clamp(2.75rem, 12cqi, 9rem);
line-height: 0.94;
}
.vs-cta-ink__title :global(em) {
color: var(--vs-em-color, var(--vs-accent));
}
.vs-cta-ink__body {
max-width: 22rem;
margin: 0 0 1.5rem;
font-size: 1rem;
line-height: 1.55;
color: color-mix(in srgb, var(--vs-ink-inverse) 70%, transparent);
}
.vs-cta-ink__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@container (min-width: 760px) {
.vs-cta-ink__inner {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 56px;
}
}
</style>Original, MIT.