M02 Statistic

Component Name

Statistic

Description

Statistic component can present simple statistic data. 

 

Configuration Options

Tab: Data 

  • Data point Variant
  • Static data point Value (for static data point variant only)
  • Rte for statistic description.
  • Change description to uppercase
  • Add quotation marks
  • Author
  • Source name
  • Source external URL
  • Enable social sharing

Tab: Style

  • Background image for mobile (if other backgrounds are not set this will be used for all breakpoints )
  • Background image for tablet
  • Background image for desktop
  • Color (background and content) - if the background image is set, the background color will be overwritten by it
  • Text color override
  • Inner content padding - option to disable/enable paddings
  • Choose layout - default, horizontal, vertical
  • Alignment - for setting the size of component and alignment

Tab: Dynamic (For Dynamic data point variant only)

  • Start from - From this number animation will start
  • End - This is the final value (will be shown after at the end of animation)
  • Duration in seconds - duration of the animation
  • Separator - separator for thousands, improve the readability of large numbers
  • Decimal places separator
  • Suffix
  • Prefix

General options

99%
“

  • Static data point
  • without social sharing
  • light grey background
  • horizontal alignment
  • changed to uppercase
  • added quotation marks
  • added author
  • added source name and external URL

–

David Holmes

F5.com
99%
“

  • Static data point
  • without social sharing
  • background image - different on every breakpoint
  • horizontal alignment
  • changed to uppercase
  • added quotation marks
  • added author
  • added source name and external URL

–

David Holmes

F5.com
99%
“

  • Static data point
  • with social sharing
  • red background, custom font color
  • vertical alignment
  • cutom color is not working for social share button

–

David Holmes

F5.com

Dynamic data point variant

$1%
“

  • Dynamic data point
  • Start from: 1
  • End: 1000000.05
  • Duration: 2s
  • Separator: , 
  • Decimal places separator: .
  • Suffix: %
  • Prefix: $

1M
“

  • Dynamic data point
  • Start from: 1
  • End: 100.50
  • Duration: 7s
  • Separator: none
  • Decimal places separator: none (because of that there is no dot)
  • Suffix: M
  • Prefix: none

Aligments + some random settings for betters feaute presentation

99%
“

  • Left Align, one third width
  • Should not be used with horizontal layout

–

David Holmes

F5.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

Fusce tempor pharetra fermentum. Donec at sem venenatis, tristique tellus eget, malesuada augue. Etiam id urna augue. Suspendisse velit ante, malesuada eget aliquet eu, semper vel elit. Aliquam dapibus tincidunt erat, in aliquet mi aliquet vel. Cras auctor dictum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius at libero nec scelerisque. Nullam auctor magna lorem, in venenatis erat cursus in.

Praesent eget laoreet elit. Nulla sed malesuada urna. Mauris a lacus dapibus, pulvinar nisl mollis, malesuada erat. Duis sit amet felis urna. Vestibulum posuere ultricies nibh, quis suscipit odio vehicula vitae. Quisque egestas purus id dui feugiat pellentesque. Integer fermentum aliquet aliquet. Nulla vel sem id ligula gravida lacinia nec quis quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

99%
“

  • Right Align, one third width
  • Should not be used with horizontal
    layout

–

David Holmes

F5.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

Fusce tempor pharetra fermentum. Donec at sem venenatis, tristique tellus eget, malesuada augue. Etiam id urna augue. Suspendisse velit ante, malesuada eget aliquet eu, semper vel elit. Aliquam dapibus tincidunt erat, in aliquet mi aliquet vel. Cras auctor dictum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius at libero nec scelerisque. Nullam auctor magna lorem, in venenatis erat cursus in.

Praesent eget laoreet elit. Nulla sed malesuada urna. Mauris a lacus dapibus, pulvinar nisl mollis, malesuada erat. Duis sit amet felis urna. Vestibulum posuere ultricies nibh, quis suscipit odio vehicula vitae. Quisque egestas purus id dui feugiat pellentesque. Integer fermentum aliquet aliquet. Nulla vel sem id ligula gravida lacinia nec quis quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

99%
“

  • Left Align, half width
  • Should not be used with horizontal
    layout

–

David Holmes

F5.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

Fusce tempor pharetra fermentum. Donec at sem venenatis, tristique tellus eget, malesuada augue. Etiam id urna augue. Suspendisse velit ante, malesuada eget aliquet eu, semper vel elit. Aliquam dapibus tincidunt erat, in aliquet mi aliquet vel. Cras auctor dictum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius at libero nec scelerisque. Nullam auctor magna lorem, in venenatis erat cursus in.

