Content List Navigation Bar
Synopsis: The content list navigation bar can be used in content list page. The content list navigation bar will open to include Dropdown main label and three categories. Each category include, caltegory label and filters. Each filter includes filter label, link, target and analytics name. All lists will be manually created, selecting a nav item will link to a page
Usage: Content List pages.
Requirements: https://fiserv-com.atlassian.net/browse/FC-886
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.
Example - Default
Ingredients: 2 Containers, Content List Navigation Bar
This use case involves an outside container set to full width with an inner container set to contained to center align the content. Content list navigation bar can be placed anywhere within container or outside container. It can be expanded or collapsed by clicking.
Inside the first full width container there is Content List Navigation Bar.
Example - Color options
Ingredients: 2 Containers, Content List Navigation Bar
This use case involves an outside container set to full width with an inner container set to contained to center align the content. Content list navigation bar can be placed anywhere within container or outside container. It can be expanded or collapsed by clicking.
Inside the first full width container there is Content List Navigation Bar.
There are 4 color fields. The first field will be Label Color. The second field will be Label Color on hover. The third field will be Background Color. The fourth field is Border Color. When the content list navigation bar is expanded, the background color matches the background color from the field selection. The Category labels matches the color of the border color. The Filter label color matches the label color. The carat selector color matches the border color.