InfoFacts: Helmet

CSS Style Overview

  • infofacts_helmet_univBlue
  • infofacts_helmet_medBlue
  • infofacts_helmet_lightBlue
  • infofacts_helmet_gray
  • infofacts_helmet_orange
  • infofacts_helmet_beige
  • infofacts_helmet_black
  • infofacts_helmet_white
  • infofacts_helmet_gradient

Better with something on top

The helmet as designed to be small round points of information that your page can use as a single UL or multiple UL's.   The top has a bit of extra flare on top wrapping around the content.  The first LI is larger font and meant to have limited text.  You can have extra lines under that but since its a rounded style we recommend not more than two or three small lines of text.

OmniUpdate users just place a single bulleted list with the top being a piece of data and a second / bottom bullet being description about that data.

All UL's in the editable zone will be styled like this.

Code Example:

<ul>

<li> Data</li>

<li>Why this is important</li>

</ul>

CSS Style

infofacts_helmet_univBlue

  • 100%
  • what we try to give each day
  • the more text you place inside the "rounder" the circle will be.  This is dynamic so if your layout has the style in a large space then the cicle looks like an oval.  The more that you put in that oval the more it will resemble a cicle.
  • Likewise if you place the style in a section which is small / compact in a normal layout then more text will strech the shape of the circle into an oval / egg shape.
  • This means that depending on your layout and your need the shapes will be varied.  Also on a phone / mobile device the syle can look different than when you are on your desktop machine.  

CSS Style

infofacts_helmet_medBlue

  • 100%
  • what we try to give each day

CSS Style

infofacts_helmet_lightBlue

  • 100%
  • what we try to give each day

CSS STYLE

infofacts_helmet_gray

  • 100%
  • what we try to give each day

CSS STYLE

infofacts_helmet_orange

  • 100%
  • what we try to give each day

CSS STYLE

infofacts_helmet_beige

  • 100%
  • what we try to give each day

CSS STYLE

infofacts_helmet_black

  • 100%
  • what we try to give each day

CSS STYLE

infofacts_helmet_white

  • 100%
  • what we try to give each day

CSS Style

infofacts_helmet_gradient

  • 100%
  • what we try to give each day