Praesent eget laoreet elit. Nulla sed malesuada urna. Mauris a lacus dapibus, pulvinar nisl mollis, malesuada erat. Duis sit amet felis urna. Vestibulum posuere ultricies nibh, quis suscipit odio vehicula vitae. Quisque egestas purus id dui feugiat pellentesque. Integer fermentum aliquet aliquet. Nulla vel sem id ligula gravida lacinia nec quis quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

99%
“

  • Left Align, half width
  • Should not be used with horizontal
    layout

–

David Holmes

F5.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

Fusce tempor pharetra fermentum. Donec at sem venenatis, tristique tellus eget, malesuada augue. Etiam id urna augue. Suspendisse velit ante, malesuada eget aliquet eu, semper vel elit. Aliquam dapibus tincidunt erat, in aliquet mi aliquet vel. Cras auctor dictum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius at libero nec scelerisque. Nullam auctor magna lorem, in venenatis erat cursus in.

Praesent eget laoreet elit. Nulla sed malesuada urna. Mauris a lacus dapibus, pulvinar nisl mollis, malesuada erat. Duis sit amet felis urna. Vestibulum posuere ultricies nibh, quis suscipit odio vehicula vitae. Quisque egestas purus id dui feugiat pellentesque. Integer fermentum aliquet aliquet. Nulla vel sem id ligula gravida lacinia nec quis quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

99%
“

  • Left Align, two thirds width

–

David Holmes

F5.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

Fusce tempor pharetra fermentum. Donec at sem venenatis, tristique tellus eget, malesuada augue. Etiam id urna augue. Suspendisse velit ante, malesuada eget aliquet eu, semper vel elit. Aliquam dapibus tincidunt erat, in aliquet mi aliquet vel. Cras auctor dictum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius at libero nec scelerisque. Nullam auctor magna lorem, in venenatis erat cursus in.

Praesent eget laoreet elit. Nulla sed malesuada urna. Mauris a lacus dapibus, pulvinar nisl mollis, malesuada erat. Duis sit amet felis urna. Vestibulum posuere ultricies nibh, quis suscipit odio vehicula vitae. Quisque egestas purus id dui feugiat pellentesque. Integer fermentum aliquet aliquet. Nulla vel sem id ligula gravida lacinia nec quis quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

99%
“

  • Right Align, two thirds width

–

David Holmes

F5.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

Fusce tempor pharetra fermentum. Donec at sem venenatis, tristique tellus eget, malesuada augue. Etiam id urna augue. Suspendisse velit ante, malesuada eget aliquet eu, semper vel elit. Aliquam dapibus tincidunt erat, in aliquet mi aliquet vel. Cras auctor dictum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius at libero nec scelerisque. Nullam auctor magna lorem, in venenatis erat cursus in.

Praesent eget laoreet elit. Nulla sed malesuada urna. Mauris a lacus dapibus, pulvinar nisl mollis, malesuada erat. Duis sit amet felis urna. Vestibulum posuere ultricies nibh, quis suscipit odio vehicula vitae. Quisque egestas purus id dui feugiat pellentesque. Integer fermentum aliquet aliquet. Nulla vel sem id ligula gravida lacinia nec quis quam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies velit imperdiet lacinia faucibus. Phasellus mattis libero risus, in lacinia velit luctus ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec viverra consectetur lorem eget mollis. Suspendisse ut elit sit amet eros elementum convallis. Nulla posuere nunc sem. Phasellus malesuada viverra magna, in lobortis erat feugiat a. Vestibulum a ipsum in metus bibendum malesuada. Vivamus eget egestas leo. Phasellus convallis felis eu ex maximus ornare. Pellentesque eu tortor et ante sodales luctus. Nam accumsan quam id sem finibus placerat. Mauris aliquet malesuada leo, sed tempor nunc vulputate in.

99%
“

  • Full browser width
  • Can be placed in column inside column
  • Content padding turned off

–

David Holmes

F5.com
99%
“

  • Full browser width
  • Inner content padding turned on

–

David Holmes

F5.com

Component on diffrent backgrounds

99%
“

  • Auto color and auto background
  • Auto inner content padding

–

David Holmes

F5.com
99%
“

  • Dark grey background and white content
  • Auto inner content padding

–

David Holmes

F5.com
99%
“

  • Dark grey background and white content
  • No content padding

–

David Holmes

F5.com