Horizontal Divider Component

Synopsis: The horizontal divider component can be used to divide section of a page. It can display as a single line divider, an image divider, or as a blank divider. It includes various padding options to create space between sections. This component can be used anywhere within a container, or even within smaller sub-sections inside columns to create breaks in content sections.

Content Fields: 

Divider Text: Used to add a label to a horizontal rule line separator

Options:

Divider Type: Simple Horizontal Rule or Image (for a blank divider select Simple Horizontal Rule with no color)

Line Color: Fiserv color palette (Simple Horizontal Rule only)

Blur: Image divider only

Margin (top/bottom): None, Extra Small, Small, Medium, Large

Height: Small, Medium, Large

Recommended Image Specifications: Horizontal image. Width 2400, Height: 300 recommended if image divider will extend the fill width if the page.

Usage: All pages 

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Simple Horizontal Rule

This variation is a horizontal bar set within a container. The line height can be set at Small (1px), Medium (2px) or Large (3px). This example is 1px.

Scenario 2

Image Divider

This divider is the image variation set within a container. The image top aligns, and the component allows for various height options to display more or less of the image. This example is a small height.