Data Highlight

Anatomy

Display a data point with a description and optional lead-in.

Usage Guidelines

Data Highlights should read as a sentence from start to finish. As an example: "Over 3,000 international scholars in 2024" where the lead in is "over" the stat is "3,000" and the description is "international scholars in 2024".

Implementation

<div class="ua_component_wrapper">
  <p class="ua_data-highlight ">
    <span class="ua_data-highlight_lead">Lead</span>
    <strong class="ua_data-highlight_stat">Title</strong>
    <span class="ua_data-highlight_description">Description</span>
  </p>
</div>

<DataHighlight title="Title" description="Description" lead="Lead" />

React Component Props

title string (required)

The main data point to display

description string (required)

The description of the data point

lead string

An optional lead-in for the data point

align center | left | right

The text alignment for the data highlight component