Block Lists

Block lists resemble single-column tables.

  
        block lists
        
        %ul.block
  %li Item 1
  %li Item 2
  %li Item 3
      
    Item 1
Item 2
Item 3

Border Classes

Bottom borders are dotted.

top-border
```
.top-border
  %p Top borders are solid.
```

Top borders are solid.

All-around borders are solid.

Extended Grid System

The Foundation grid system is pretty complete, but has a couple gaps. Here we keep additions we make to the Foundation grid system classes:

.large-offset-1-and-half can be used for offsetting columns by one-and-a-half columns width on a large screen. This is useful for centering three groups of three columns (like for pricing tables).

Misc Helper Classes

Adding the class full-width to something will make it width: 100%;

Adding the class inline to something will make it display: inline;

Panels

White Panel

Example `.la-panel`

div.la-panel.columns.mbl

Adding the class la-panel to a div will provide it a white background. This div also has the classes columns and mbl to provide padding and margin.

Contrast Panel

Example `.contrast-panel`

Adding the class contrast-panel to a div will provide it a blue background, white text, and the "header" font for all text. Links even look okay!

Recommended Use:

.contrast-panel
  .row
    %h1 ...
    %p ...

Custom Spacing Classes

To provide custom padding and margin to elements, add a class to the element by assembling one letter from each category below depending on your needs:

1. p, m = padding, margin

2. a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical

3. s, m, l, n, a = small(5px), medium(10px), large(20px), none(0), auto(auto)

Example:

.ptm --> "padding top medium"

.mvl --> "margin vertical large"

.pas --> "padding all small"

Split Columns

Split columns allow you to have two pieces of content next to each other, separated by a vertical line. On small and medium screens, the will move to be vertically stacked and have a horizontal separator line.

You can really have whatever your heart desires here for content.

Split Columns (Medium)

Split columns allow you to have two pieces of content next to each other, separated by a vertical line. On small screens, the will move to be vertically stacked and have a horizontal separator line.