Structure
Horizontal Dividers
Information
Dividers are used to represent a break between two or more sections. This aids the user visually with following and reading content. Horizontal Dividers stay the same between all break-points; mobile, tablet and desktop.
Visual Example
Code Usage
Vertical Dividers
Information
Vertical Dividers are intended for the same use as horizontal dividers but are but should be coupled with columned elements and components. Upon lower breakpoints such as mobile and tablet, these convert into horizontal dividers.
Developer Notes
Vertical Dividers are applied to other elements and are not individual elements, as these make the use of borders to achieve the vertical divider effect. There are three total classes that can be applied to other elements that include:
- __mst_vd_left: Applies vertical divider to the left side of the element
- __mst_vd_both: Applies vertical divider to both the left and right side of the element
- __mst_vd_right: Applies vertical divider to the right side of the element
These vertical dividers are mainly applied to columned grids.
Visual Example
The example below uses Evolution's (version 3) gridding system based upon Foundation as the columned grid that the vertical dividers are applied to.
This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element.
This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element.
This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element.
Code Usage
Vertical Divider - Left Only
This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element.
Vertical Divider - Both
This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element.
Vertical Divider - Right Only
This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element. This is just a random paragraph of text to show what the vertical dividers look like when applied to an element.