Files
training/.codex/skills/hallmark/references/components/c2-inline-form-as-cta.md
2026-07-28 19:31:07 +08:00

672 B

C2 · Inline form-as-CTA

The CTA is the form — a single email input with a "Submit →" beside it. No separate landing for sign-up. Use when: the action is collecting an email. Don't confuse with: C1 Outlined chip (which navigates, not submits).

<form class="cta-form">
  <label for="email" class="visually-hidden">Email</label>
  <input id="email" type="email" placeholder="you@example.com" />
  <button type="submit">Send →</button>
</form>
.cta-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--color-ink); }
.cta-form input { background: none; border: 0; padding: 0.7rem 0; min-height: 44px; }