Cards & Layout
Service Card
A section of individually styled cards for highlighting services, pricing tiers, or feature comparisons.
What It Does
The Service Card module displays a row of individually styled cards, each with an icon, title, feature list, and call-to-action button. Cards can have distinct background colours and badge labels, making this module ideal for pricing tiers, service comparisons, or feature highlights.
Best Used For
- Pricing pages and plan comparisons
- Service offering overviews
- Feature comparison sections
- Highlight grids with icons and short descriptions
Variants
Default
Three cards side-by-side with badges, icons, feature lists, and CTA buttons. The centre card is highlighted with a distinct background colour.
Best for: Pricing pages and service comparison sections
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| headerAlignment | enumeration | No | Alignment of the section header -- left, center, or right |
| title | component | No | Section heading above the card grid |
| description | component | No | Supporting text below the title |
| background | component | No | Background style for the section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
| cards | component | Yes | Service card items with icon, title, description, and link |
Tips for Great Results
- Use badges sparingly — highlight only one or two cards (e.g. "Popular" or "Best Value") to guide the visitor's decision.
- Keep feature lists to five or fewer items per card so they remain scannable.
- Match the
headerAlignmentto the overall page layout: CENTER works well for standalone sections, LEFT suits pages with a sidebar. - Give each card a distinct
backgroundcolour if you want to visually differentiate tiers.
Supported Languages
Fully bilingual — all text fields support both English and Thai content.