Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum.
Drupal Stat Components
There are multiple Drupal components designed for highlighting numerical information: the Stat, Stat Billboard and Stat Compare.
The "Stat card" component
The Stat Card component has several color and configuration options and can be placed in 2-4 column sections.
1234
billion
Adipiscing ex laboris quis duis voluptate nostrud suscipit, ea doming laboris velaliquam.
1234
Adipiscing ex laboris quis duis voluptate nostrud suscipit, ea doming laboris velaliquam.
1234
lorem ipsum
1234
billion
Adipiscing ex laboris quis duis voluptate nostrud suscipit, ea doming laboris velaliquam.
1234
billion
1234
1234
billion
Adipiscing ex laboris
$123
Ut ullamco dignissim nunc ut quis
$123
Ut ullamco dignissim nunc ut quis
The "Stat" Component
The basic Stat component includes a space for the statistic, descriptive text, a background color and an optional image. Stats can be oriented to the left or the right and can contain disclosures within a tooltip.
*Drupal editors: the Stat component can only be placed in One Column sections.
Stat component colors
$123
123%
Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum. Nam at tortor in tellus interdum sagittis.
Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum. Nam at tortor in tellus interdum sagittis.
123
123
Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum. Nam at tortor in tellus interdum sagittis.
Cum sociis natoque penatibus et magnis dis parturient. Donec posuere vulputate arcu. Sed augue ipsum.
123
123%
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Praesent ac sem eget est egestas volutpat. Nunc nec neque.
Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum. Nam at tortor in tellus interdum sagittis.
123
123
Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum. Nam at tortor in tellus interdum sagittis.
Nulla consequat massa quis enim. Phasellus gravida semper nisi. Vivamus in erat ut urna cursus vestibulum. Nam at tortor in tellus interdum sagittis.
123
Stat component with image
Stat components with images allow the same color options but instead of the number on one side and the descriptive text on the other, this configuration displays all text on one side and an image on the other.
123
Praesent ac sem eget est egestas volutpat. Nunc nec neque. Pellentesque habitant morbi tristique senectus et netus et malesuada.
123
Ut id nisl quis enim dignissim sagittis. Quisque malesuada placerat nisl. Ut a nisl id ante tempus hendrerit.
$123
Praesent ac sem eget est egestas volutpat. Nunc nec neque. Pellentesque habitant morbi tristique senectus et netus et malesuada.
The "Stat Billboard" component
The Stat Billboard component allows quite a few configuration options, including an outline or solid background color, several text elements, left or right orientation and all of the approved brand color options.
*Drupal editors: the Stat component can only be placed in a Full One Column section.
The Stat Billboard with outline configuration
$1,234
Annually
Average earnings for investors
Stat billboard with outline
This example contains a heading with the number, description and heading within the outline box.
All stat components can contain disclosures or source documentation within a tooltip.
123%
Increase
Sed fringilla mauris sit amet
Sed fringilla mauris sit amet
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce risus nisl, viverra et.
$1,234
Savings
Outline stat billboard without stat heading or stat description
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
#123
Cras risus ipsum faucibus
In hac habitasse platea dictumst
Ut tincidunt tincidunt erat. Sed a libero. Ut tincidunt tincidunt erat.
#123
Lorem
Vivamus in erat ut urna
Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
$123
Praesent porttitor, nulla vitae posuere iaculis, arcu
Anisl dignissim dolor, a pretium mi sem ut ipsum. Morbi nec metus. Vivamus consectetuer hendrerit lacus. Vivamus quis mi.
Stat Billboard with fill color
#1,234
Lorem lorem
Maecenas tempus, tellus eget condimentum
Aenean vulputate eleifend tellus. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
32
Million
Nam pretium turpis et arcu.. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.
Pellentesque libero tortor tincidunt et
Vestibulum volutpat pretium libero. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo.
123%
Ut tincidunt tincidunt erat. Sed a libero. Ut tincidunt tincidunt erat.
Duis leo. Vivamus elementum semper nisi. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh.
1,234
Etiam ultrice
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.
In ac felis quis tortor class aptent taciti sociosqu ad
Vivamus in erat ut urna cursus vestibulum.. Nullam tincidunt adipiscing enim. Nam eget dui. Cras non dolor. Nulla neque dolor.
1,234
Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
#1,234
Lorem
Morbi nec metus. Vivamus consectetuer hendrerit lacus. Vivamus quis mi.
Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor.
1,234%
Lorem lorem
Etiam sit amet orci eget sed mollis eros et ultrices
Nam pretium turpis et arcu. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque auctor neque nec urna. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.
#123
Lorem lorem
Nam pretium turpis et arcu.
Pellentesque auctor neque nec urna.
Eget egestas libero turpis vel mi.
Nam pretium turpis et arcu. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque auctor neque nec urna. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.
Stat Billboard with no fill or outline
$123
Ut tincidunt tincidunt erat. Sed a libero. Ut tincidunt tincidunt erat.
1,234
Proin viverra ligula sit amet
Phasellus gravida semper nisi. Cras id dui. Fusce vel dui.
Donec vitae sapien ut libero venenatis faucibus. Vivamus quis mi. Etiam vitae tortor. In auctor lobortis lacus. Proin viverra ligula sit amet. Proin viverra ligula sit amet.
123
Eget egestas libero turpis vel mi.
Nam pretium turpis et arcu. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque auctor neque nec urna. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.
$1,234
Praesent metus tellus elementum eu
Sed lectus. Integer tincidunt. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
1,234
Sed lectus. Integer tincidunt. Pellentesque libero tortor, tincidunt et, tincidunt eget,
$1,234
Aenean tellus metus, bibendum sed.
Sed lectus. Integer tincidunt. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
1,234
Posuere ac, mattis non, nunc.
Sed lectus. Integer tincidunt. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
Stat Billboard with full-width background color
123%
Stat Billboard with full-width background
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
123%
Sed lectus. Integer tincidunt. Pellentesque libero tortor
Sed lectus. Integer tincidunt. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
$123
Suspendisse faucibus nunc et pellentesque
Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Maecenas egestas arcu quis ligula mattis placerat. Aenean commodo ligula eget dolor. Quisque id mi.
1,234%
Aenean tellus metus, bibendum sed, posuere ac, mattis non.
Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Maecenas egestas arcu quis ligula mattis placerat. Aenean commodo ligula eget dolor. Quisque id mi.
$1,234
Aenean tellus metus, bibendum sed, posuere ac.
Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Maecenas egestas arcu quis ligula mattis placerat. Aenean commodo ligula eget dolor. Quisque id mi.
1,234%
Suspendisse potenti. Phasellus magna.
In auctor lobortis lacus. Curabitur turpis. Praesent blandit laoreet nibh. Phasellus dolor.
123%
Curabitur turpis
In auctor lobortis lacus. Curabitur turpis. Praesent blandit laoreet nibh. Phasellus dolor. Phasellus viverra nulla ut metus varius laoreet. Donec vitae orci sed dolor rutrum auctor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
1,234%
Vivamus quis mi.
In hac habitasse platea dictumst. Nullam dictum felis eu pede mollis pretium. Aenean vulputate eleifend tellus. Phasellus magna.
The "Stat Compare" component
The stat compare component allows you to display multiple stats in a contrasting layout. The Stat Compare's configuration options include several colors, optional icons and straight or angled shapes.
*Drupal editors: the Stat Compare component can only be placed in a Full One Column section.
100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
100%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
10
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
10,000
Praesent blandit laoreet nibh. Phasellus blandit leo ut odio. Vivamus quis mi.
$999
Phasellus blandit leo ut odio. Cras sagittis. Morbi nec metus. Curabitur ligula sapien, tincidunt non.
Stat Compare with angled shapes
99%
Vivamus quis mi. Sed fringilla mauris sit amet nibh.
123
Vivamus quis mi. Sed fringilla mauris sit amet nibh.
#100
Vivamus quis mi. Sed fringilla mauris sit amet nibh. Vivamus quis mi. Sed fringilla mauris sit amet nibh.
456
Phasellus accumsan cursus velit. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida.