#  Button-Style Cards 

 



 ##  

  expand\_more  

 
  

 

## How to add a Button-Style Cards component

### Step 1: Add and configure Button-Style Cards component

1. Add a Button-Style Cards component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component).
2. Select the **Section Heading** tab to add an optional section that appears at the top of the Button-Style Cards component (see [Adding a component heading](/adding-section-heading "Adding a section heading") for details about adding a section heading).
3. Select the **Block Settings** tab.
4. Select a heading level from the **Card Heading Level** menu that correctly reflects the information structure of the content. For example, if your Button-Style Cards component has a H2 heading, the **Card Heading Level** (the headings on individual Button-Style Cards) should be H3.
5. Select an alignment from the **Icon Placement** menu to align the icon to the **Left** or **Right** side of the card.
6. Add an optional **Page Anchor Link** to allow for links to the Button-Style Cards component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
7. Select the **Color Settings** tab.
8. Select from the **Color Scheme** menus:
    1. **Component Color Scheme**: Background and foreground colors for the overall component.
    2. **Card Color Scheme**: Background and foreground colors for cards.
9. Review the **Component Color Scheme Preview** to see the effect of changing the color settings.

### Step 2: Add a Button-Style Card item

1. Select the **Content** tab.
2. Use the arrow controls or enter a value in the **Columns** field. This value should be the number of cards to display in a single row; to display four cards in a single-row grid, set the number to 4.
3. Select the **Add Button-Style Card** button.
4. Fill out the following information:
    1. **Heading**: A heading that describes the linked resource. The heading also serves as the link text for the linked resource.
    2. **Link: The URL of the highlighted resource, to learn more.**
    3. **Body**: Introductory text that further describes the referenced resource. This should be no more than a few sentences with details that compel users to follow the link to learn more.
5. Choose a **Media Type** to display an **Icon** or **Image** at the top of the card item.
    1. **Icon Media Type:** Use the **Card Icon** autocomplete input to locate and select your icon from the dropdown list of matching icons. You can review available icon options from the [Material Design Icon List](https://fonts.google.com/icons).
    2. **Image Media Type:** Select the **Add image** button to select an image from the media library or upload a new image (see [Media Library](/resource/media-library "Media Library") for details about working with the media library). The optimal image size (in pixels) for a Button-Style Card is 960 x 540 (see [Image Sizes](/resource/image-sizes-old "Image Sizes") for more details). Provide the appropriate alternative text or mark the image as decorative, depending on the role of the image on the page (see [When to add alt text](/resource/when-add-alt-text "When to add alt text") for best practices for providing alternative text).

   ![Screenshot showing Card Icon autocomplete field with “rock” entered in the field and a dropdown menu with three items and “rocket_launch” selected.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-08/screenshot_autocomplete.png?itok=0KCqocRS) 

 

To choose an icon, enter the first few letters of the desired image in the **Card Icon** field and then select from the dropdown list of matching icons.### Step 3: Configure Button-Style Card item settings

1. Select the **Block Settings** tab.
2. Add an optional **Page Anchor Link** to allow for links to the Button-Style Card item (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
3. Once you have completed your Button-Style Card item configuration settings, choose **Save** to save the Button-Style Card item.

### Step 4: Save Button-Style Cards component

1. Preview the Button-Style Card item in the **Button-Style Cards** section of the **Create new Button-Style Cards** dialog. You can add more Button-Style Card items by clicking the plus sign next to the first Button-Style Card item.
2. Once you have finished adding Button-Style Card items, choose **Save** to save the Button-Style Cards component.



 

---

 

##  Learn more about Button-Style Cards 

 



 ### Examples

Demo Site

See an example of the Button-Style Cards component on the [homepage](https://drupaldemo.harvardsites.harvard.edu/#example-button-style-cards) of the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Best Practices

Design System Website

Learn [best practices for using Button-Style Cards](https://designsystem.hsites.harvard.edu/button-style-cards) from the Harvard Digital Design System website.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2025-03/DSWebsiteIconNew.png?itok=HPgxFa1d) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [writing helpful links](https://accessibility.huit.harvard.edu/write-helpful-links) from the Harvard Digital Accessibility website.



 

   ![Icons for touch, sight, accessibility, cognition, and hearing](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

 See also:- [ Components ](/site-section/components)
- [ How-tos ](/content-structure/how-tos)