Circle Info

The Circle Info module arranges items — stats, steps, or features — around an animated circular graphic, a distinctive way to present a process or set of highlights.

How to add the Circle Info module

1. Add a section and row, then add the Circle Info module.
2. Add a child item for each point on the circle — icon or number, title, and description.
3. Set the circle size, rotation, and animation.

Content

Items

• Each item has an Icon or Number, a Title, and a Description.
• Items are distributed evenly around the circle.

Circle

• Circle Size and Start Angle / Rotation.
• Center Content — an optional icon, image, or text in the middle.
• Animation — animate items in as the circle scrolls into view.

Design

• Connector / Ring — color and thickness of the circular line.
• Icon / Number — size, color, and background.
• Title and Description typography.

Tip

Circle Info works best with 3–6 items — enough to show a cycle or process without crowding the ring.