Cards

Cards are where Antsand shows both sides of the system: Bootstrap-like semantic patterns and Tailwind-like field utilities.

Promote repeated card patterns into Sass v2. Use Databoard utilities for one-off layout, spacing, motion, and polish.

Component
▦

Semantic card shell

Use antsand-card, antsand-card-shadow, and antsand-card-hover when the visual pattern repeats across generated sites.

Sass v2 pattern
Card classes
Semantic card classes text 
data.sub_container = antsand-card antsand-card-shadow antsand-card-hover
data.item.css_class = antsand-card-feature
data.h3 = antsand-card-title
data.p = antsand-card-text
Image / media card

Image / media card

For blog previews, products, portfolios, and docs examples. The media frame is a stable slot: data.img_container.

Media
Read more
Media card mapping text 
data.item.css_class = antsand-card-media
data.img_container = antsand-card-media-frame
data.img_src = antsand-card-media-img
data.content_wrapper = antsand-card-body

Call-to-action card

A centered content/action card for downloads, upgrades, newsletter prompts, app installs, and membership funnels.

CTA
Primary action Secondary
CTA card mapping text 
data.item.css_class = antsand-card-cta
data.cta_container = stylesdoc-path-actions
data.cta = antsand-btn antsand-btn-primary
Horizontal card

Horizontal card

Side-by-side media and content. It remains the same H/B/F data contract; only the card class changes.

Horizontal
View pattern
Horizontal card mapping text 
data.item.css_class = antsand-card-horizontal
data.img_container = antsand-card-media-frame
data.content_wrapper = antsand-card-body

Dark card with glow

Dark-on-dark layouts need explicit text, borders, and separation. Use shadow-glow or shadow-glow-brand from Sass v2 utilities.

Dark surface
Glow utility
Dark card + utility text 
data.item.css_class = antsand-card-dark shadow-glow
// or use shadow-glow-brand for orange brand glow

Same card, utilities only

If the pattern is one-off, compose it in Databoard: bg-white, border, rounded-xl, p-6, shadow-lg, hover:shadow-glow.

Utility composed
Use utilities
Utility-only card text 
data.item.css_class = bg-white border rounded-xl p-6 shadow-lg hover:shadow-glow transition-all

Pricing tier card

Use for memberships, SaaS plans, retainers, paid newsletters, and tiered service packages.

$25/mo
  • Member dashboard
  • Private notes archive
  • Email updates
Pricing
Choose plan
Pricing card mapping text 
data.item.css_class = antsand-card-pricing
data.description = pricing price + feature list HTML
data.cta = antsand-btn antsand-btn-primary

Quote / testimonial card

Antsand gives me a stable contract: content stays data, design stays Sass, and the generated page remains readable.

Generated Site Owner
Databoard user
Testimonial
Testimonial card mapping text 
data.item.css_class = antsand-card-testimonial
data.p = quoted testimonial text
data.description = author block HTML

KPI / stat card

Compact cards for dashboards, launch pages, analytics, progress reports, and portfolio metrics.

1,520
compiled selectors
Metric
Stat card mapping text 
data.item.css_class = antsand-card-stat
data.description = stat value + stat label HTML
data.p = supporting metric note
◆
Portfolio

Project / portfolio card

Use for generated portfolio grids, case studies, projects, apps, labs, and documentation examples.

Project
HMVC Sass v2 Databoard
View project
Project card mapping text 
data.item.css_class = antsand-card-project
data.category = Portfolio
data.tags = [HMVC, Sass v2, Databoard]
data.cta = antsand-btn antsand-btn-outline-primary
✦

Centered feature card

Use for product benefits, framework capabilities, service features, and landing page value props.

Feature
Feature card mapping text 
data.item.css_class = antsand-card-feature
data.icon = ✦
data.h3 = feature title
data.p = feature description

Two ways to build cards

Semantic Sass v2 classes make repeated patterns easy. Field utilities make one-off page composition fast.

Databoard card mapping text 
data.container      = antsand-grid md:grid-cols-3 gap-6
data.sub_container  = antsand-card antsand-card-shadow antsand-card-hover
data.item.css_class = antsand-card-media | antsand-card-cta | shadow-glow
data.img_container  = antsand-card-media-frame
data.img_src        = antsand-card-media-img
data.h3             = antsand-card-title
data.p              = antsand-card-text
data.cta            = antsand-btn antsand-btn-primary

Accent Cards from the Same H/B/F Data

The Three Ways cards are not a custom page hack. They are normal card data: icon, h3, p, ul, small, then Sass applies nth-child accents and backgrounds.

Card pattern

Data first

Each card starts with portable content fields that map cleanly into the shared body renderer.

  • icon or icon_svg
  • h3 title
  • p description
  • ul feature list
  • small footer note

Semantic card shell

The card still uses the normal Sass v2 classes, so the pattern is reusable across generated sites.

  • antsand-card
  • antsand-card-shadow
  • antsand-card-hover
  • antsand-card-list
  • antsand-card-note

Board Sass polish

Page-specific Sass adds nth-child accents, soft backgrounds, icon color, and spacing without changing the template.

  • nth-child accents
  • soft gradient backgrounds
  • icon container color
  • card hover shadow
  • responsive grid
Accent card mapping text 
data.container = stylesdoc-three-ways-grid
data.sub_container = antsand-card antsand-card-shadow antsand-card-hover stylesdoc-three-way-card
data.icon_container = antsand-card-icon stylesdoc-three-way-icon
data.h3 = antsand-card-title stylesdoc-three-way-title
data.p = antsand-card-text stylesdoc-three-way-copy
data.list = antsand-card-list stylesdoc-three-way-list
data.small = antsand-card-note stylesdoc-three-way-note

ANTSAND

AI-readable CSS, Header/Body/Footer contracts, and generated-site hardening across the ANTSAND ecosystem.

ANTSAND Styles v2 - Open Source CSS Framework