Organisms are self-contained landing page sections — each one built from the component library, ready to stack into a complete page. Every label below describes the section's purpose, not a specific topic.
A centered hero communicates a single, focused value proposition. One headline. One supporting line. One call to action. No distractions.
The split hero places a contact form directly in the viewport alongside the headline. Visitors see the ask and the value proposition simultaneously — no scrolling required.
Each card highlights a single benefit with an icon, a title, and a supporting sentence. Keep it scannable.
Image-driven cards for service areas, product categories, or content topics. Each tile is a gateway deeper into the site.
Show the user the path from A to B. Numbered steps reduce perceived complexity and build confidence.
Some products and services carry misconceptions, objections, or fears. This section tackles them head-on with honest, authoritative writing — not sales copy, but genuine education.
The tone is conversational and confident. It acknowledges what visitors might be thinking ("Is this too good to be true?", "What's the catch?", "Does this really work?") and answers with evidence, examples, and empathy.
Long-form editorial content builds trust that bullet points can't. It signals: "We understand your hesitation, and we respect you enough to explain."
"This is a real testimonial. It describes the outcome in the customer's own words — specific, emotional, credible."
"A second voice reinforces credibility. Different person, different angle, same conclusion: it works."
"A third testimonial — even with 4 stars — shows authenticity. Perfect scores can feel manufactured."
A promotional banner creates urgency and drives action. Use sparingly — one offer per page keeps the focus sharp.
Three tiers let visitors self-select. The featured plan gets a colored border and a recommendation badge.
Horizontal scrolling cards — ideal for blog posts, news updates, or featured content. Use the arrow buttons to navigate.
A high-prominence layout for 2 or 3 named experts. Each card combines portrait, role, bio, credentials, and contact links.
This is the re-ask — placed after social proof and pricing, it catches visitors who scrolled past the first CTA.
Floating gradient shapes and a deep navy backdrop create depth and gravitas without any JavaScript. Use for mission statements, launches, or section breaks.
The stage organism is just the full-bleed background plus its diffuse spheres and cursor glow. Whatever sits over it (this text, the chat on the right) is composed from independent components — drop them into a .container to lay them out however you need.
A vertical timeline reveals a process or journey with connected dots and optional images per step.
A countdown creates urgency for launches, limited offers, or event registrations.
The navy herobox creates a dramatic break from white content sections. Ideal for key messages, product announcements, or conversion-focused CTAs. The teal accent glow adds subtle depth.
Green signals safety and natural authority. Use this variant for health, finance, sustainability, or any vertical where trust is the primary emotion. Same structure as the navy variant, different mood.
The centered variant drops the image column entirely. Full-width text creates a banner-like statement. Pair with a countdown, a single CTA, or both.
The angle is controlled by --skew-angle (default 3deg) and --skew-height (default 60px). The fill color uses --section-bg.
Visitors need to feel understood before they trust the solution. Each card names one specific frustration with a red top-border to signal danger.
The default layout. The eye reads left-to-right: headline first, then the supporting visual. This works well when the text carries the primary message.
The reversed row creates rhythm and prevents visual monotony. The alternating pattern keeps users scrolling — each section feels fresh.
Three zigzag rows is the sweet spot — enough to communicate depth, not so many that they become wallpaper.
A side-by-side "us vs them" comparison makes the choice obvious. Red column for the old way, teal column for the better way.
| Aspect | The old way | The better way |
|---|---|---|
| Approach | ✗ Generic, one-size-fits-all | ✓ Tailored to your situation |
| Response time | ✗ Days or weeks | ✓ Within 24 hours |
| Transparency | ✗ Hidden fees, unclear process | ✓ Full visibility, no surprises |
| Follow-up | ✗ Disappears after the sale | ✓ Ongoing support and updates |
| Expertise | ✗ Generalist, surface-level | ✓ Deep specialization |
A 90-second video converts better than 2,000 words of copy. Place it alongside a text summary for visitors who can't watch right now.
Portraits, names, roles, and short bios. Each card humanizes the brand and builds personal trust.
Each tab reveals a different use case with its own headline, description, image, and customer quote.
Auto-advances every 5 seconds. Hover to pause. Navigate with arrows or dots.
Multiple contact channels reduce friction. Some people prefer forms, others want to call. Show both.
Bootstrap 5.3's grid-only stylesheet is loaded alongside main.css. Use .container, .row, and .col-* — widths must always sum to 12. These examples use .col-3 (always 4-up, no responsive collapse) and a .col-1 ruler.
A fixed-position chat bubble in the lower-right corner expands into a full conversation panel. Use it as a low-friction support or lead-capture entry point. The live demo is pinned to the bottom-right of this page.
Look at the bottom-right corner of the screen → click the bubble to open the panel.