#  Quote Cards 

 



 ##  

  expand\_more  

 
  

 

## How to add a Quote Cards component

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

1. Add a Quote 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 Quote 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 Quote 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 **Color Component Scheme Preview** to see the effect of changing the color settings.

### Step 2: Add a Quote Card item

1. Select the **Content** tab and select the **Add Quote Card** button.
2. In the **Content** tab of the Quote Card item, enter the quote or testimonial in the **Body** field.
3. Next 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).
4. 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).
5. In the **Attribution** section, add details about the quote source:
    1. **Name**: Provide the full name of the person quoted.
    2. **Role/Title**: Provide details about their title and affiliation.
    3. **Link text** and **URL**: Link to a page related to the quote source, such as a person page or contact details.

### Step 3: Configure Quote Card item settings

1. Select the **Block Settings** tab for the Quote Card item.
2. Add an optional **Page Anchor Link** to allow for links to the Quote 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 Quote Card item configuration settings, choose **Save** to save the Quote Card item.

### Step 4: Save Quote Cards component

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



 

---

 

##  Learn more about Quote Cards 

 



 ### Examples

Demo Site

See examples of the Quote Cards component on the [homepage](https://drupaldemo.harvardsites.harvard.edu/#example-quote-card) and [Undergraduate page](https://drupaldemo.harvardsites.harvard.edu/undergraduate#example-quote-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 Quote Cards](https://designsystem.hsites.harvard.edu/quote-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 [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)