Related Content

The related content component displays a responsive grid of content items, typically used to showcase related articles, services, or initiatives. It automatically adjusts its layout based on the number of items provided, creating optimal visual arrangements for different content quantities.

Do

  • Group content logically — organize related content items by topic, category, or user workflow to create intuitive information architecture.
  • Use consistent content formatting within related content sections to maintain visual hierarchy and readability.
  • Provide meaningful titles and descriptions that accurately describe what users will find when they click through.
  • Include high-quality images that are relevant to the content and maintain consistent aspect ratios across items.
  • Test responsive behavior to ensure content displays well across all screen sizes and device types.
  • Consider content length — keep descriptions concise while providing enough context for users to make informed decisions.
  • Use descriptive titles that clearly indicate the destination or action.

Don't

  • Don't mix unrelated content types — avoid combining different content categories that don't serve a common user goal.
  • Don't use generic or placeholder content that doesn't provide real value to users.
  • Don't overload with too many items — consider breaking large content sets into focused, manageable groups.
  • Don't ignore mobile experience — ensure touch targets are appropriately sized and content remains readable on small screens.
  • Don't use inconsistent image sizes — maintain visual harmony with consistent aspect ratios and image quality.
  • Don't forget accessibility — ensure all content is accessible via keyboard navigation and screen readers.
  • Don't use vague titles — avoid generic labels like "More Information" or "Click Here" without context.

Dependencies

The Related Content component requires additional CSS dependencies to render correctly:

  • Card Component CSS: The Related Content component extends the card component and requires the card CSS file to be loaded for proper styling. For use on external platforms, ensure that the following CSS is added separate from the GNWT Design System CSS Bundle: card.css

These dependencies are automatically resolved when using the Document component through Drupal's component system, but should be considered when implementing the component in other contexts or when troubleshooting styling issues.

Item Count - Three or Six

The example below demonstrates the component with 6 items using the item-count-3-or-6 class. The layout adapts to display items in an optimal grid arrangement that works well for showcasing diverse government services and programs. The first item is visually promoted with a slightly larger size in desktop viewports to create visual hierarchy.

The featured-card-grid utility class handles the base styling for the CSS Grid and is then modified using the variant classes such as item-count-3-or-6.

For a visual example of how this component appears within a landing page layout, see the Landing Page pattern.

Loading preview...
Open example in a new tab

Item Count - Five

Features exactly 5 content items using the item-count-5 class in a layout optimized for this specific count. The 5-item layout creates a balanced visual presentation that works well for highlighting priority services.

Loading preview...
Open example in a new tab

Item Count - Less Than Five

The example below displays 4 featured services using the item-count-less-than-5 class. Any item count less than 5 will display like this, excluding a count of 3 which uses the item-count-3-or-6 layout. This layout provides generous spacing and prominence for each item, at 50% of the container width, making it ideal for highlighting key services or featured content. When there's a single item, the width is still limited to a maximum of 50% of its container width.

Loading preview...
Open example in a new tab

Layout in Small Container

The example below shows the component integrated within a full page layout with sidebar content. Uses 5 items with the item-count-5 class in a specialized layout that accommodates the constrained width of a container with sidebar elements. This demonstrates how the component adapts when space is limited while maintaining readability and visual appeal. 

The 3-column layout variants have a slightly different breakpoint for switching to a 2 column layout between xl and xxl viewport widths. This breakpoint variant applies when the component is either a descendant of .layout-column--medium or if it has the grid-columns-xxl-12 class.

Loading preview...
Open example in a new tab

Accessibility Best Practices

Related content components implement comprehensive accessibility features to ensure equal access for all users.

Screen Reader Support

  • Semantic markup structure: Uses proper heading hierarchy and list structures for logical content organization.
  • Descriptive link text: Each content item includes clear, specific titles that describe the destination content. The card is linked and utilizes the aria-labelledby attribute to read the title.
  • Alternative text for images: All images include descriptive alt text that conveys the content and context of visual elements.
  • Proper focus management: Interactive elements follow logical tab order and maintain visible focus indicators.

Visual Accessibility

  • High contrast ratios: All text and interactive elements meet WCAG AA contrast requirements for readability.
  • Responsive design: Content maintains usability and readability across all screen sizes and zoom levels up to 200%.
  • Clear visual hierarchy: Consistent typography and spacing help users understand content relationships and importance.
  • Touch-friendly targets: Interactive elements meet minimum size requirements for touch accessibility.

Content Guidelines

  • Concise, descriptive titles: Write titles that clearly communicate the content topic in 6 words or less when possible.
  • Informative descriptions: Provide enough context for users to understand the content value without being overly verbose.
  • Consistent tone and style: Maintain similar content structure and voice across all related content items for predictability.
  • Action-oriented language: Use language that helps users understand what they can accomplish or learn from each item.
  • Relevant imagery: Select images that directly relate to and enhance understanding of the content topic.

Implementation Considerations

  • Content loading: Consider performance implications when displaying multiple content items with images simultaneously.
  • Grid flexibility: Layout automatically adapts based on item count, supporting various content quantities effectively. Drupal handles this in the template, external use will need to implement the variant classes like item-count-5 manually.
  • Responsive behavior: Component maintains optimal layouts across all device sizes and orientations.
  • Integration patterns: Works well within paragraph components, page layouts, and sidebar configurations.
Updated: Dec 02, 2025