Cards Widget

Use the Cards widget to build repeatable card layouts with preset visual directions and direct on-canvas editing.

AI Generate can also return Cards sections directly when a page brief calls for services, steps, stories, or testimonial-style layouts. When it does, the result opens as a normal Cards widget so you can keep editing it with the controls below.

Add a Cards widget

Presets and card editing

• Presets: choose Feature Card, Story Card, Editorial Overlay, or Timeline Highlight.
• Preset Tone: switch between Light and Dark defaults.
• Edit card text directly on the canvas instead of opening a separate content form.
• Hover a card to reorder it, swap media, add or change a link, duplicate it, or delete it.
• Open Cards Settings to drag cards into a new order or delete extras from the section list.
• Use Add card to create another card, or Reset sample cards to restore starter content for the active preset.

Layout settings

• Display Mode: Grid or Carousel
• Gap
• Equal Height
• Columns or Slides Per View for mobile, tablet, and desktop

Style settings

• Visibility toggles for shared card parts such as media, eyebrow, badge/stat, title, description, chips, meta, and CTA visuals depending on the preset
• Slot colors for Title, Description, Eyebrow, Meta, Badge, and CTA
• Per-slot font family and supported weight controls for title, description, eyebrow, badge/stat, meta or step labels, and CTA text
• Typography size controls for title and description
• Card border radius and border width
• Media aspect ratio: 16:9, 4:3, 1:1, or Auto
• Preset-specific controls such as overlay tint, timeline line/node styling, and timeline focus scaling in carousel mode
• Shadow controls

Carousel settings

• Optional carousel title with heading tag, alignment, and color controls
• Show Arrows
• Show Counter
• Autoplay
• Loop
• Arrow Style: Pill, Subtle, Minimal
• Arrow Icon: Chevron, Arrow, Long
• Arrow Placement: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Overlay Wide, or Overlay Middle
• Arrow color, background, radius, and size controls
• Autoplay Delay

If you use the Timeline Highlight preset in carousel mode, you can keep every slide neutral or emphasize the left, center, or right slide with separate active and inactive scale controls.

Toolbar actions

• Cards Settings
• Alignment
• Animation
• Position
• Copy
• Delete

Use Responsive Design to review card counts and spacing on smaller screens before you publish.