#  Stats Cards 

 



 ##  

  expand\_more  

 
  

 

## How to add a Stats Cards component

### Step 1: Add and configure Stats Cards component

1. Add a Stats 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 Stats 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. Add an optional **Page Anchor Link** to allow for links to the Stats Cards component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
5. Select the **Color Settings** tab.
6. 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.
7. Review the **Component Color Scheme Preview** to see the effect of changing the color settings.

### Step 2: Add a Stats 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 Stats Card** button.
4. Fill out the following information:
    1. **Value**: A data point to display at the top of the card. This should be only a few characters.
    2. **Label**: A short label describing the data point.
    3. **Description**: Short description of the data point. This should be no more than two short sentences providing more clarity and details about the data point.

### Step 3: Save Stats Cards component

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



 

---

 

##  Learn more about Stats Cards 

 



 ### Examples

Demo Site

See examples of the Stats Card component on the [homepage](https://drupaldemo.harvardsites.harvard.edu/#example-stats-cards), [Academics page](https://drupaldemo.harvardsites.harvard.edu/academics#example-stats-cards), and [Centers and Initiatives page](https://drupaldemo.harvardsites.harvard.edu/centers-and-initiatives#example-stats-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 the Stats Cards component](https://designsystem.harvardsites.harvard.edu/stats-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 [plain language](https://accessibility.huit.harvard.edu/language) from the Harvard Digital Accessibility website.



 

   ![](/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)