Structure Guide

Understanding the universal ANTSAND section pattern system

Core Principle

Every ANTSAND section follows the same nested structure: Section → Header / Data / Footer.
Change ONLY the parent class to restyle. All child classes remain consistent across all templates.

Dual-Class System: Each element has TWO classes for backward compatibility:
• Prefixed class (e.g., header-h1, data-container) — indicates which AREA the element belongs to
• Semantic class (e.g., title, container) — universal styling hook for the parent section class

Universal Section Structure

Section (wrapper)
Header
Data/Body
Footer
.hero-1 ← Section parent (hero-1, features-2, pricing-3, etc.) │ ├── .section-container .container ← Main content wrapper (dual class) ├── .section-media .media ← Background video/image (optional) ├── .section-overlay .overlay ← Semi-transparent overlay (optional) │ ├── HEADER AREA ├── .header-section ├── .header-container .container ├── .header-h1 .title ← Main title ├── .header-h2 .subtitle ← Subtitle ├── .header-h3 .title ├── .header-h4 .subtitle ├── .header-p .description ← Description ├── .header-span-container .span-container │ └── .header-span .span ← Meta/badges └── .header-cta-container .cta-container └── .header-cta .cta ← Buttons │ ├── DATA/BODY AREA ├── .data-container .container ← Grid container └── .data-sub-container .sub-container ← Repeated for each item ├── .data-img-container .img-container ├── .data-media .media ├── .data-content-wrapper .content-wrapper ├── .data-h1 .title ├── .data-h2 .title ├── .data-h3 .title ← Item title ├── .data-h4 .subtitle ├── .data-p .description ← Item description ├── .data-span .span ← Price, status ├── .data-feature-container .feature-container │ └── .data-feature-item .feature-item └── .data-cta-container .cta-container └── .data-cta .cta │ └── FOOTER AREA ├── .footer-section ├── .footer-container .container ├── .footer-sub-container .sub-container ├── .footer-logo-container .logo-container │ └── .footer-logo .logo ├── .footer-h1 .title ├── .footer-h2 .title ├── .footer-h3 .title ← Column titles ├── .footer-h4 .subtitle ├── .footer-p .description ├── .footer-cta-container .cta-container │ └── .footer-cta .cta ├── .footer-social-container .social-container │ └── .footer-social .social └── .footer-copyright-container .copyright-container └── .footer-copyright .copyright

CSS Classes by Area

All classes are prefixed by their area (header-, data-, footer-) for clarity and conflict-free styling.

Section (Wrapper)
The outermost wrapper that defines the entire section style
.section-section
Main section wrapper
Parent class that controls all child styling (e.g., hero-1, features-2)
Required background
.section-container
Content container
Centers content, sets max-width, adds padding
Required container
.section-media
Background media
Video or image background for section
Optional media
.section-overlay
Overlay layer
Semi-transparent overlay on background
Optional background
.section-column_count
Grid columns
Controls responsive column layout
Optional column_count
Header (Section Header)
The header area of a section - titles, descriptions, intro CTAs
.header-section
Header section wrapper
Background container for header area
Optional background
.header-container
Header container
Content wrapper within header
Required container
.header-media
Header media
Background image/video for header
Optional media
.header-overlay
Header overlay
Overlay on header background
Optional background
.header-h1
Main title
Primary heading (largest)
Required text
.header-h2
Subtitle
Secondary heading
Optional text
.header-h3
Tertiary heading
Third-level heading
Optional text
.header-p
Description text
Paragraph/body text
Optional text
.header-span_container
Span wrapper
Container for meta/badge spans
Optional container
.header-span
Inline text
Meta info, badges, labels
Optional text
.header-cta_container
CTA wrapper
Groups action buttons together
Optional container
.header-cta
Call-to-action
Primary button/link
Optional button
Data/Body (Content Area)
The main content area - cards, items, features, repeated content
.data-container
Data container
Main wrapper for data items
Required container
.data-sub_container
Item container
Each repeated card/item wrapper
Required container
.data-img_container
Image wrapper
Contains item image
Optional container
.data-media
Item media
Image or video for item
Optional media
.data-content_wrapper
Content wrapper
Wraps text content within item
Optional container
.data-h2
Section title
Title for data section
Optional text
.data-h3
Item title
Title for each card/item
Required text
.data-h4
Sub-item title
Smaller heading within item
Optional text
.data-p
Item paragraph
Description text for item
Optional text
.data-description
Item description
Extended description text
Optional text
.data-span_container
Span wrapper
Container for prices, badges
Optional container
.data-span
Inline text
Price, status, meta info
Optional text
.data-notes_container
Notes wrapper
Container for additional notes
Optional container
.data-profile
Profile section
Author/user profile area
Optional container
.data-date
Date display
Timestamp, publish date
Optional text
.data-form_container
Form wrapper
Contains form elements
Optional container
.data-feature_container
Features wrapper
Container for feature list
Optional container
.data-feature_item
Feature item
Individual feature entry
Optional container
.data-cta_container
CTA wrapper
Groups item action buttons
Optional container
.data-cta
Item CTA
Action button for item
Optional button
.data-blog_date
Blog date
Post publish date
Optional text
.data-blog_profile
Blog profile
Author info section
Optional container
Footer (Section Footer)
The footer area of a section - links, social, copyright
.footer-section
Footer section wrapper
Background container for footer
Optional container
.footer-container
Footer container
Content wrapper within footer
Required container
.footer-media
Footer media
Background image/video
Optional media
.footer-overlay
Footer overlay
Overlay on footer background
Optional background
.footer-logo_container
Logo wrapper
Contains footer logo
Optional container
.footer-logo
Footer logo
Brand logo image
Optional image
.footer-h3
Column title
Footer column heading
Optional text
.footer-h4
Sub-column title
Smaller column heading
Optional text
.footer-p
Footer text
Description, tagline
Optional text
.footer-span_container
Span wrapper
Contact info wrapper
Optional container
.footer-span
Footer span
Email, phone, address
Optional text
.footer-cta_container
Links wrapper
Groups footer links
Optional container
.footer-cta
Footer link
Navigation link
Optional link
.footer-social_container
Social wrapper
Groups social icons
Optional container
.footer-social
Social link
Individual social icon
Optional link
.footer-copyright_container
Copyright wrapper
Bottom bar container
Optional container
.footer-copyright
Copyright text
Legal/copyright notice
Optional text

