# Interactive Elements

> Buttons, accordions, FAQs with structured data, slideshows, tab switchers, reviews, panels, overlays, and trigger-based popups.

These elements add interaction and structure: **Button**, **Accordion**, **FAQ**, **Slideshow**, **Switcher**, **Reviews**, **Panel**, **Overlay**, and **Popup**. Most are containers - the parent holds the shared settings, and each child item carries its own content.

---

## Button

A Button element is a container for one or more **Button Item** children, so a "Get a Quote / Call Us" pair is one element with two items.

### Container Settings

| Field | Options |
|-------|---------|
| **Size** | Default, Small, Large (applies to all items) |
| **Full width button** | checkbox |
| **Column Gap / Row Gap** | Default, Small, Medium, Large, Collapse |

### Per Button Item

| Field | Options |
|-------|---------|
| **Content** | The label text |
| **Icon** | Optional icon, aligned Left or Right |
| **Link** | Destination - external URL or an internal page picked from your pages list |
| **Style** | Inherit, Default, Primary, Secondary, Outline, Danger, Text, Link |

**Primary** is your main call-to-action style and comes from the brand colors in Site Settings. Internal links use the page picker, which keeps working even if the target page's slug changes later.

---

## Accordion

Collapsible panes for content that benefits from progressive disclosure. Each **Accordion Item** carries its own title, content, and (when enabled on the container) icon, image, meta text, and link.

Container settings include display toggles (**Show image**, **Show title**, **Show meta text**, **Show link**), behavior (**Allow multiple open items**, **Collapsible**), pane animation with duration, content padding, and a **Title Style** (Default, Primary, Hero, Divider).

Use an Accordion for general collapsible content. For questions and answers, use the FAQ element instead - it emits structured data.

---

## FAQ

The FAQ element renders question-and-answer pairs and emits FAQ structured data (schema.org FAQPage markup) so search engines understand the content. Each **FAQ Item** is one question and its answer.

| Field | Options |
|-------|---------|
| **Heading** | Optional heading above the list |
| **Style** | Accordion (collapsible) or List (all visible) |
| **Heading Element** | h2, h3, h4, div |

Write real questions people ask, phrased the way they search. One FAQ element per topic area is plenty.

---

## Slideshow

A rotating display of **Slideshow Item** children - each slide has its own title, content, media, and link, gated by the container's display toggles.

Key container settings:

| Field | Options |
|-------|---------|
| **Slide layout** | Cover (image fills the frame) or Card (contained) |
| **Card image size / shape** | Small through Extra large; Circle, Rounded, Square |
| **Transition** | Slide animation options |
| Autoplay, ratio, navigation | Shared across all slides |

The Card layout with a circle image is the classic testimonial carousel.

---

## Switcher

A tabbed content switcher: one list of items rendered as tab navigation plus swappable content panes. Container toggles control what each item shows (title, meta text, content) and whether the tab label uses a separate navigation label or thumbnail. **Item Max Width** caps pane width (None, Small through 2X-Large).

Use a Switcher when visitors need to compare a small number of parallel options (service tiers, locations, audiences).

---

## Reviews

A container of review items with schema.org Review markup per item, so ratings can surface in search results.

| Field | Options |
|-------|---------|
| **Heading** | Optional |
| **Aggregate Label** | The summary line above the reviews |
| **Show rating / date / author** | checkboxes |
| **Display** | Grid, Carousel, or List |
| **Columns** | For the grid display |

Only publish genuine reviews with real attribution. Fabricated review markup can earn a manual penalty from search engines.

---

## Panel

A boxed content panel: optional title, rich-text body, image, and link, with a **Style** select for the card treatment. It is the simple "one box of content" element - reach for a [Grid](/docs/help/grids) when you need several matching panels in a row.

---

## Overlay

An image with text positioned on top of it - title, meta, content, and link over a photo or video, with positioning and hover-transition controls, and an option to fill the available column space. Use it for image tiles that need a caption or a hover reveal.

---

## Popup

A modal that stays hidden until a trigger fires.

### Content

**Heading**, **Body text**, and a call-to-action (**Button text** + **Button link**).

### Trigger Settings

| Field | Options |
|-------|---------|
| **Trigger** | On page load, After a delay, On scroll depth, Exit intent |
| **Delay (seconds)** | For the delay trigger |
| **Scroll depth (%)** | For the scroll trigger |
| **Position** | Center, Top, Bottom, Bottom-right corner |
| **Show close button** | checkbox |
| **Show once per session** | checkbox - strongly recommended |
| **Max width, colors** | Background, text, button, and button-text colors, overlay opacity |

Keep **Show once per session** on and use one popup per page at most. An exit-intent offer converts; a load-triggered popup on every page annoys.

---

## Summary

| Element | Structured data | Typical use |
|---------|-----------------|-------------|
| Button | - | Calls to action |
| Accordion | - | Collapsible content |
| FAQ | FAQPage | Questions and answers |
| Slideshow | - | Hero rotators, testimonial carousels |
| Switcher | - | Tabbed comparisons |
| Reviews | Review | Testimonials with ratings |
| Panel | - | Single content box |
| Overlay | - | Captioned image tiles |
| Popup | - | Triggered offers |

As always: these render on the live site only after the next manual **Deploy**.

---
Source: https://seedlysites.com/docs/help/interactive-elements