Unit Landing - Brag Stat
The Unit Landing Brag Stat component displays number-based info like a ranking, milestone or date in a bold, scannable format that includes a large number, short description, and optional section header.
Options and Settings
- Choose a white, black or light gray background
- Display 2 or 3 brags
- Styling options for each brag item:
- Headline: Sans, serif or condensed
- Number: Small/large sans or small/large serif
- Optional brag label (50 character limit including spaces)
- Serif or sans
- Optional brag description (150 character limit including spaces)
- Optional animation
- Alignment with other elements
- Keep top and bottom margin
- Remove bottom margin
- Remove top margin
- Remove top and bottom margin
- Brag number must include a short, number-based phrase such as Top 10, No. 1, 250+, 2:1
- Don’t overload the page with too many stats so they maintain their visual impact.
- Include context around the number or fact so it makes sense to the site user.
By the Numbers
-
00%
Nemo Enim Ipsam
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui.
-
$00 million+
Et Harum Quidem
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
-
000+
Maiores Alias Consequatur
Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Above Options: White background, three brags displayed, serif headline style, small sans-serif number style, sans-serif label style, animated, top margin removed.
No. 0 for Something Good — Again.
-
#0
Sed ut Perspiciatis
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
-
000,000+
Ut Enim ad Minima
Exercitationem ullam corporis suscipit laboriosam ullam corporis suscipit laboriosam.
Above Options: Black background, two brags displayed, sans-serif headline style, large sans-serif number style, serif label style, no animation.
Setting the Standard in Example Education
-
00:0
Fusce Tortor Tellus
Viverra id ligula ut, mollis dapibus velit
-
$000 million
ed purus elit euismod quis
Vivamus ultrices euismod hendrerit.
-
00+
Fusce Consectetur Ipsum
Nunc id pellentesque tortor gravida vitae
Above Options: Gray background, three brags displayed, condensed headline style, large sans-serif number style, sans-serif label style, no animation.
Below Options: Black background, three brags displayed, serif headline style, large sans-serif number style, sans-serif label style, no animation, top and bottom margin removed.
Top Ranked Example College Programs
-
No. 0
Praesent Facilisis Convallis
Nullam dignissim pellentesque pharetra, ut in nibh quis libero.
-
#0
Integer Vitae Felis
Maecenas aliquam gravida ipsum et venenatis, sed et gravida sem,
-
Top 0
Nam Quis Imperdiet Diam
Nulla sit amet euismod tellus, vel aliquam risus.