Template Types

Each template type has multiple visual variants. Structure stays the same - only parent class changes.

Hero Section
hero-1 hero-2 hero-3 hero-4 hero-5
.hero-centered .hero-reversed .hero-full

Structure

  • container
  • sub-container (content)
  • eyebrow
  • title
  • description
  • cta-container > cta
  • sub-container (image)
  • img-container

Example HTML


  

    

      Welcome
      
Main Headline

      
Supporting text here

      

        Get Started
        Learn More
Features Section
features-1 features-2 features-3 features-4 features-5
.features-2col .features-3col .features-4col

Structure

  • container
  • header-section > title, description
  • data-container
  • sub-container (repeated)
  • icon
  • title
  • description
  • cta-container > cta

Example HTML


  

    

      
Our Features

      
What makes us different

    

    

      

        
⚡

        
Fast

        
Lightning quick performance

      

      

        
🔒

        
Secure

        
Enterprise-grade security
Pricing Section
pricing-1 pricing-2 pricing-3 pricing-4 pricing-5
.featured

Structure

  • container
  • header-section > title, description
  • data-container
  • sub-container (each plan)
  • badge (optional)
  • title
  • description
  • price
  • features (ul)
  • cta-container > cta

Example HTML


  

    

      
Pricing Plans

      
Choose your plan

    

    

      

        
Basic

        
For individuals

        
$9/month

        
    
          
  • Feature one
    • 
          
  • Feature two
    • 
        

        

          Choose Plan
        

      

      

        Popular
        
Pro
Footer Section
footer-1 footer-2 footer-3 footer-4 footer-5

Structure

  • container
  • sub-container (each column)
  • title
  • description
  • social-container > social
  • footer-section (copyright)
  • cta-container > cta

Example HTML

AI Prompt Context

Copy this context to help AI assistants generate correct ANTSAND templates.

ANTSAND Pattern System Context 
# ANTSAND Section Pattern System

## Core Principle
Change ONLY the parent class to completely restyle any section.
All child classes remain the same across all variants.

## Dual-Class System (Backward Compatibility)
Each element has TWO classes: prefixed (area-specific) + semantic (universal)
Example: class="header-h1 title" or class="data-container container"
- Prefixed class: Specific to area (header-, data-, footer-)
- Semantic class: Universal name (title, description, container)

## Universal Structure with Prefixed Classes
```
.{section}-{variant}                    ← Parent class (hero-1, footer-1)
  └── .section-overlay .overlay         ← Background overlay (optional)
  │
  ├── HEADER AREA
  │   └── .header-section
  │       └── .header-container .container
  │           ├── .header-h1 .title           ← Main title (h1)
  │           ├── .header-h2 .subtitle        ← Subtitle (h2)
  │           ├── .header-h3 .subtitle        ← (h3)
  │           ├── .header-h4, .header-h5, .header-h6
  │           ├── .header-p .description      ← Paragraph
  │           ├── .header-span-container .meta-container
  │           │   └── .header-span .meta
  │           ├── .header-img-container .img-container
  │           └── .header-cta-container .cta-container
  │               └── .header-cta .cta
  │
  ├── DATA/BODY AREA
  │   └── .data-container .container
  │       └── .data-sub-container .sub-container (repeated)
  │           ├── .data-img-container .img-container
  │           ├── .data-media .media
  │           ├── .data-content-wrapper .content-wrapper
  │           ├── .data-h1 .title, .data-h2 .title, .data-h3 .title
  │           ├── .data-h4 .subtitle, .data-h5, .data-h6
  │           ├── .data-p .description
  │           ├── .data-description .description
  │           ├── .data-span-container .meta-container
  │           │   └── .data-span .meta
  │           ├── .data-feature-container .features
  │           │   └── .data-feature-item .feature-item
  │           └── .data-cta-container .cta-container
  │               └── .data-cta .cta
  │
  └── FOOTER AREA (within section)
      └── .footer-section
          └── .footer-container .container
              └── .footer-sub-container .sub-container
                  ├── .footer-h1 .title ... .footer-h6
                  ├── .footer-p .description
                  ├── .footer-social-container .social-container
                  │   └── .footer-social .social
                  └── .footer-copyright-container .copyright-container
                      └── .footer-copyright .copyright
```

## Available Parent Classes
- Hero: hero-1, hero-2, hero-3, hero-4, hero-5
- Features: features-1, features-2, features-3, features-4, features-5
- Pricing: pricing-1, pricing-2, pricing-3, pricing-4, pricing-5
- Footer: footer-1, footer-2, footer-3, footer-4, footer-5

## Modifiers
- Hero: .hero-centered, .hero-reversed, .hero-full
- Features: .features-2col, .features-3col, .features-4col
- Pricing: .featured (on sub-container)

## Rules
1. Use DUAL classes for maximum compatibility (e.g., class="data-h3 title")
2. Prefixed class allows area-specific overrides
3. Semantic class enables universal styling
4. Change ONLY the parent class number to restyle
5. Structure remains identical across all variants
6. Users can add custom classes alongside ANTSAND classes