# 50/50 Card Component ## expand\_more Purpose of the 50/50 Card ### Highlight a single, high-priority story or call to action using image and text This component is designed to create visual emphasis and narrative focus, making it well-suited for landing pages and section openers. ![50-50 component in layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/5050_4.png?itok=FjB6fECi) *Example page context showing where a 50/50 Card is typically used* ## When to Use ## ✓ Use this component when: You want to feature **one primary item** rather than a list of equal items - The image provides **important context**, not just decoration - You want to combine visual interest with explanatory text ## ✕ Avoid using this component when: - You are displaying **multiple equal items** (use Vertical Cards instead) - Content needs to be **dense, scannable, or utility-focused** - You only need a headline and link without supporting imagery ## Choosing between similar components If your goal is… SortYour goalUse this componentFeature one story, event, or initiative 50/50 Card Feature multiple equal items Vertical Cards Create a strong visual headline Hero Provide quick links or actions Button-Style Cards ## 50/50 Card overview A 50/50 Card is a horizontal component that pairs an image with supporting text in a side-by-side layout. The image can appear on either the left or right, allowing for visual variation when multiple cards are stacked. ## Example: Featuring a primary initiative on a landing page This example shows a 50/50 Card used to highlight a single, high-priority initiative where an image provides essential context and the supporting text helps users understand why it matters and what to do next. New Exhibitions ### Cushion Covers in the Antiquity A new exhibition at the Collection of Historical Textiles. [ Go to exhibit arrow\_circle\_right ](https://chsi.harvard.edu/measuring-difference) ![Cushion Cover with Kantharos](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2025-12/1892.4.6_1.jpeg?itok=fqPN4t4o) Section of Loba Garifuna by Nancy Friedemann. ## Elements of a 50/50 Card Each 50/50 Card is made up of the following elements. Not all elements are required, but each plays a specific role in supporting clarity and accessibility. SortElementPurposeImage Displays on the right or left side of the text panel Caption Describes the image; displays below the image Eyebrow Describes the topic category Heading Describes the topic of the card Text Provides descriptive details about the topic Call to action links Links to more details about the topic ## Guidance on using a 50/50 Card - **Use for site and page orientation** Use a 50/50 Card as a banner at the top of a homepage or section landing page to help orient users to the purpose of the site or section. - **Alternate alignments** When stacking multiple 50/50 Cards, alternate between left- and right-positioned images to add visual interest and reduce repetition. - **Optimize space** Use 50/50 Cards in regions where content spans the full width of the layout. Avoid placing them in narrow regions, such as pages with side navigation or other constraining elements. ## Content guidelines **Images should add meaning** Choose images that provide context or reinforce the message of the card, not purely decorative visuals. If the image does not add information, consider using a different component. **Plan for image cropping** Important visual details should be centered in the image. Images may be cropped differently across screen sizes and configurations. **Keep text concise** Use short paragraphs that support the image without overwhelming it. Long blocks of text reduce the visual balance of the component. **Use clear, descriptive headings** Headings should clearly describe the linked destination or content. Avoid vague or generic headings such as “Learn more” or “Featured content.” **Use eyebrow text sparingly** Eyebrow text should provide light context, such as a category or content type. Avoid repeating information already conveyed in the heading. **Write purposeful call-to-action links** Link text should clearly describe the action or destination, helping users understand what will happen when they click. ## Accessibility considerations - Ensure sufficient color contrast between text and background - Use descriptive link text rather than “Learn more” - Provide captions when images convey essential information ## 50/50 Card features SortFeaturesStandardsOptimized color contrast Link Indicators Left-aligned headings and text Text Block Alignment Background color, icons, and underlining used to indicate links Link Indicators Sans serif typeface used for CTA links Wayfinding Font See also:- [ Components ](/page-categories/components) ## 50/50 Card Showcase ### 50/50 Card with an image expand\_more This example shows the 50/50 Card component set to display an image to left of the text panel. New Exhibitions #### Measuring Difference A new exhibition at the Collection of Historical Scientific Instruments. [ Go to exhibit arrow\_circle\_right ](https://chsi.harvard.edu/measuring-difference) ![Sculpture of a face mask surrounded by colorful shapes resembling rays of the sun.](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2024-11/Nancy_Friedemann_crop.jpg?itok=3--iPdmQ) Section of Loba Garifuna by Nancy Friedemann. ### 50/50 Card with text expand\_more This example shows the 50/50 Card component without an image. The eyebrow and heading display on the left and the description and call to action link on the right. New Exhibitions #### Measuring Difference A new exhibition at the Collection of Historical Scientific Instruments. [ Go to exhibit arrow\_circle\_right ](https://chsi.harvard.edu/measuring-difference)