Fast to ship
Copy semantic HTML into existing templates and keep local styling in tokens.
Marketing example
Marketing bundle
Launch plain HTML growth pages with StartHDS.
This showcase loads only core plus /v1/css/starthds-marketing.css and demonstrates landing, proof, pricing, testimonial, lead magnet, event, countdown, timeline, comparison, guarantee, and risk-reversal primitives.
Centered campaign
Run a focused product announcement without the aggregate stylesheet.
Centered landing heroes compose core typography and buttons with marketing-specific campaign surfaces.
Accessible by default
Use native disclosure, lists, quotes, and links with visible focus states.
Themeable
Marketing pages inherit product palettes through --hds-* variables.
Split and centered layouts
Use hds-landing-hero--split for media/forms or hds-landing-hero--centered for focused campaigns.
Reusable proof strips
Logo strips and proof bars wrap cleanly for unknown content lengths.
Pricing and FAQs
Pricing cards, feature lists, badges, and FAQ items use static HTML.
Problem
Marketing pages often require a large CSS framework for a few repeated layouts.
Solution
StartHDS ships a small token-backed class contract for common landing sections.
Before
Custom one-off campaign styles and duplicated card rules.
After
Stable hds classes that remain responsive and themeable across products.
“We added pricing, FAQs, and proof sections without adding a UI dependency.”
“The same token overrides styled our docs and campaign pages.”
Starter
$19 / month
- Landing hero
- Benefit grid
- FAQ section
Team
$49 / month
- Pricing cards
- CTA panels
- Testimonials
Lead magnet
Collect interest with a plain HTML opt-in.
Pair offer copy with a labelled form and button while the host application owns submission behavior.
Live walkthrough
Use webinar cards for scheduled content, replays, or registration CTAs.
03days14hours22mins
Registration closes when the timer reaches zero.
Office hours
Event cards can hold date, location, agenda, and action links.
Read conversion docsOffer value
Lead with a clear promise and accessible form labels.
Reduce friction
Use concise fields, visible focus states, and helpful text.
Confirm trust
Show comparisons, guarantees, and risk reversal near the final action.
Discover
Visitors compare options.
Register
Visitors choose the next step.
Activate
Visitors receive the promised resource.
Comparison card
Use cards for narrow layouts and tables for detailed feature matrices.
| Pattern | Use | Dependency |
|---|---|---|
| Lead magnet | Offer plus form | None |
| Countdown | Event urgency | Static HTML or app-owned data |
| Guarantee | Risk reduction | None |
Guarantee card
Make reassurance visible without changing button or form behavior.
Risk reversal
Clarify cancellation, trial, refund, privacy, or support terms in plain language.
Does this require JavaScript?
No. FAQ disclosure uses native details and summary; no new JavaScript is required.
Can themes change marketing colors?
Yes. Load app-local CSS last and override --hds-* variables.
Ready CTA
Use the marketing showcase as a copyable starting point.
Sections are responsive, accessible, and dependency-free.