Skip to main content

Card Collection Block

Overview

The Card Collection Block is a collection of card blocks in rows of 2, 3, or 4 cards. The following Card Blocks can be used to create a collection: Borderless, Condensed, Content, Solid, and Rich Text Card Blocks. The Card Collection Block is initially in one row, but can be combined with additional card collections.

Contents:

  • Block customization options
  • Block examples
card collection block illustration

Block Customization Options

Element Required Options Available
Reduce bottom padding N Checkbox
Alignment N
  • Left Aligned
  • Center Aligned
Background color N
  • None
  • Light Blue
Heading N

Text Input
Description N Text Input
Card Count per Row N
  • 2 Cards
  • 3 Cards
  • 4 Cards
Button size N
  • Default size
  • Small Size
Button style N
  • Primary button
  • Secondary button
  • Tertiary button
  • Ghost button
Button URL N
  • Page
  • Categories
  • Media
  • E-mail
  • Phone number
  • External link
  • Remaining URL
  • External link
Display button icon N Checkbox

Card Collection with Borderless Cards

Borderless Card Collection Eyebrow

Borderless Card Collection Header

This is an example of a card collection with Borderless Card Blocks.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Header

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Explore All Blocks

Block above has these settings:

Element Option Selected
Eyebrow Text Input
Header Text Input
Description Text Input
Card Count per Row 4 Cards
Button
  • Button Size: Default Size
  • Button Style: Primary Button
  • Button URL: Input

Card Collection Content Cards

Content Card Collection Eyebrow

Content Card Collection Header

This is an example of a card collection with Content Card Blocks.

Title

Header

This is a description of the content card.

Landscape image
Placeholder link
Title

Heading

A description for the card. Try not to overload the card with content. It's not intended to be a miniature web page.

Card image
Button
Explore Content Card Block

Block above has these settings:

Element Option Selected
Alignment Center Aligned
Background Color Light Blue
Eyebrow Text Input
Header Text Input
Description Text Input
Card Count per Row 2 Cards
Card Content Area Content Card Blocks
Button Size Default
Button Style Primary Button
Button URL URL Input

Card Collection Solid Cards

Solid Card Collection Eyebrow

Solid Card Collection Header

This is an example of a Card Collection Block with Solid Card Blocks.

Solid card block

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Solid Card Block

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Test image

Solid card block

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Explore Solid Card Block

Block above has these settings:

Element Option Selected
Alignment Center Aligned
Eyebrow Text Input
Header Text Input
Description Text Input
Card Count per Row 3 Cards
Button
  • Default Size
  • Primary Button
  • Button URL