InfoFacts: Squares
A Section on the side
Squares were designed to be small block points of information that your page can use as a section element with paragraph (p) tags. The element is a section tag with paragraph and it will be the side text and the remaining paragraph tags are part of the square. The first line of the square is larger and runs vertically. All other paragraph tags are contained inside the square. If you have a large text on the section tag then you may need to add additional space to make sure the vertical text doesn't overrun the square.
OmniUpdate users just type the text normally using the paragraph type. Change the type on the first paragraph to section using the editor.
Code Example:
<section><p> Data</p></section> -- vertically placed
<p>Why this is important</p>
<p>Second line and so on....</p>
CSS Style
infofacts_squares_univBlue
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS Style
infofacts_squares_medBlue
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS Style
infofacts_squares_lightBlue
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS STYLE
infofacts_squares_gray
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS STYLE
infofacts_squares_orange
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS STYLE
infofacts_squares_beige
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS STYLE
infofacts_squares_black
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS STYLE
infofacts_squares_white
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
CSS Style
infofacts_squares_gradient
100%
what we try to give each day
what you'd like to achieve when completing any task you take on
