Interactive HTML Components

Partnering with Clarity Data Studio, there is a range of options for displaying metrics, callouts, tips, and other key information. These “HTML components” are designed for different reporting purposes and include guidance on when to use each one, along with examples. Some components are featured on other pages of this site.

Interactive Components

Interactive components require user engagement—such as clicking, hovering, or expanding content—to reveal additional information. These components are designed to make reports more engaging and flexible, allowing users to explore content at their own pace.

Interactive elements are especially useful for serving multiple audiences within a single report: readers can quickly scan high-level findings or choose to dig deeper into more detailed or technical information as needed. Features like tooltips, dropdowns, buttons, tab panels, and expandable sections also enhance data visualizations by enabling comparisons across groups, sites, or geographies without overwhelming the page with information.

Explore interactive components organized by their purpose:

• Metrics components — for helping users analyze, compare, or explore data
• Text/Narrative components — for helping engage with or uncover content
  
• Organization components — for helping users move through or access content
• Visual components - for visual storytelling