Interactive Components for Text

Interactive text and narrative components allow users to engage with content dynamically by revealing, organizing, or navigating information in different ways. Tools such as carousels, tabsets, dropdowns, toggles, and embedded media support multiple levels of engagement—enabling readers to quickly scan key points or explore more detailed explanations, examples, or stories as needed.

Carousels

Carousels allow users to move through a series of related content within a single space, either by clicking through slides at their own pace or by automatically cycling through content. This flexibility makes them useful for highlighting multiple findings, examples, or visuals without overwhelming the page, while supporting both passive viewing and active exploration.

[David’s support to add to css styles sheet and make Omni branded]

Key Finding 1

Participants reported increased access to services over time.

Key Finding 2

Engagement was highest among participants receiving case management.

Key Finding 3

Outcomes varied by site, suggesting local context matters.

Panel Tabsets

Panel tabsets organize content into separate, labeled sections that users can switch between without leaving the page. They are useful for presenting related information such as different groups, metrics, or narrative in a compact and organized way and helps reduce visual clutter.

[David’s support to make Omni branded]

First panel

You can include anything you want here, from code to charts.

```{r}
plot(cars$speed, cars$dist)
```

Second panel

Content of the second panel

Dropdown with Collapse

Dropdowns with collapse allow users to expand and hide sections of content as needed. They are useful for managing longer or more detailed information, enabling readers to focus on key points while still having access to additional context when desired.

TipAlignment with Evaluation Plan

Objective 1: Scope and Reach of Programs

• How many people does each provider serve, and what are the target populations?
• How do participant behaviors and outcomes change over time, and what types of program activities are being implemented and how often?

Toggle

Toggles allow users to switch between different views or levels of detail within the same space. This makes them especially useful for serving multiple audiences—supporting quick scanning of high-level information while also allowing others to explore more detailed or technical content as needed.

View additional information

This content is hidden by default and appears when the user clicks the text. It’s useful for providing extra context, definitions, or technical details that not ever user may need or want to read.

Audio

Embedded audio clips let you share participant stories, interview excerpts, or narrated summaries directly within a report. This is a powerful way to bring qualitative data to life — readers can hear directly from the people behind the numbers without leaving the page.

To embed an audio file, save it as an .mp3 or .wav to your project folder (e.g., the audio/ folder) and use the HTML audio player below. The controls attribute gives readers play, pause, and volume options.

Organization or Participant Story

A program participant shares their experience with case management services.

TipTips for Using Audio in Reports

• Keep clips short. Aim for 1–3 minutes per clip. Longer recordings can be linked externally or split into segments.
• Provide context. Always include a brief label or description above the player so readers know what they are about to hear.
• Consider accessibility. When possible, include a written transcript below the audio player for readers who cannot or prefer not to listen.
• File formats. .mp3 is the most widely supported format across browsers. .wav files also work but are much larger.

Video

Embedded videos can add context, highlight program activities, or share stories in a dynamic format. There are two main approaches: embedding a YouTube (or Vimeo) link, or hosting a video file directly in your project.

Embedding a YouTube Video

If your video is hosted on YouTube, you can embed it using an <iframe>. Replace the video ID in the URL below with your own (the part after v= in the YouTube link).

Embedding a Local Video File

If you have a video file (e.g., .mp4), save it to your project folder (e.g., the video/ folder) and use the HTML video player below. The controls attribute gives readers play, pause, and volume options.

Program Highlight

A short video showcasing program activities and participant engagement.

TipTips for Using Video in Reports

• YouTube embeds are easiest. No file size concerns, and they work across all browsers. Just swap in your video ID.
• Keep local files small. Large video files will slow down your site. Compress videos before adding them, or consider uploading to YouTube and embedding instead.
• Use .mp4 format. It has the widest browser support for local video files.
• Provide context. Include a title and brief description so readers know what they are about to watch.
• Consider accessibility. Add captions to your videos when possible, and include a text summary for key content.