Newsletter Card
A bordered card with a heading, a pitch, the form, and the privacy note underneath.
6 个框架初级
One row, one field, one button - the smallest honest email capture.
<!--
The smallest honest email capture: one row, one field, one button.
"Smallest" does not mean the label is negotiable. It is hidden with a
clip-rect, which keeps it in the accessibility tree - an input whose only
description is a placeholder announces as "edit text, blank" the moment the
user starts typing.
-->
<form class="nl-inline" action="/api/subscribe" method="post">
<label class="nl-inline__label" for="nl-inline-email">Email address</label>
<input
class="nl-inline__input"
id="nl-inline-email"
name="email"
type="email"
autocomplete="email"
placeholder="you@company.com"
required
/>
<button class="nl-inline__submit" type="submit">Subscribe</button>
</form>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
ctaLabel | string | 'Subscribe' | 行动号召按钮的文案。 |
label | string | 'Email address' | 按钮的无障碍名称。仅有图标的按钮必须设置。 |
loading | boolean | false | 为 true 时显示加载动画并阻止输入。 |
className | string | - | 合并到根元素上的额外类名。 |
Smallest does not mean the label is negotiable. It is hidden with `sr-only` - a clip-rect, not `display:none`, which would take it out of the accessibility tree along with the pixels - because an input described only by a placeholder announces as "edit text, blank" the moment the user types. The row goes vertical below `sm`: a 90px email input is not a form. Drop this under a blog post or into a sidebar; when it needs a heading and a privacy note, reach for `newsletter-card` instead of bolting them onto this one.