Skip nav to main content.
Mobile App
Find it for free on the App Store.
Get The App
Mobile App
Find it for free on the App Store.
Get The App

Block Library

Blocks are the elements we use to build page layouts. Our library contains dozens of beautiful, purpose-built, accessible blocks. Explore the block library below:

Sub-Navigations

Sub-Navigation blocks are used to display page-related links and calls to action.

img-thumbnail-placeholder

Sub-Navigation

Includes 2 variations

View Blocks
img-thumbnail-placeholder

Sub-Navigation + Breadcrumbs

Includes 1 variation

View Block

Heros

Hero blocks are typically one of the first to appear on a page. These are used to introduce the page and primary call to action.

img-thumbnail-placeholder

Heros

Includes 8 variations

View Blocks
img-thumbnail-placeholder

Video Hero

Includes 2 variations

View Block
img-thumbnail-placeholder

Immersive Hero

Includes 1 variation

View Block
img-thumbnail-placeholder

Hero Search

Includes 1 variation

View Block
img-thumbnail-placeholder

Login

Includes 6 Variations

Login
img-thumbnail-placeholder

Hero sticky

Includes 1 variation

View Block

Router Block

Router Blocks can be used to highlight product or service links, and may overlap a hero or feature block

img-thumbnail-placeholder

Router Block

Includes 2 variations

View Blocks

Text

Text blocks are used to display basic text content in single or multi-column layouts.

img-thumbnail-placeholder

Text

Includes 1 variation

View Block
img-thumbnail-placeholder

Text Columns

Includes 1 variation

View Block

Tables

Table blocks are used to display a single table or to repeat multiple tables as a group.

img-thumbnail-placeholder

Table

Includes 1 variation

View Block
img-thumbnail-placeholder

Tables (multiple)

Includes 1 variation

View Block
img-thumbnail-placeholder

Comparison Table

Comparison Tables can be used to show related groups of products and services

Layout – Comparison table page (2-3 options)

Products Overview

The Products overview is for showing a group of products that can filtered by common attributes.

img-thumbnail-placeholder

Products Overview

Includes 1 variation

View Block

Features

Feature blocks are used to showcase the various features of a product or service. These blocks offer many options for big and small features.

img-thumbnail-placeholder

Feature

Includes 15 variations

View Blocks
img-thumbnail-placeholder

Side-by-Side Features

Includes 1 variation

Side-by-Side Features
img-thumbnail-placeholder

Features List

Includes 5 variations

View Blocks
img-thumbnail-placeholder

Video Features

Includes 2 variations

View Blocks

Feature Benefits

Feature Benefits Blocks work like a normal feature, but in place of an image or video, feature a list of the benefits of a product or service

img-thumbnail-placeholder

Feature Benefits

Includes 2 variations

View Block

Details

Details blocks are used to showcase a list of product or service details. These are great substitutes to basic bullet lists.

img-thumbnail-placeholder

Details List

Includes 1 variation

View Block

Devices

Device blocks are used to show information along with digital devices such as phones, tablets and computers.

img-thumbnail-placeholder

Device Feature

Includes 2 variations

View Blocks

Testimonials

Testimonial blocks are used to show testimonials and reviews. You can show a single testimonial or a multiple at once.

img-thumbnail-placeholder

Testimonial

Includes 1 variation

View Block
img-thumbnail-placeholder

Testimonials (multiple)

Includes 2 variations

View Blocks

Accordions

Accordion blocks are used to show and hide information. You can show a single accordion or a multiple at once.

img-thumbnail-placeholder

Accordion

Includes 1 variation

View Block

Galleries

Gallery blocks are used to show list of photos or clickable cards as either a grid or collage.

img-thumbnail-placeholder

Gallery

Includes 2 variations

View Blocks

Cards

Card blocks are used to show information in the form of a rectangular card element. You can show a minimum of 2 cards at once.

img-thumbnail-placeholder

Cards

Includes 2 variations

View Blocks

Cards 3 Column w/ Shadow

The Cards - 3-Column block is designed specifically for side-by-side CTAs. It includes a custom link setting that supports links with custom data attributes, making it ideal for features like triggering chat pop-ups.

img-thumbnail-placeholder

Cards 3 Column w/ Shadow

Includes 1 variations

View Blocks

Cards Vertical

Stacked, two-column cards that are perfect for timelines, feature comparisons, or highlighting product features and benefits

img-thumbnail-placeholder

Cards Vertical

Includes 1 variations

View Blocks

Steps

Step blocks are used to show a multi-step process.

img-thumbnail-placeholder

Steps

Includes 1 variation

View Blocks

Thumbnails

Thumbnail blocks are used to show a group of small graphics, statistics or product features.

img-thumbnail-placeholder

Thumbnails

Includes 1 variation

View Block

Rates

Rate highlight blocks are used to showcase rates outside of rate tables.

img-thumbnail-placeholder

Rate Highlight

Includes 1 variation

View Block

Calculators

Calculator blocks are used to show various financial calculators.

img-thumbnail-placeholder

Calculator

Includes 2 variations

View Blocks

Branch & ATM Locator

The Branch & ATM Locator block is used to show an interactive map interface which fetches branches and ATM's including CO-OP and Walgreens locations.

img-thumbnail-placeholder

Branch & ATM Locator

Includes 1 variation

View Block

Section Dividers

Section divider blocks are used to separate sections of the page.

img-thumbnail-placeholder

Section Divider

Includes 4 variations

View Blocks

Global Block

The Global Block is used to "mirror" an existing block throughout the website, anywhere on a page. This blocks allows you to create a block once, use it everywhere and edit it just one place.

img-thumbnail-placeholder

Global Block

Includes 1 variation

View Block

Looping Tabs

Et minima dolorum fugiat. Rerum est velit eos et amet minima.

img-thumbnail-placeholder

Looping Tab

Includes 1 Variation

View Block

Modals

Et minima dolorum fugiat. Rerum est velit eos et amet minima.

img-thumbnail-placeholder

Modal

Includes 5 Variations

View Blocks