• Patterns

Panels

Nav panel with stats

Usage notes

Use to display key stats in an easy-to-overview manner. Makes heavy use of the stat classes

 

Nav panel without stats

Other economy categories

Usage notes

Use to display key sections of the site in a style similar to the nav panel with stats.

 

Panel

Hi. I'm a panel

Usage notes

Use this for general-purpose spacing to and around large global elements.

 

Panel, separated

I've got a top and bottom border

My border is only a top border.

My border is a large top border.

Mine's a bottom border.

Mine's a large bottom border.

Usage notes

Use for visually separating elements and borders

 

Panel, with padding

I've got a small top and bottom padding

I've got a medium top and bottom padding

I've got a large top and bottom padding

I've got a small top padding

I've got a medium top padding

I've got a large top padding

I've got a small bottom padding

I've got a medium bottom padding

I've got a large bottom padding

Usage notes

Use for visually separating elements with padding, when you have a background that needs extending past the initial boundary of the element (good when you need to fine-tune layout spacing). Otherwise use the margin element.

 

Panel, with margin

I've got a small top and bottom margin

I've got a medium top and bottom margin

I've got a large top and bottom margin

I've got a small top margin

I've got a medium top margin

I've got a large top margin

I've got a small bottom margin

I've got a medium bottom margin

I've got a large bottom margin

Usage notes

Use for visually separating elements with margin.