# How-To Guides ### How-to Guides HarvardSites offers reusable patterns, like components and layouts, to build your site. These how-to guides show you how to use patterns effectively to achieve practical goals like driving engagement, simplifying navigation, and improving usability. ![How-to Guide icons arranged in a grid.](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2025-12/cover_1.png?itok=1P8oerm_) ## Video Guides Learn Design System concepts through short videos that explain when and why to use patterns, components, and content strategies. [### Using 50/50 Cards to Highlight Important Content (VIDEO) ](/resource/using-5050-cards-highlight-important-content-video) 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. (3 min) [### Placing Calls-to-action in pages effectively (VIDEO) ](/resource/placing-calls-action-pages-effectively-video) This tutorial helps you place calls-to-action where users are most likely to act. It helps guide users from information to action without disrupting the flow of a page. [### Using Announcement Banners Effectively (VIDEO) ](/resource/using-announcement-banners-effectively-video) This tutorial introduces the importance of announcement banners to capture attention effectively. [ View All Video Guides arrow\_circle\_right ](https://designsystem.harvardsites.harvard.edu/resources?f%5B0%5D=resource_type%3A581) ## Strategy Guides HarvardSites Strategy Guides show you how to achieve common web goals, like promoting events, improving clarity, or encouraging action, using proven patterns and components. Each guide focuses on a specific use case and offers practical steps for applying the Design System effectively across pages and platforms. [### Create engaging calls to action ](/create-engaging-calls-action)Calls to action help users interact with your department, whether making a donation, applying, or registering, so they can accomplish key tasks efficiently. ![Image of a call to action button](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-11/images_guide_cta.png?itok=IxeqDdnE) [### Design effective event landing pages ](/design-effective-event-landing-pages)Help users find and attend the right events by building clear, organized, and engaging landing pages. ![Events hero](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-09/events.png?itok=tP2BQBK8) [### Optimizing Your Site for Usability and Accessibility ](/optimizing-your-site-usability-and-accessibility)Help ensure your site is usable by everyone, including people using screen readers, screen magnifiers, or other assistive tools. These guides offer practical ways to improve clarity, structure, and inclusive design through content and layout choices. ![Illustration of a web layout with checkmarks, content blocks, and interface elements representing accessibility and usability features](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-11/images_guide_ux.png?itok=n0t4btHJ) [### Using images effectively ](/using-images-effectively)Images support storytelling and highlight key people, places, and events. But if handled poorly, they can confuse, slow down, or even exclude users. ![Images hero](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-11/images_guide_images.png?itok=jrITQpU_) [### Using the News Content Type for Long-Form or Annual Reports ](/using-news-content-type-long-form-or-annual-reports)Use the News content type to build engaging reports or themed pages that tell a story. These guides show how to combine layouts, components, and editorial choices to bring content to life. ![Images hero](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-11/images_guide_images.png?itok=jrITQpU_) ## Help users to These guides offer practical ways to improve how users engage with your site, from finding events and navigating pages to understanding images and calls to action. Each one shows how to apply HarvardSites patterns and components to support real user needs with clarity, consistency, and accessibility. [ All Guides arrow\_circle\_right ](/how-guides-0) [### 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. [### Replace and Edit Inline Images in the Text Editor ](/replace-and-edit-inline-images-text-editor)Display groups of images consistently, with proper stacking and captions, instead of inserting inline media. [### Group Events by Theme or Type Using Columns ](/group-events-theme-or-type-using-columns)Help users explore relevant content by using Columns to group events by topic, format, or audience. [### Group Events by Topic or Audience for Discoverability ](/group-events-topic-or-audience-discoverability)Help users narrow down events by type, audience, or topic using filters powered by taxonomy. [### Use the Images Component for Galleries ](/use-images-component-galleries)Display groups of images consistently, with proper stacking and captions, instead of inserting inline media. [### Fix Cropping Issues in Cards and Lists ](/fix-cropping-issues-cards-and-lists)Avoid cut-off faces, black bars, or distorted covers by preparing images to match card aspect ratios. [### Add Image Captions and Credits the Right Way ](/add-image-captions-and-credits-right-way)Provide context with captions and handle image credits consistently until a dedicated field is available. [### Keep Hero Images Readable ](/keep-hero-images-readable)Make sure hero images are cropped and composed so the most important parts stay visible across screen sizes. [### Choose the right image size and format ](/choose-right-image-size-and-format)Keep pages fast and sharp by exporting images at the right size and file type for each component. [### Draw attention to featured events with a 50/50 Card ](/draw-attention-featured-events-5050-card)Highlight a keynote or featured session with a bold layout that pairs imagery with a clear call to action. [### Use a table to highlight time, location, and registration ](/use-table-highlight-time-location-and-registration)Display event details in a structured format to help users scan sessions and make quick comparisons. [### List multiple events with the Events List component ](/list-multiple-events-events-list-component)Show upcoming events using consistent formatting that updates automatically. [### Building an event one-pager for summits, conferences, and symposiums ](/building-event-one-pager-summits-conferences-and-symposiums)Help visitors quickly access everything they need for your event—schedule, sessions, venue, and contacts—all in one scannable page. [### Place Calls-to-action in Pages ](/place-calls-action-pages)Help users take action where it makes sense—within content—using CTA Links, Cards, or Columns that fit the flow of the page. [### Highlight Actions in Navigation ](/highlight-actions-navigation)Help users take action—like Apply or Contact—in high-visibility spots like the global or main navigation. [### Drive action with an announcement banner ](/drive-action-announcement-banner)Help users spot urgent announcements with a short message fixed to the top of every page.