Content Popover
Figma Component: 22236-111207
Last modified with commit 449aa34 on
by Sara Deric.
A modal overlay component designed to display detailed information across various content types. Features a semi-transparent backdrop with a centered white card containing title, optional tag badge, a single image or multiple images (image carousel) with navigation, and rich text content. Responsive design with mobile-optimized layout. To simplify the handoff of information across the many different content types the client wants to present, such as: - Product CTA box explanations - Product events and activities - Product artists and guests - Product venues - Product offer items - Product optional packages A single Content Popover component was created that can handle all of these use cases with consistent interaction patterns and responsive behavior.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Open popover overlay | When user clicks a trigger element (e.g., info icon, "Read more" button), the popover appears as a full-screen modal overlay with semi-transparent backdrop. |
| system | Display header with title and optional tag | Header section shows component title. If applicable, displays an inherited tag badge (e.g., "Day party" from event type) with icon and brand accent color. |
| system | Render image carousel | Images display in a grey background container (elevated-a surface). Desktop shows side-by-side with navigation arrows (previous disabled when on first image, next active). Mobile shows single image with page indicator dots below. |
| system | Display rich text content | Text column shows paragraphs, bold headings, and bulleted lists. Vertical scrollbar appears when content exceeds container height. |
| system | Close popover | Close button positioned top-right. Clicking closes the popover and returns user to previous view. |
| editor | Configure popover title | Set the heading text that appears in the header section. |
| editor | Add popover text content | Compose rich text content. Supports paragraphs, bold text, bulleted lists, and semantic HTML. Content automatically wraps and scrolls if it exceeds vertical space. |
| editor | Upload images | Add one or multiple images to the image carousel. Images are automatically fitted to container with object-contain to preserve aspect ratios. On desktop, users can navigate with arrow buttons; on mobile, swipe gestures work with page indicators. |
| user | Navigate image carousel | Desktop users click previous/next arrow buttons to browse images. Mobile users swipe horizontally. Current position indicated by page dots (active dot is highlighted). Disabled arrow indicates first/last image. |
| user | Scroll long content | When text content exceeds visible area, a vertical scrollbar appears on the right edge. Users scroll with mouse wheel, trackpad, or touch gestures to read full content. |
| user | Close popover | Click the close button (× icon) in top-right corner and return to the previous view. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |