Draw attention to featured events with a 50/50 Card

Not every event carries the same weight, some need more visibility. Whether you're highlighting a keynote speaker, a kickoff session, or a call to register, a 50/50 Card gives that content visual prominence. The HarvardSites Design System lets you combine media, heading, text, and a call to action in a responsive layout that works beautifully across screen sizes.

Using 50/50 Cards to Highlight Important Content

Learn when 50/50 Cards are most effective, what types of content they are best suited for, and how to use them to highlight important information without overwhelming the page.

Sample 50/50 Card component

Keynote

Technology and Equity

Join us for a talk with Dr. Maria Chen on the role of equity in digital transformation.

Register Now
Keynote speaker presenting at a podium with a screen behind her reading “Technology and Equity.”

Using the 50/50 Card in your pages

Best for

Highlighting a keynote event or announcement in a way that’s visually distinct and action-driven.

Component used

50/50 Card Component with image and CTA

What It does

Displays one side with an image and the other with text and a CTA. On mobile, the image and content stack vertically. You control the layout, image placement, and background color.

Setup tips

  • Choose a high-quality image that reinforces the message (e.g., speaker, venue, crowd)
  • Write a concise, engaging headline and follow it with 1–2 short sentences describing the featured content
  • Use action-driven CTA text like “Register Now” or “Save Your Seat”
  • On mobile, the image may appear above or below, test the stacking order on a mobile device
  • Use accessible alt text and make sure link text is meaningful and descriptive

Pros & cons

Added benefit

  • Visually highlights one key piece of content
  • Balances storytelling and action in a compact layout
  • Great for homepages, landing pages, or mid-page “breaks”

Potential drawbacks

  • Not meant for lists or dense info, use Events List or Table for that
  • Can feel redundant if used too often or in long pages
  • Requires strong imagery and tight copy to be effective
See also: