#  50/50 Cards 

 



 ##  

  expand\_more  

 
  

 

## How to add a 50/50 Cards component

### Step 1: Add and configure 50/50 Cards component

1. Add a 50/50 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 50/50 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 for 50/50 Card item headings from the **Heading Level** menu that correctly reflects the information structure of the content. For example, if your 50/50 Cards component has a H2 heading, the **Card Heading Level** (the headings on individual 50/50 Cards) should be H3.
5. Add an optional **Page Anchor Link** to allow for links to the 50/50 Cards component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
6. Select the **Color Settings** tab.
7. Select from the **Color Scheme** menus:
    1. **Item 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 50/50 Card item

1. Select the **Content** tab and select the **Add 50/50 Card** button.
2. Fill out the following information for the text panel:
    1. **Eyebrow**: Keywords that display above a heading. This could be a topic category.
    2. **Heading**: A heading that captures the topic of the card. The heading should be clear and descriptive.
    3. **Body**: Introductory text that further describes the topic of the card. This should be no more than a few sentences.
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).
    1. The optimal image size (in pixels) for a 50/50 Card is 2630 x 2630 (see [Image Sizes](/resource/image-sizes-old "Image Sizes") for more details).
4. Provide an optional **Caption** to display below the image.
5. 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).
6. Select the **Add Call to Action Link** button to add up to two (2) call to action links to the text panel (for instructions, see **Step 2: Add Call to Action Links** on [Adding a component heading](/adding-section-heading "Adding a section heading")).

### Step 3: Configure 50/50 Card item settings

1. Select the **Block Settings** tab.
2. Select an alignment from the **Image Alignment** menu to align the image to the **Left** or **Right** side of the card.
3. Add an optional **Page Anchor Link** to allow for links to the 50/50 Card item (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).
4. Once you have completed your 50/50 Card item configuration settings, choose **Save** to save the 50/50 Card item.

### Step 4: Save 50/50 Cards component

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



 

---

 

##  Learn more about 50/50 Cards 

 



 ### Examples

Demo Site

See examples of 50/50 Cards on the [homepage](https://drupaldemo.harvardsites.harvard.edu/#example-50-50-cards) and [About landing page](https://drupaldemo.harvardsites.harvard.edu/about#example-50-50-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 50/50 Cards](https://designsystem.harvardsites.harvard.edu/5050-card) 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)