Button Style Cards

What are button style cards?

Button style cards consist of a card element which can include an icon, brief description and/or label, combined with the functionality of a button. These cards can be stacked next to one another to show groups of information together on the same line.

Example of a button style cards component

Optional introductory text

Harvard Medical School

Since the School was established in 1782, faculty members have improved human health by innovating in their roles as physicians, mentors and scholars. 

Chan School of Public Health

The Harvard T.H. Chan School of Public Health is a global community committed to building a world with health, dignity, and justice for every human being.

Harvard School of Dental Medicine

Located in the heart of Boston’s Longwood Medical Area, Harvard School of Dental Medicine (HSDM) ranks as one of the preeminent schools of dental medicine in the country.

How to add button style cards: 

  1. In the page edit view, add a new block called Button Style Cards.
  2. The following empty blocks will be placed: a Button Style Cards block with Section Heading and Button Style Card Items blocks nested within.
  3. In the section heading block, optionally fill out the Heading and Introduction fields or add Calls to Action links by clicking the plus icon in the lower right.
  4. Fill out the first card by adding a Heading and Body. You can also add the following by using the block settings on the right sidebar:
    1. Add a Link on the card.
    2. Add an Icon by searching through the icon library.
  5. To add more cards, select the parent button style cards items block, then click the plus sign at the lower right.
  6. Select the outermost button style cards block to show further configuration options in the block settings in the right sidebar:
    • Columns: Select the number of columns you would like the cards to display in.
    • Card heading level: Select the heading level which fits in your content’s hierarchy.
    • Icon placement: Choose center or left alignment.
    • Change the width/alignment or color scheme.

Blocks and components

Paragraph Heading List Accordion Button Style Cards Text Block Call To Action Links 50/50 Cards Vertical Cards Simple Table Custom HTML Post List Hero Horizontal Rule Images