Layout Patterns

Every website uses the same building blocks: Header, Body, and Footer. ANTSAND generates HTML structure from your data automatically.

How it works: Provide data → HTML generated. No data → section skipped.

— Main Navigation —

Logo

.nav-logo

Menu Item

.nav-item

Menu Item

.nav-item-container

Quick-start to make a Nav Bar

<div class="nav nav-black styles-dropshadow">
  <div class="nav-logo float-left position-relative">
    <img src="/images/logo.svg"/>
  </div>
  <ul class="nav-item-container">
    <li class="nav-item">Home</li>
    <li class="nav-item">Products</li>
    <li class="nav-item">About Us</li>
  </ul>
</div>

organization_name

String

→ Displayed in .nav-logo

logo_image_url

String (URL)

→ Logo image source

menu_items[]

Array

→ Loops to create .nav-item

menu_items[].label

String

→ Menu item text

menu_items[].url

String

→ Link href attribute

Complete Data Structure

{ "header_nav": { "logo": { "url": "/", "image_src": "/images/logo.svg", "text": "YourBrand" }, "nav": [ { "title": "Features", "link": "#features" }, { "title": "About", "link": "#about" }, { "title": "Contact", "link": "#contact" } ], "cta": [ { "text": "Get Started", "href": "/signup" } ] } }

— Intro Banner —

Hero Title

.hero-title

Hero Subtitle / Description

.hero-subtitle

Call to Action

.btn-primary

Quick-start to make an Intro Banner

<section class="antsand-hero antsand-hero-centered">
  <div class="antsand-container antsand-text-center">
    <h1 class="hero-title">{{ hero_title }}</h1>
    <p class="hero-subtitle">{{ hero_subtitle }}</p>
    <a href="{{ cta_url }}" class="antsand-btn antsand-btn-primary">{{ cta_text }}</a>
  </div>
</section>

hero_title

String

→ Main heading

hero_subtitle

String

→ Supporting text

cta_text

String

→ Button text

cta_url

String

→ Button link

Complete Data Structure

{ "hero_section": { "h1": "Launch Your Product with Confidence", "p": [ "Everything you need to build, launch, and grow your business." ], "cta": [ { "text": "Start Free Trial", "href": "/signup" }, { "text": "Watch Demo", "href": "#demo" } ] } }

— Feature Benefits —

Icon
Title
Description

.feature-card

Icon
Title
Description

Quick-start to make Feature Cards

<div class="antsand-grid antsand-grid-3">
  {% for feature in features %}
  <div class="feature-card antsand-text-center">
    <div class="feature-icon">{{ feature.icon }}</div>
    <h3>{{ feature.title }}</h3>
    <p>{{ feature.description }}</p>
  </div>
  {% endfor %}
</div>

features[]

Array

→ Feature cards array

features[].icon

String

→ Icon/emoji

features[].title

String

→ Feature heading

features[].description

String

→ Feature text

Complete Data Structure

{ "key_features": { "header": { "h2": "Powerful Features Built for You", "p": [ "Everything you need in one platform" ] }, "data": [ { "icon": "⚡", "h3": "Lightning Fast", "p": "Optimized performance that scales." }, { "icon": "🔒", "h3": "Secure by Default", "p": "Enterprise-grade security." } ] } }

— Service Products —

Service Image

Service Title & Description

Quick-start for Service Section

<div class="antsand-grid antsand-grid-2">
  <img src="{{ service_image }}"/>
  <div>
    <h2>{{ service_title }}</h2>
    <p>{{ service_description }}</p>
  </div>
</div>

service_image

String (URL)

→ Service image

service_title

String

→ Service heading

service_description

String

→ Service text

Complete Data Structure

{ "services": { "header": { "h2": "Our Services" }, "data": [ { "icon": "💼", "h3": "Consulting", "p": "Expert guidance for your business" }, { "icon": "🚀", "h3": "Development", "p": "Custom solutions tailored to you" } ] } }

— How it Works —

Icon
Title
Description

Quick-start for How it Works

