Features & Content

Icon Feature Grid

The most-used module in Tonic. A grid of icon + heading + description items with configurable column count and item layout.

Fields

  • Eyebrow, Heading, Subtext — Optional section header above the grid.
  • Items (repeater) — Each item has: Icon (emoji or SVG), Title, Description (rich text), optional Link text and URL.
  • Columns (desktop) — 2, 3, or 4. Always collapses to 1 column on mobile.
  • Item layout — Icon Top (icon above text) or Icon Left (icon inline with text).

Feature List

Checklist-style feature display. Each item has an icon, title, description, and optional link. Good for "What's included" sections and comparison-adjacent content.

Cards Repeater

Flexible card grid. Each card supports a media area (image, icon, or none), eyebrow, heading, description, and button. Column count and media position are editor-controlled.

Media position options

  • Top — Media above the card content. Standard blog-card style.
  • Left — Media to the left of text. Good for icon-driven feature lists in card form.
  • None — Text-only card with optional icon.

Process Steps

Numbered or icon-driven step sequence. Optional connector lines between steps. Two orientations: Horizontal (left to right) and Vertical (stacked).

Fields per step

  • Node type — Number (auto-incremented) or Icon (custom emoji/SVG).
  • Step title — Heading for this step.
  • Description — Rich text body for this step.
  • Link text / URL — Optional "Learn more" link per step.

Timeline

Date-labeled vertical timeline. Each item has a date label, heading, and description. Useful for company history, product roadmaps, case study progression, and event sequences.

Section Header

Standalone eyebrow + heading + subheading + optional CTA module. Use between content sections when you need a titled separator without a full content block. Supports left, center, and right text alignment.