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 or as an image divider. It includes various padding options to create space between sections.
Usage: All pages. This component can be used anywhere within a container, or even within smaller sub-sections inside columns to create breaks in content sections.
Requirements: https://fiserv-com.atlassian.net/browse/FC-447
Image Specifications: Coming Soon (referenced in ticket 447)
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.
Simple Horizontal Rule
This variation is a horizontal bar set within a container that maxes at 1440px.
Image Divider
This divider is the image variation set within a container that maxes at 1440px. The image top aligns, and the component allows for various height options to display more or less of the image.
Simple Horizontal Rule - Wide
This variation is a horizontal bar with no wrapping container, allowing it to extend edge to edge.
Image Divider
This divider is the large height image divider variation with no wrapping container, allowing it to extend edge to edge.
Simple horizontal divider with text field
The text field is a rich text editor and can be aligned left, center or right and other style treatments can be applied.
In the below scenerio text field is aligned right and simple horizontal divider is used.
PODCAST