<div class="antsand-grid antsand-grid-3 antsand-text-center">
  {% for step in how_it_works_steps %}
  <div class="how-step">
    <div class="step-number">{{ step.number }}</div>
    <i class="{{ step.icon }}"></i>
    <h3>{{ step.title }}</h3>
    <p>{{ step.description }}</p>
  </div>
  {% endfor %}
</div>

how_it_works_steps[]

Array

→ Process steps array

how_it_works_steps[].number

String

→ Step number (01, 02, etc.)

how_it_works_steps[].icon

String

→ Icon class name

how_it_works_steps[].title

String

→ Step title

how_it_works_steps[].description

String

→ Step description

Complete Data Structure

{ "how_it_works": { "header": { "h2": "How It Works" }, "steps": [ { "number": "01", "icon": "icon-class", "title": "Sign Up", "description": "Create your account in seconds" }, { "number": "02", "icon": "icon-class", "title": "Configure", "description": "Set up your preferences" } ] } }

— About Section —

About Title

About Content / Description

Quick-start for About Section

<section class="antsand-section antsand-text-center">
  <h2>{{ about_title }}</h2>
  <p>{{ about_content }}</p>
</section>

about_title

String

→ Section heading

about_content

String/HTML

→ About text

Complete Data Structure

{ "about_cta": { "header": { "h2": "About Our Company", "p": [ "We're on a mission to transform how businesses operate." ], "cta": [ { "text": "Learn More", "href": "/about" } ] } } }

— Team Section —

Photo
Name
Role

Quick-start for Team Section

<div class="antsand-grid antsand-grid-4">
  {% for member in team_members %}
  <div class="team-card antsand-text-center">
    <img src="{{ member.photo }}"/>
    <h4>{{ member.name }}</h4>
    <p>{{ member.role }}</p>
  </div>
  {% endfor %}
</div>

team_members[]

Array

→ Team members array

team_members[].photo

String (URL)

→ Member photo

team_members[].name

String

→ Member name

team_members[].role

String

→ Member position

Complete Data Structure

{ "team": { "header": { "h2": "Meet Our Team" }, "members": [ { "photo": "/images/team/member1.jpg", "name": "Jane Doe", "role": "CEO & Founder" }, { "photo": "/images/team/member2.jpg", "name": "John Smith", "role": "CTO" } ] } }

— Pricing Cards —

Plan
Price
Features
Button

Quick-start for Pricing Cards

<div class="antsand-pricing-container antsand-grid-3">
  {% for plan in pricing_plans %}
  <div class="antsand-pricing-card">
    <h3>{{ plan.name }}</h3>
    <div class="price">{{ plan.price }}</div>
    <ul>{{ plan.features }}</ul>
    <button class="antsand-btn">Choose Plan</button>
  </div>
  {% endfor %}
</div>

pricing_plans[]

Array

→ Pricing plans array

pricing_plans[].name

String

→ Plan name

pricing_plans[].price

String

→ Plan price

pricing_plans[].features

Array

→ Feature list

Complete Data Structure

{ "pricing": { "header": { "h2": "Simple, Transparent Pricing" }, "plans": [ { "name": "Starter", "price": "$19", "period": "/month", "features": [ "10 Projects", "5GB Storage", "Email Support" ], "cta": "Get Started" } ] } }

— Clients / Partners —

Logo 1

Logo 2

Logo 3

Logo 4

Quick-start for Clients Section

<div class="antsand-grid antsand-grid-4">
  {% for client in clients %}
  <div class="client-logo antsand-text-center">
    <img src="{{ client.logo }}" alt="{{ client.name }}"/>
  </div>
  {% endfor %}
</div>

clients[]

Array

→ Client logos array

clients[].logo

String (URL)

→ Client logo image

clients[].name

String

→ Client name

Complete Data Structure

{ "clients": { "header": { "h2": "Trusted by Leading Companies" }, "logos": [ { "src": "/images/clients/company1.svg", "alt": "Company Name" }, { "src": "/images/clients/company2.svg", "alt": "Company Name" } ] } }

— Portfolio / Gallery —

Project Image

.portfolio-item

Project Image

Quick-start for Portfolio Gallery

