ANTSAND v2 Pattern System

Section Patterns

Universal section patterns for rapid website building. Change ONE parent class to completely restyle any section.

Quick Reference - Universal Child Classes

.container Main wrapper
.sub-container Repeated items
.title Headings
.description Body text
.icon Icons
.cta-container Button wrapper
.cta Buttons/links
.img-container Image wrapper
.social-container Social icons wrapper
.social Social icon
.features Feature list (ul)
.badge Badges

H Hero

Full-width hero sections for landing pages

Modifiers: .hero-centered .hero-reversed .hero-full
.container Main wrapper (max-width, centered)
.sub-container Content area or image area
.eyebrow Small text above title
.title Main headline
.description Subtitle/description
.cta-container Button wrapper
.cta Primary button
.cta-secondary Secondary button (add class)
.img-container Image wrapper
Purple Gradient
Purple Gradient .hero-1
Background linear-gradient(135deg, #667eea, #764ba2)
Text white / rgba(255,255,255,0.85)
CTA white bg, #764ba2 text
css: { section: { container: { css_class: "hero-1" } } }
Light / Clean
Light / Clean .hero-2
Background #f9fafb (gray-50)
Text gray-900 / gray-600
CTA primary bg, white text
css: { section: { container: { css_class: "hero-2" } } }
Dark
Dark .hero-3
Background linear-gradient(135deg, #1a1a2e, #16213e)
Text white / gray-400
CTA primary bg, white text
css: { section: { container: { css_class: "hero-3" } } }
Minimal White
Minimal White .hero-4
Background white + border-bottom
Text gray-900 / gray-600
CTA gray-900 bg, white text
css: { section: { container: { css_class: "hero-4" } } }
Blue Gradient
Blue Gradient .hero-5
Background linear-gradient(135deg, #0f172a, #1e3a5f)
Text white / gray-300
CTA #38bdf8 bg, dark text
css: { section: { container: { css_class: "hero-5" } } }

F Features

Feature grid sections with icons

Modifiers: .features-2col .features-3col .features-4col
.container Main wrapper
.header-section Optional section header
.data-container Grid container for items
.sub-container Each feature item
.icon Feature icon
.title Feature title
.description Feature description
.cta-container Optional link wrapper
.cta Link/button
Light + Colored Icons
Light + Colored Icons .features-1
Background white
Icon primary-light bg, primary text
Cards none (flat)
css: { section: { container: { css_class: "features-1" } } }
Cards with Shadow
Cards with Shadow .features-2
Background #f9fafb (gray-50)
Icon primary bg, white, circle
Cards white + shadow
css: { section: { container: { css_class: "features-2" } } }
Dark
Dark .features-3
Background linear-gradient(135deg, #1a1a2e, #16213e)
Icon rgba white bg, primary text
Cards none (dark bg)
css: { section: { container: { css_class: "features-3" } } }
Left-aligned + Border
Left-aligned + Border .features-4
Background white
Icon gray-100 bg, gray-700 text
Cards left border on hover
css: { section: { container: { css_class: "features-4" } } }
Gradient Cards
Gradient Cards .features-5
Background #f9fafb (gray-50)
Icon rgba white bg, white text
Cards purple gradient
css: { section: { container: { css_class: "features-5" } } }

P Pricing

Pricing table sections

Modifiers: .featured (add to sub-container)
.container Main wrapper
.header-section Optional section header
.data-container Grid container for cards
.sub-container Each pricing card
.badge Optional "Popular" badge
.title Plan name
.description Plan description
.price Price display
.features Feature list (ul)
.cta-container Button wrapper
.cta Buy button
Light Cards
Light Cards .pricing-1
Background white
Cards white + gray-200 border
Featured primary border
css: { section: { container: { css_class: "pricing-1" } } }
Gray Background
Gray Background .pricing-2
Background #f9fafb (gray-50)
Cards white + shadow
Featured purple gradient bg
css: { section: { container: { css_class: "pricing-2" } } }
Dark
Dark .pricing-3
Background linear-gradient(135deg, #1a1a2e, #16213e)
Cards rgba white + border
Featured primary bg
css: { section: { container: { css_class: "pricing-3" } } }
Minimal
Minimal .pricing-4
Background white
Cards no radius, thin border
Featured thick border
css: { section: { container: { css_class: "pricing-4" } } }
Gradient Accent
Gradient Accent .pricing-5
Background #f9fafb (gray-50)
Cards white + top accent bar
Featured thicker accent bar
css: { section: { container: { css_class: "pricing-5" } } }