# CTA Ink

> A dark band with an oversized headline and the actions tucked bottom right.

- **Slug:** `cta-ink`
- **Kind:** section · **Category:** Conversion
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/design/components/cta-ink
- **All files in one bundle:** https://viewership.ai/design/components/cta-ink.bundle.txt
- **Structured JSON:** https://viewership.ai/design/components/cta-ink.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/design/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/cta-ink/`:

   - `CtaInk.astro` (raw: https://viewership.ai/design/raw/cta-ink/CtaInk.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `button`: `Button.astro` (docs: https://viewership.ai/design/components/button.md)

npm packages: none.

## Usage

```astro
---
import CtaInk from "../components/viewership/cta-ink/CtaInk.astro";
---

<CtaInk />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import CtaInk from "./CtaInk.astro";
---

<CtaInk
  title="Keep it"
  accent="going."
  body="Every pack we have ever made is still repairable. Send yours in."
  primary={{ label: "Book a repair", href: "#" }}
  secondary={{ label: "See the plans", href: "#" }}
/>
```

## Props

| 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

### `src/components/viewership/cta-ink/CtaInk.astro`

```astro
---
/**
 * 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>
```