Feature Grid
A split-panel section with a headline and feature list on one side, and a media panel on the other, with horizontal and vertical layout options.
What It Does
The Feature Grid module presents a collection of features alongside a media panel. The section headline sits above the features, and each feature item includes an icon and label. Two layout options control whether the features and media panel stack vertically or sit side by side horizontally. An optional reverse flag flips the media and text positions.
Best Used For
- Product or service feature overviews
- "What's included" sections on pricing or landing pages
- Platform capability summaries with supporting visuals
- Any section comparing multiple features in a structured layout
Variants
Horizontal
The feature list and media panel sit side by side. Best for sections with 4 or more features that benefit from a wide layout.
Best for: Desktop-first feature pages and product landing pages
Vertical
The feature list and media stack vertically. Best for narrower viewports or sections with fewer features.
Best for: Mobile-friendly feature sections and compact layouts
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| layout | enumeration | Yes | Controls the orientation -- Horizontal (side by side) or Vertical (stacked) |
| isReverse | boolean | Yes | Flips the position of the media and text panels |
| alignment | enumeration | Yes | Grid alignment |
| sectionTitle | component | No | Main heading for the entire section, with configurable colour |
| sectionSubTitle | component | No | Secondary heading above or below the section title |
| titles | component | No | Headline lines for the feature panel (up to 3), each with a colour |
| subTitle | component | No | Sub-heading within the feature panel |
| description | component | No | Supporting body text below the titles |
| features | component | No | List of feature items -- each has an icon and label |
| button | component | No | Call-to-action button below the features |
| background | component | No | Background colour or image for the section |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- Use 4 to 8 features for the best grid balance. Fewer than 3 looks sparse.
- Choose icons that are visually consistent across all features — use the same icon style and size.
- The reverse option is useful for alternating layout direction when pairing multiple Feature Grid modules on a page to create a natural zigzag flow.
- Keep feature labels to 3 to 5 words — they read as short descriptors, not full sentences.
- Use a contrasting background colour to visually separate this section from the content above and below it.
Supported Languages
Fully bilingual — all text fields support both English and Thai content.