Spacers, with a dash of colour
Similar to spacers, dividers provide consistent vertical spacing while allowing to visually separate your content.
A divider has a horizontal line in the middle, which you can style to suit your needs.
Pine has two types of dividers:
The Universal Divider is 100% wide and can be used anywhere a table is allowed: above/below other tables, or inside <td> or <th> elements.
So in Pine you can basically use it:
- outside wrapper tables
- in the <td> of wrapper tables, just like a row table
- inside a column
Example: Universal Divider
The thin black and white lines above and below are 1px solid universal dividers.
The ones above have top and bottom height set to 80px, but it's being reset to 30px on mobile.
The one below remains at 80px top/bottom height, because we declared !important inline for its padding.
The only difference between the Universal and Wrapper dividers is that the Wrapper Divider is intended to be used with the individual wrappers approach.
Example: Wrapper Divider
The gray rows above and below are wrapper dividers with top and bottom heights set to 80px, which makes them 161px high. They span as wide as the row table, so you can match background colours.
On mobile, the one above gets reset to 30px top/bottom height, while the one below remains at 80px because we also declared the height with inline CSS.
There are two style properties that you can change on a Divider, in order to customize it:
Dividers lines are wrapped between two rows: one above, one below. These rows contain <th> elements that have a height attribute.
You can change this height attribute, along with the font-size and line-height inline CSS, to customize the vertical spacing above and below the divider line.
Important: if you don't change all three values (i.e. you only change the height="" attribute), you will encounter rendering issues in Outlook 2016 (empty white lines).
By default, Dividers in Pine come with a 1px, solid gray horizontal line, defined by this inline CSS on the middle <td>: border-top: 1px solid #EEEEEE;
It's the same colour as the default wrapper background, and you can change its thickness like this: border-top: 3px solid #EEEEEE;
For the border style, you can use any of the following:
- dotted - defines a dotted border
- dashed - defines a dashed border
- solid - defines a solid border
- double - defines a double border
- groove - defines a 3D grooved border. The effect depends on the border-color value
- ridge - defines a 3D ridged border. The effect depends on the border-color value
- inset - defines a 3D inset border. The effect depends on the border-color value
- outset - defines a 3D outset border. The effect depends on the border-color value
Overriding Mobile Height Reset
Just like with Spacers, Divider top and bottom heights are reset to 30px for mobile, for consistent vertical spacing.
You can override this if you need to:
- Globally: by changing the CSS in the @media query
- Individually: by adding the height with inline CSS on the <th> elements in the divider table
Check the examples above: the bottom dividers are using the 'individually' technique.