<div class="antsand-grid antsand-grid-3">
  {% for project in portfolio %}
  <div class="portfolio-item">
    <img src="{{ project.image }}"/>
    <h4>{{ project.title }}</h4>
    <p>{{ project.description }}</p>
  </div>
  {% endfor %}
</div>

portfolio[]

Array

→ Portfolio items

portfolio[].image

String (URL)

→ Project image

portfolio[].title

String

→ Project title

portfolio[].description

String

→ Project description

Complete Data Structure

{ "portfolio": { "header": { "h2": "Our Work" }, "projects": [ { "image": "/images/portfolio/project1.jpg", "title": "E-commerce Platform", "category": "Web Development", "link": "/portfolio/project-1" } ] } }

— Carousel / Slider —

[Slide 1: Image + Caption]

‹

›

Quick-start for Carousel

component_type

String

→ Set to "carousel" or "slider"

autoplay

Boolean

→ Auto-advance slides (optional)

interval

Number

→ Milliseconds between slides (default: 5000)

show_arrows

Boolean

→ Show navigation arrows (default: true)

show_dots

Boolean

→ Show dot indicators (default: true)

data[].img_src

String (URL)

→ Slide image

data[].title

String

→ Slide caption title

data[].description

String

→ Slide caption text

Complete Data Structure

{ "body": { "component_type": "carousel", "autoplay": true, "interval": 5000, "show_arrows": true, "show_dots": true, "data": [ { "img_src": "/images/slide1.jpg", "title": "Welcome to Our Platform", "description": "The best solution for your business", "cta": { "title": "Get Started", "link": "/signup" } }, { "img_src": "/images/slide2.jpg", "title": "Powerful Features", "description": "Everything you need in one place" } ] } }

💡 Note: component_type: "carousel" enables slider with auto-play, arrows, and dot navigation

— Testimonials / Reviews —

"Quote"
- Author
Rating

.testimonial-card

"Quote"
- Author
Rating

Quick-start for Testimonials

<div class="antsand-grid antsand-grid-2">
  {% for testimonial in testimonials %}
  <div class="testimonial-card">
    <p>"{{ testimonial.quote }}"</p>
    <h5>- {{ testimonial.author }}</h5>
    <div class="rating">{{ testimonial.rating }}</div>
  </div>
  {% endfor %}
</div>

testimonials[]

Array

→ Testimonials array

testimonials[].quote

String

→ Testimonial text

testimonials[].author

String

→ Author name

testimonials[].rating

Number (1-5)

→ Star rating

Complete Data Structure

{ "testimonials": { "header": { "h2": "What Our Customers Say" }, "data": [ { "quote": "This platform transformed our business.", "author": "Sarah Johnson", "role": "CEO, TechStart Inc.", "rating": 5 } ] } }

— Blog / News Articles —

Image
Title
Excerpt
Date

.blog-card

Image
Title
Excerpt
Date

Quick-start for Blog Grid

<div class="antsand-grid antsand-grid-3">
  {% for post in blog_posts %}
  <article class="blog-card">
    <img src="{{ post.featured_image }}"/>
    <h3>{{ post.title }}</h3>
    <p>{{ post.excerpt }}</p>
    <time>{{ post.published_date }}</time>
  </article>
  {% endfor %}
</div>

blog_posts[]

Array

→ Blog posts array

blog_posts[].featured_image

String (URL)

→ Post image

blog_posts[].title

String

→ Post title

blog_posts[].excerpt

String

→ Post summary

blog_posts[].published_date

Date

→ Publication date

Complete Data Structure

{ "blog": { "header": { "h2": "Latest Articles" }, "posts": [ { "featured_image": "/images/blog/post1.jpg", "title": "Getting Started with Our Platform", "excerpt": "Learn the basics in 5 minutes", "published_date": "2025-01-15", "link": "/blog/getting-started" } ] } }

— Contact Form —

Name Input

.form-input

Email Input

Message Textarea

Submit Button

Quick-start for Contact Form

<form class="contact-form" action="{{ form_action }}">
  <input type="text" name="name" placeholder="Your Name" class="form-input"/>
  <input type="email" name="email" placeholder="Your Email" class="form-input"/>
  <textarea name="message" placeholder="Message" class="form-textarea"></textarea>
  <button type="submit" class="antsand-btn antsand-btn-primary">Send</button>
