Anti-AI-slop design skill (greenfield pages, audits, redesigns, design extraction from URLs/screenshots) -- installed and validated in an earlier session, was sitting untracked. Full reference library: components, macrostructures, themes, genres, verbs (audit/redesign). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
17 lines
672 B
Markdown
17 lines
672 B
Markdown
### 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).
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
```css
|
|
.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; }
|
|
```
|