Common card layouts, such as two-up and three-up card layouts.


Usage guidelines

Cards that belong to the same card layout should have the same styles applied. Inconsistent visual representation will make it harder for the user to scan the information.


Two up

Cards are arranged in two columns on larger breakpoints. Cards stack on smaller viewports.

Card #1

Card #2


Three up

Cards are arranged in three columns on larger breakpoints. Cards stack on smaller breakpoints. Cards stack first into two columns and then into a single column as the viewport narrows.

An example of the three-up card layout can be seen on the Boston Scientific site.

This layout is not possible on the following templates within the page content container:

  • Left navigation
  • Right navigation
  • Left and right navigation