Info Facts

Highlight the most important statistics or accomplishments on your site.  These are very common when you want to point out significant numbers or small shout out facts. 

Special formatting is required to make this work, at a minimum you need to use a bulletd list.  The style will automatically turn your data into the info fact but for some there may be more specific ways to enter the information.

Basic Styles

These are very simple styles.  They do require the UL and then the system will format correctly.

Fact Plates

These will display a factoid (number / name) and then under that is extra data.  The style uses a simple list (UL) with the top item being the factoid and then one or two smaller list items under that. 

Style modifiers

• fact-plates-ring-thin
  • Turns the normal ring into a 1px wide thin ring around the content
• fact-plates-small
  • Minimzes the space that the normal fact plates take up.  This is helpful if you have a larger section but want a smaller plate format

• $1,234,567
• Easy to read facts go here
• a second line is possible

Fact Block

Use a bulleted list to create a bar with the factoid in a color region and extra details on the left or right. 
This style works with the two modifier classes.

Style Modifiers

• fact-reverse
  • this will make the factoid appear on the right side of the bar
• fact-zigzag
  • this will make your bar's factoids appear on alternating left and right sides.

• 60%
• You can have a title
• A fact about what we're discussing

You can even split the info blocks with your own text

• 25,000
• Then we need another list

Large Text

This is a very simple but effective way to create info facts.  It uses a bullet list with the first item as the informational fact and the second item as the explaination.

• Top 5%
• You can have a title
• A fact about what we're discussing

You can even split the info blocks with your own text

• #2
• The text is big, but you can also use the "larger" style to make it even bigger.

Fact Leaf

This makes the first element in your bulleted list the factoid, and all other lines are placed in a pill shaped container after.  You can also use the styles below to give variations on it.

Style Modifiers

• fact-reverse
  • Puts the leaf element on the right side
• fact-zigzag
  • Alternates the facts on left and right side

Bar Charts

These are typical for most charts, to allow for multiple bars we have formatted the style to use a list.

The first list item is the summary for the chart which you should format unit type | summary text.

Each row after that use a number | text format which will transform into a bar chart going top to bottom. 
Use the additional format below to translate it to vertical.

Style Modifiers

• bar-vertical
  • Will position your chart vertically, but leave the text below as horizontal, smaller descriptions are recommended.

• hours | Number of hours spent outside
• 12 | Winter
• 35 | Spring
• 85 | Summer
• 55 | Fall

Fact Top Line

The next styles are very small and simple.  They use bulleted lists for formatting so you can use multiple lits in a section, but they are meant to highlight some smaller chunk of data that won't overwhelm your page.

• Factoid or 189,343 items
• Brief description about this fact

You might need to do two in one section, that's fine.

• More Amazing News
• This is just here to make sure something important isn't lost in large text

Motion Styles

These styles help to illustrate a numeric value in a graphic that is dynamic.  Each style uses a bulleted list that the first item is a number which becomes a percentage complete for the graphic.  The second line is the display text value.

Remember for accessiblity to have your text representation make sense, so even if someone doesn't see the graphic the text will be understood.

Fact Bottom

This one keeps the title showing, when the user scrolls past it, an underline will appear along with the rest of the text. 

This uses a bulleted list with the first item being the factoid, and the remaining items being description.

• The Factoid Goes Here
• some explaining text, why is this important
• you may need more than one line
• but keep it short

A better example is below

• 1.25 Million
• Grant money received to fund student projects within the college last year

Fact Fall

This has a gental cascading effect for your text. The style uses a bulleted list with the first item being the factoid and the reset acting like description.  The factoid is in a box and as the user scrolls past the description will fall in under it.

• First Factoid Goes here
• Then we want a small amount of description so people understand.
• You can have multiple lines per factoid

And should you need to use it, multiple per section.

• Deadline to Apply Next Friday
• Remember to bring all your documents, membership cards, and sun glasses.
• Boxed lunches are provided.
• Event will end at some time.

 

Piece of Pie

• 65
• 65% results completed

Here's some text

• 25
• 25% of what we need