50/50 Card Component
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.
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…
| Your goal | Use this component |
|---|---|
Feature 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.
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.
| Element | Purpose |
|---|---|
Image | 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
| Features | Standards |
|---|---|
Optimized 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 |
50/50 Card Showcase
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.