Card List
A horizontally scrolling card carousel with standard, compact, bullet, and vertical layout variants for showcasing products, services, or features.
What It Does
The Card List module displays content cards in either a horizontally scrollable row or a stacked vertical list. Each card contains an image, a title, a list of tags with descriptions, and an optional button. Standard shows a clean image-header card with tag details, Compact overlays the title on a full-bleed background image, Bullet replaces image cards with structured bullet-point cards, and Vertical stacks compact white cards in a single column instead of a carousel.
Best Used For
- Service or product category listings
- Portfolio showcases
- Feature overviews with visual cards
- Brand or team member highlights
Variants
Standard
Cards display an image header followed by a coloured title and a list of tags with descriptions. Each card has an optional call-to-action button at the bottom.
Best for: Service listings, product categories, or feature overviews
WithRichText
Replaces the standard description with rich text content supporting headings, paragraphs, and inline formatting.
Best for: Content-heavy sections where editors need formatting control beyond plain text
Vertical
Vertical stacked white cards, each with a logo, title, a wrapping gray tag line, and a chevron. Cards can be tapped as links, and each card supports a per-card cardColor override of the default white background.
Best for: Compact profile-style lists, such as a "My Businesses" section on a bio or contact page
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| variant | enumeration | No | Visual layout variant for the card grid -- standard, compact, bullet, or vertical |
| headerPosition | enumeration | No | Position of the header section relative to cards |
| textType | enumeration | No | Content mode for the description area -- NORMAL or RICHTEXT |
| richtext | richtext | No | Rich text content shown when textType is RICHTEXT |
| title | component | No | Section heading |
| description | component | No | Supporting text below the title |
| imageRatio | enumeration | No | Aspect ratio applied to card images |
| showCategoryFilter | boolean | No | Show category filter tabs above the cards |
| cards | component | Yes | List of card items with image, title, description, tags, link, and an optional per-card cardColor background override (used by the vertical variant) |
| bulletCards | component | No | Alternative card items displayed as bullet-point lists |
| background | component | No | Background style for the section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Use 3 to 6 cards per carousel for the best browsing experience on desktop.
- For the Standard variant, keep tag descriptions to 1–2 sentences each.
- For the Compact variant, ensure card images are high quality and visually consistent.
- For the Vertical variant, keep the tag line short enough to stay legible even though it wraps onto multiple lines.
- The section title colour should contrast well against the page background.
Supported Languages
Fully bilingual — all text fields support both English and Thai content.