Dividers

Divider Options

Dividers can be used on website pages to help break up content blocks, or as a design element. Salient offers three styles of Dividers.

Small Divider (with Animation)

The Small Divider option will span the 20% of the width of the column it is contained within. You can control the color, alignment, opacity, and divider thickness. With the Small Divider, there is also an option to set a custom width.

Sed sit amet tellus sit amet metus vehicula posuere eu eu est. Praesent vel pharetra est. Quisque sed velit id odio accumsan feugiat. Morbi et metus luctus, bibendum ipsum vitae, consequat arcu. Vivamus malesuada gravida odio quis sollicitudin. Phasellus ornare sagittis massa egestas iaculis. Duis viverra lacus et tellus luctus, in maximus dui varius. Nulla sapien nibh, ornare et scelerisque eu, fringilla eget magna.

Small Divider with Custom Width (with Animation)

Vertical Divider

Vertical dividers are limited, as you cannot control the width of the line or alignment in the settings. But, these can be adjusted with custom code fairly easily. Also, the animation option is not available with vertical dividers.

Vivamus eleifend justo eget est scelerisque maximus. Suspendisse vestibulum ante dolor, ut fermentum diam rutrum id. Sed lobortis imperdiet sapien a dapibus. Morbi et metus luctus, bibendum ipsum vitae, consequat arcu. Vivamus malesuada gravida odio quis sollicitudin. Phasellus ornare sagittis massa egestas iaculis. Duis viverra lacus et tellus luctus, in maximus dui varius. Nulla sapien nibh, ornare et scelerisque eu, fringilla eget magna.

Full Width Divider

The Full Width Divider option will span the full length of the column it is contained within. You can control the color, alignment, opacity, and divider thickness.

Praesent cursus porttitor eros, sit amet efficitur magna tincidunt sit amet. Suspendisse commodo felis nec ipsum mattis consequat. In diam nisi, scelerisque fringilla tempus ac, tempor vitae turpis. Vivamus eleifend justo eget est scelerisque maximus. Suspendisse vestibulum ante dolor, ut fermentum diam rutrum id. Sed lobortis imperdiet sapien a dapibus.

Dividers Examples