Hero Banner
A split-layout hero banner with heading, body text, CTA button, and a large photo. Supports Filled (dark) and No Fill (light) variants for desktop and mobile.
View full-width preview
Design Guidance
| Required | Title, image, body text |
| Limitations | Title: H1, 30 characters max · Body text: 300 characters max · Button: 30 characters max |
| Variants | Style = Filled / No Fill · Size = Desktop / Mobile |
Content Guidance
- Title: Sentence case, no punctuation. Communicate a benefit to the reader (e.g., "Get help paying for child care").
- Body text: Sentence case, with punctuation. Give readers a preview of what content they will find when selecting the button.
- Button: Sentence case, no punctuation. Start with a verb. Avoid articles/prepositions when meaning is clear. Use "View" instead of "See".
Mobile — Filled
Mobile — No Fill
CSS Classes
| Class | Description |
|---|---|
txds-hero |
Base hero container — flex row at desktop, stacked at mobile. |
txds-hero--filled |
Dark background variant (primary-60, white text). |
txds-hero--open |
Transparent background variant with dark text and rounded bottom corners. |
txds-hero__content |
Left content area with heading, body text, and CTA. |
txds-hero__heading |
H1 heading (50px Geologica Bold). |
txds-hero__text |
Body text (20px, 32px line-height). |
txds-hero__image |
Right image container (604×404, 16px radius). |
txds-hero__cta |
Gold CTA button (secondary-50 background). |