#  How-to Guides 

 



These how-to guides show you how to use patterns effectively to achieve practical goals like driving engagement, simplifying navigation, and improving usability.

View also our [Video Guides >](https://designsystem.harvardsites.harvard.edu/resources?f%5B0%5D=resource_type%3A581)



 

 



 Sort & Filters  close  

## Filters

    How-To Guides Topics expand\_more  - Accessibility (6)
- Images (6)
- Media (6)
- Performance (6)
- Storytelling (6)
- Strategy Guides (5)
- Content Clarity (18)
- Conversion (6)
- Engagement (6)
- Event Communication (6)

 



 

  



 

  Search Within Results  

  Search Within Results search  

##  27 results 

  Show filters filter\_alt    Sort by NewestOldestAlphabetical A-ZAlphabetical Z-A sort

   list  

   grid\_view  





 

##  27 results 

  [### Link to Related Content Using Inline CTA Links

 ](/link-related-content-using-inline-cta-links)Long-form pages benefit from clear navigation between related stories. This guide shows how to use inline and CTA-style links to support reader flow.



 

 

   [### Group Related News with Vertical Cards and Columns

 ](/group-related-news-vertical-cards-and-columns)When publishing multiple stories on a single page, structure matters. This guide shows how to group related News entries into clean, consistent layouts.



 

 

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

 ](/feature-lead-story-5050-or-vertical-card)Lead stories deserve visual emphasis. This guide shows how to use 50/50 or Vertical Cards to anchor a section and guide readers into the content.



 

 

   [### Highlight Key Stats with 50/50 Cards or Stat Blocks

 ](/highlight-key-stats-5050-cards-or-stat-blocks)Strong metrics deserve visual emphasis. This guide shows how to highlight important numbers using built-in layout components.



 

 

   [### Break Up Long Pages with Section Headings and Visual Patterns

 ](/break-long-pages-section-headings-and-visual-patterns)Turn long, scroll-heavy pages into structured sections using headings, cards, and layout patterns.



 

 

   [### Use the News Content Type for Story-Driven Content

 ](/use-news-content-type-story-driven-content)The News content type is flexible enough to support more than announcements. This guide shows how and when to use it for storytelling, longer updates, or curated reports.



 

 

   [### Make FAQ Pages Easy to Scan

 ](/make-faq-pages-easy-scan)Well-structured FAQ pages help users find what they need quickly. This guide shows how to choose the right pattern and format for clear, accessible results.



 

 

   [### Use Content Patterns that Support Accessibility

 ](/use-content-patterns-support-accessibility)How you write and structure content affects accessibility. This guide outlines patterns that make your content easier to read, navigate, and maintain.



 

 

   [### Make Links Stand Out with Clear Language and Placement

 ](/make-links-stand-out-clear-language-and-placement)Links should be easy to understand and easy to find. This guide helps you write link text that makes sense out of context and shows how to place links where users expect them.



 

 

   [### Keep CTA Link Text Clear and Actionable

 ](/keep-cta-link-text-clear-and-actionable)CTA links are only effective if users know what they do. This guide helps you write link text that is clear, specific, and meaningful for all users.



 

 

   [### Write Alt Text That Adds Value

 ](/write-alt-text-adds-value)Alt text supports screen reader users and helps images carry meaning when used thoughtfully. This guide shows when to write it, how to write it well, and when to leave it out.



 

 

   [### Design Clear Page Structures for All Users

 ](/design-clear-page-structures-all-users)Good page structure supports users with assistive technology, people navigating by headings, and anyone scanning for what matters. This guide helps you choose layout components that make pages easier to read and navigate.



 

 

  

 - Previous page chevron\_left
- [1](?page=0 "Current page")
- [2](?page=1 "Go to page 2")
- [3](?page=2 "Go to page 3")
- [ Next page chevron\_right ](?page=1 "Go to next page")