</form>

form_action

String (URL)

→ Form submission URL

form_fields[]

Array

→ Form field configurations

submit_button_text

String

→ Button label

Complete Data Structure

{ "contact_section": { "header": { "h2": "Get in Touch", "p": [ "We'd love to hear from you." ] }, "form": { "action": "/contact", "method": "POST", "fields": [ { "type": "text", "name": "name", "placeholder": "Your Name", "required": true }, { "type": "email", "name": "email", "placeholder": "Your Email" } ] } } }

— FAQ / Accordion —

Question 1 ▼

.accordion-item

Question 2 ▼

Question 3 ▼

Quick-start for FAQ Accordion

<div class="accordion">
  {% for faq in faqs %}
  <div class="accordion-item">
    <div class="accordion-header">{{ faq.question }}</div>
    <div class="accordion-content">{{ faq.answer }}</div>
  </div>
  {% endfor %}
</div>

faqs[]

Array

→ FAQ items array

faqs[].question

String

→ FAQ question

faqs[].answer

String/HTML

→ FAQ answer

Complete Data Structure

{ "header": { "h2": "Frequently Asked Questions" }, "body": { "component_type": "faq", "data": [ { "section_name": "Getting Started", "items": [ { "item_name": "How do I get started?", "item_description": "Simply sign up and follow our setup wizard." }, { "item_name": "What payment methods do you accept?", "item_description": "We accept all major credit cards and PayPal." } ] } ] } }

💡 Note: component_type: "faq" enables collapsible FAQ rendering with sections and items

— Multitask Section —

Image / Illustration

Feature Title
Description

Quick-start for Multitask Section

<div class="antsand-grid antsand-grid-2 antsand-align-center">
  <div>
    <img src="{{ multitask_image }}"/>
  </div>
  <div>
    {% for task in multitask_features %}
    <div class="multitask-item">
      <span class="task-number">{{ task.number }}</span>
      <h4>{{ task.title }}</h4>
      <p>{{ task.description }}</p>
    </div>
    {% endfor %}
  </div>
</div>

multitask_image

String (URL)

→ Section image

multitask_features[]

Array

→ Features array

multitask_features[].number

String

→ Feature number

multitask_features[].title

String

→ Feature title

multitask_features[].description

String

→ Feature description

Complete Data Structure

{ "multitask_section": { "header": { "h2": "Everything You Need" }, "image": "/images/multitask-illustration.svg", "features": [ { "number": "01", "title": "Advanced Analytics", "description": "Track every metric that matters" } ] } }

— Newsletter Subscribe —

Subscribe Title

Email Input

Button

Quick-start for Subscribe Form

<div class="subscribe-section antsand-text-center">
  <h3>{{ subscribe_title }}</h3>
  <form class="subscribe-form">
    <input type="email" placeholder="Your email" class="form-input"/>
    <button class="antsand-btn antsand-btn-primary">Subscribe</button>
  </form>
</div>

subscribe_title

String

→ Section heading

subscribe_action

String (URL)

→ Form submission URL

subscribe_button_text

String

→ Button label

Complete Data Structure

{ "subscribe": { "header": { "h2": "Stay Updated", "p": [ "Subscribe to our newsletter for the latest updates" ] }, "form": { "action": "/subscribe", "placeholder": "Enter your email", "button_text": "Subscribe" } } }

— Footer —

Column 1
Links

.footer-col

Column 2
Links

Column 3
Links

Column 4
Social

Quick-start for Footer

<footer class="antsand-footer">
  <div class="antsand-grid antsand-grid-4">
    {% for column in footer_columns %}
    <div class="footer-col">
      <h4>{{ column.title }}</h4>
      <ul>...{{ column.links }}</ul>
    </div>
    {% endfor %}
  </div>
  <div class="copyright">{{ copyright_text }}</div>
</footer>

footer_columns[]

Array

→ Footer columns

footer_columns[].title

String

→ Column heading

footer_columns[].links

Array

→ Column links

copyright_text

String

→ Copyright notice

social_links[]

Array

→ Social media links