#  Vertical Cards 

 



 ##  

  expand\_more  

 
  

 

## How to add a Vertical Cards component

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

1. Add a Vertical 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 Vertical 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 Vertical Cards component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
5. Select a heading level from the **Card Heading Level** menu that correctly reflects the information structure of the content. For example, if your Vertical Cards component has a H2 heading, the **Card Heading Level** (the headings on individual Vertical Cards) should be H3.
6. Select the **Color Settings** tab.
7. 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.
8. Review the **Component Color Scheme Preview** to see the effect of changing the color settings.

### Step 2: Add a Vertical 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.

   ![Screenshot showing tab controls and the Content panel with the columns field outlined, followed by the Vertical Cards section and “Add Vertical Card” button.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-08/screenshot_columns_control.png?itok=rglTnB_j) 

 

Enter the number of columns by entering a value in the **Columns** field or using the up and down arrows to adjust the value.3. Select the **Add Vertical Card** button.
4. Fill out the following information:
    1. **Eyebrow**: Keywords that display above a heading. This could be a topic category.
    2. **Heading**: A heading that describes the linked resource. The heading also serves as the link text for the linked resource.
    3. **Heading Link: The URL of the highlighted resource, to learn more.**
    4. **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. Next you have the option to add an image to the component by selecting the **Add image** button. You can 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).
    1. The optimal image size (in pixels) for a Vertical Card component is 960 x 540 (see [Image Sizes](/resource/image-sizes-old "Image Sizes") for more details).
6. 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).

### Step 3: Save Vertical Cards component

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



 

---

 

##  Learn more about Vertical Cards 

 



 ### Examples

Demo Site

See an example of the Vertical Cards component on the [Research landing page](https://drupaldemo.harvardsites.harvard.edu/research#example-vertical-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 Vertical Cards component](https://designsystem.hsites.harvard.edu/vertical-cards) from the Harvard Digital Design System website.



 

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

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [using images and media to enhance understanding](https://accessibility.huit.harvard.edu/use-images-and-media-enhance-understanding) and learn how to [write helpful alt text to describe images](https://accessibility.huit.harvard.edu/describe-content-images) 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)