Document

Document components display downloadable files with clear metadata and appropriate file type icons. Use them to present PDFs, Word documents, spreadsheets, and other file types in a consistent, accessible format. The component automatically detects file types and displays corresponding icons while providing essential file information like size, format, and date.

Do

  • Use descriptive document titles that clearly explain the content and purpose of the file.
  • Include helpful summaries that give users context about what they'll find in the document.
  • Provide complete file metadata including file size, format, and last modified date.
  • Group related documents logically when displaying multiple files.
  • Use consistent file naming that follows your organization's conventions.
  • Test download functionality regularly to ensure files are accessible and current.
  • Consider file accessibility — ensure PDFs and other documents meet accessibility standards.
  • Optimize file sizes to improve download times, especially for mobile users.

Don't

  • Don't use generic titles like "Document 1" or "File.pdf" — be specific about content.
  • Don't forget file summaries — users need context to decide if they want to download.
  • Don't omit file metadata — size and format help users prepare for downloads.
  • Don't link to broken files — regularly audit and update document links.
  • Don't use overly large files without warning users about download size.
  • Don't mix document types randomly — organize by topic, date, or file type as appropriate.
  • Don't forget mobile users — ensure documents are mobile-friendly when possible.
  • Don't use inaccessible file formats when accessible alternatives are available.

Dependencies

The Document component requires additional CSS dependencies to render correctly:

  • Card Component CSS: The Document 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.

Single Document

Standard PDF document with complete metadata. Demonstrates a typical document presentation with descriptive title, summary, and file information. Shows how the component automatically displays the appropriate PDF icon and formats file details consistently.

Community Arts Program
The Community Arts Program is designed to foster creativity, cultural expression, and artistic development within communities.

pdf • 54.25KB • Jul 19 2024

Open example in a new tab

Document List

Multiple documents with different file types. Displays three documents (PDF, TXT, DOCX) showing how the component handles various file formats with appropriate icons. Demonstrates consistent spacing and metadata presentation across different document types in a grouped layout.

Community Arts Program
The Community Arts Program is designed to foster creativity, cultural expression, and artistic development within communities.

PDF • 104.31KB • Nov 02, 2020

Native Lanuages of Northwest Territories
The Northwest Territories (NWT) in Canada is a culturally rich region with a diverse Indigenous population. Reflecting this diversity, the territory officially recognizes 11 Indigenous languages alongside English and French.

TXT • 29.22KB • Oct 16, 2023

About Government of Northwest Territories

DOCX • 9.45KB • Aug 05, 2025

Open example in a new tab

Page Link with Document

Document that links to a page with separate download option. Shows how to provide both a main link to a related page and a separate download link for the actual file. Useful when you want to provide additional context or information before users download the document.

Community Arts Program
The Community Arts Program is designed to foster creativity, cultural expression, and artistic development within communities.

pdf • 29.22KB • May 26, 2012

Download
Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Descriptive link text: Document titles provide clear, specific information about file content.
  • File format indication: File extensions and metadata help users understand what they're downloading.
  • Semantic structure: Uses proper heading hierarchy and card structure for logical navigation.
  • Alternative text for icons: File type icons include appropriate alternative text or are marked as decorative.

Keyboard Navigation

  • Full keyboard access: All document links and download buttons are keyboard accessible.
  • Logical tab order: Users can navigate through document lists in a predictable sequence.
  • Clear focus indicators: Visual focus states help keyboard users identify their current position.
  • Consistent interaction: All document links behave consistently across the interface.

Visual Accessibility

  • High contrast design: Document cards and text meet WCAG contrast requirements.
  • Clear visual hierarchy: Titles, summaries, and metadata are visually distinct and scannable.
  • Recognizable icons: File type icons provide immediate visual recognition of document formats.
  • Adequate spacing: Sufficient space between elements prevents accidental activation.

Content Guidelines

  • Descriptive titles: Use specific, meaningful names that explain the document's purpose.
  • Helpful summaries: Provide context that helps users decide whether to download.
  • Complete metadata: Include file size, format, and date to set proper expectations.
  • Consistent formatting: Use standard date formats and file size units across all documents.

Implementation Considerations

  • File accessibility: Ensure linked documents themselves meet accessibility standards.
  • Download behavior: Clearly indicate when links will download files versus navigate to pages.
  • Error handling: Provide appropriate feedback when files are unavailable or corrupted.
  • Performance: Optimize file sizes and consider lazy loading for large document lists.

ARIA Attributes in Use

  • Semantic HTML structure provides built-in accessibility.
  • Card component structure maintains proper document relationships.
  • Link elements clearly indicate their purpose and destination.
  • File metadata is properly associated with document titles.
Updated: Dec 02, 2025