Statistics Envelope

Stats envelopes provide a section to highlight key statistics for marketing purposes.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleDefault

Open Full Example

<div class="envelope-stats palette-bg-uo-green">
    <div class="envelope-stats__container">
        <div class="envelope-stats__content">
            <div class="envelope-stats__content__title">
                <h2>Statistics Envelope Title</h2>
            </div>
            <div class="envelope-stats__content__body">
                <p>This is sample body text. Our students are smart, creative, and increasingly diverse. We support and celebrate their successes, and we work hard to provide inspiring educational opportunities in the classroom and beyond. Our enrollment is intentionally set about 25,000 because that's the sweet spot for a residential campus like ours.</p>
            </div>
            <div class="grid grid--3col">
                <div class="grid__item">
                    <div class="stats">
                        <div class="stats__text">100%</div>
                        <div class="stats__subtext">This is subtext.</div>
                    </div>
                </div>
                <div class="grid__item">
                    <div class="stats">
                        <div class="stats__text">125%</div>
                        <div class="stats__subtext">This is subtext.</div>
                    </div>
                </div>
                <div class="grid__item">
                    <div class="stats"><div class="stats__text">125%</div>
                    <div class="stats__subtext">This is subtext.</div>
                </div>
            </div>
        </div>
    </div>
</div>

Guidance

Usage Guidance

• Limit grid to 2-4 elements: The goal of the statistics grid is to highlight a small set of key statistics, keep this number small so the statistics have sufficient impact.

Accessibility Guidance

• Ensure Text Contrast: Make sure the statistics text has sufficient contrast if you are using a custom background style.

Elements

Element	Description	Usage	Required	Multiple
Title	The hero title	Keep limited to a small sentence	No	No
Body	The stats teaser	Limit to a few sentences	No	No
Stats	The statistics numbers	Limit to numbers and percentages	Yes	Yes