Quote Cards

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 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 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).
  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 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 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). 
  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 and Undergraduate page of the Department of Rocket Science demo site.

Support and feedback options for HarvardSites Drupal

Submit a ticket

If you encounter any issues or bugs with the HarvardSites Drupal platform, please submit a ticket through the HUIT Service Desk.

Share website feedback

If you have ideas for how to improve the HarvardSites User Guide website, please submit your ideas using our website feedback form.

Design System How-To Guides

Practical guides and how-tos for using HarvardSites features to build engaging, effective websites that support your department’s goals.

AI Support chatbot

Try our new AI-powered support chatbot to answer questions about the Drupal platform.