#  Feature a Lead Story with a 50/50 or Vertical Card 

 



 ##  

  expand\_more  

 
  

 

In long-form pages or annual reports, the first story in a section sets the tone. If it blends into surrounding paragraphs, readers may miss its importance and keep scrolling. HarvardSites components like 50/50 Cards and Vertical Cards allow you to highlight key stories with image, text, and calls to action in a structured way.



 

##  Why it matters 

 



 

- **Hierarchy:** A lead story should feel distinct from supporting content.
- **Engagement:** Strong visuals encourage readers to continue exploring.
- **Flow:** Clear section anchors improve reading progression.



 



      ![50/50 and vertical card](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-03/images_blocks_impact50-50.png?itok=VUR93Bn0) 

 

 

  

 



 

 

 

##  How to do it 

- **Choose the right format.**
    
    Use a 50/50 Card for a major feature or thematic introduction.
    
    Use a Vertical Card for a prominent but smaller highlight.
- **Pair image and text intentionally.**
    
    Select an image that reinforces the message, not one that simply fills space.
    
    Keep copy concise and focused.
- **Include a clear next step.**
    
    Add a CTA like “Read the Full Story” or “Explore the Research.”
    
    Place the card at the beginning of a section to signal importance.



 

##  Accessibility tip 

- Ensure the image includes meaningful alt text.
- Do not rely on the image alone to communicate importance. The headline should carry the message.
- Keep CTA link text specific and descriptive.



 

##  Resources 

- [HarvardSites 50/50 Card Component](https://designsystem.harvardsites.harvard.edu/5050-card)
- [HarvardSites Vertical Card Component](https://designsystem.harvardsites.harvard.edu/vertical-cards)
- [Harvard Digital Accessibility Services](https://accessibility.huit.harvard.edu/)



 

 



 

 See also:- [ Storytelling ](/how-guides-topics/storytelling)
- [ Content Clarity ](/how-guides-topics/content-clarity)
- [ How-To Guides ](/page-categories/how-guides)