Public form containers that wrap form content. Use the Standard layout on regular page surfaces and the Glassy layout on hero/overlay backgrounds.
Same form structure in both contexts. The only difference is the layout surface (standard solid vs glassy overlay) and matching glass input variants. Form Cards are wrappers only: layout comes from Form Layout and controls come from Form Field + Inputs.
For use on normal page surfaces (content areas, cards, dialogs)
Send Us a Message
Have a question? We will reply within 24 hours.
<div class="form-card form-card--standard">
<div class="form-card__header">
<p class="t-lead">Send Us a Message</p>
<p class="t-small">Have a question? We will reply within 24 hours.</p>
</div>
<form class="form-card__body">
<div class="form-layout">
<div class="field">
<label class="field__label field__label--required">Your Name</label>
<div class="field__control">
<input type="text" class="input" placeholder="Jane Doe" required>
</div>
</div>
<div class="field">
<label class="field__label field__label--required">Email Address</label>
<div class="field__control">
<input type="email" class="input" placeholder="jane@example.com" required>
</div>
</div>
<div class="field">
<label class="field__label field__label--required">Message</label>
<div class="field__control">
<textarea class="textarea textarea--no-resize" rows="5" placeholder="Tell us more..." required></textarea>
</div>
</div>
<div class="field">
<label class="form-field__option">
<input type="checkbox" class="checkbox">
<span class="t-small">I agree to be contacted about my inquiry</span>
</label>
</div>
</div>
<div class="form-card__footer">
<div class="form-actions">
<div class="form-actions__primary">
<button class="btn btn--primary">Send Message</button>
</div>
<div class="form-actions__secondary">
<a href="#" class="btn btn--secondary">Clear</a>
</div>
</div>
</div>
</div>
</form>For use on dark overlays and hero sections
Send Us a Message
Have a question? We will reply within 24 hours.
<div class="form-card form-card--glassy">
<div class="form-card__header">
<p class="t-lead-glass">Send Us a Message</p>
<p class="t-small-glass">Have a question? We will reply within 24 hours.</p>
</div>
<form class="form-card__body">
<div class="form-layout">
<div class="field field--glass">
<label class="field__label field__label--required">Your Name</label>
<div class="field__control">
<input type="text" class="input input--glass" placeholder="Jane Doe" required>
</div>
</div>
<div class="field field--glass">
<label class="field__label field__label--required">Email Address</label>
<div class="field__control">
<input type="email" class="input input--glass" placeholder="jane@example.com" required>
</div>
</div>
<div class="field field--glass">
<label class="field__label field__label--required">Message</label>
<div class="field__control">
<textarea class="textarea textarea--no-resize textarea--glass" rows="5" placeholder="Tell us more..." required></textarea>
</div>
</div>
<div class="field field--glass">
<label class="form-field__option">
<input type="checkbox" class="checkbox">
<span class="t-small">I agree to be contacted about my inquiry</span>
</label>
</div>
</div>
<div class="form-card__footer">
<div class="form-actions">
<div class="form-actions__primary">
<button class="btn btn--primary">Send Message</button>
</div>
<div class="form-actions__secondary">
<a href="#" class="btn btn--secondary-glass">Clear</a>
</div>
</div>
</div>
</div>
</form>.form-card--standard
on plain page surfaces
.form-card--glassy
on hero and overlay backgrounds
.form-layout
for vertical spacing inside the card
.form-actions
for primary/secondary actions
.form-layout
Form Card styles are defined in:
/assets/css/form-card.css
Includes: card surface, borders, padding, header/body/footer layout, and glassy variants.