Quote

Quotes highlight important statements, testimonials, and key messages that deserve special emphasis on government websites. Use them to showcase citizen feedback, highlight policy statements, feature expert opinions, or emphasize important information that supports your content. The component supports both standalone quotes and attributed quotes with author information to establish credibility and context.

Do

  • Use quotes to highlight genuinely important or impactful statements that add value to your content.
  • Include proper attribution when quoting specific individuals, organizations, or sources.
  • Keep quotes concise and focused — aim for one to three sentences maximum for optimal readability.
  • Choose quotes that support your main message and provide meaningful context to users.
  • Use consistent formatting for all quotes throughout your site to maintain visual hierarchy.
  • Ensure quotes are accurate and properly fact-checked before publication.
  • Consider the credibility of sources when deciding whether to include attribution.
  • Place quotes strategically to break up long content and highlight key points.

Don't

  • Don't overuse quotes — they lose impact when used too frequently on a single page.
  • Don't use quotes for basic information that could be communicated more directly.
  • Don't fabricate or misattribute quotes — always verify accuracy and proper attribution.
  • Don't use overly long quotes that become difficult to scan and read.
  • Don't mix different quote styles within the same content section.
  • Don't use quotes without context — ensure they relate clearly to surrounding content.
  • Don't forget about mobile users — ensure quotes remain readable on smaller screens.
  • Don't use quotes as decorative elements — they should always serve a meaningful purpose.

Basic Quote

Standard quote component featuring an inspirational statement with proper attribution. Demonstrates the fundamental quote pattern with meaningful content that reflects the spirit and values of the Northwest Territories. Perfect for highlighting citizen perspectives, policy statements, or important messages that deserve emphasis.

The Northwest Territories is a place where the extraordinary is ordinary, where the impossible becomes possible, and where the spirit of adventure lives in every sunrise over the vast northern landscape.

Person of the Northwest Territories
Open example in a new tab

French

Les Territoires du Nord-Ouest sont un endroit où l'extraordinaire est ordinaire, où l'impossible devient possible, et où l'esprit d'aventure vit dans chaque lever de soleil sur le vaste paysage nordique.

Personne des Territoires du Nord-Ouest
Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Semantic blockquote markup: Uses proper <blockquote> elements that are recognized by assistive technologies.
  • Clear content structure: Quote text and attribution are properly structured for screen reader navigation.
  • Meaningful content: Quote text provides value and context when read aloud by screen readers.
  • Proper heading hierarchy: Quotes don't disrupt the logical heading structure of the page.

Keyboard Navigation

  • Focusable content: Any interactive elements within quotes are accessible via keyboard navigation.
  • Logical reading order: Quote content follows the natural flow of the page for keyboard users.
  • Skip navigation: Long quotes don't create barriers for users navigating with keyboards.

Visual Accessibility

  • High contrast ratios: Quote text meets WCAG AA contrast requirements against background colors.
  • Readable typography: Font size and line height ensure quotes remain legible for users with visual impairments.
  • Clear visual distinction: Quotes are visually differentiated from regular content without relying solely on color.
  • Responsive design: Quotes maintain readability across different screen sizes and zoom levels.

Content Guidelines

  • Authentic voice: Use genuine quotes that reflect real perspectives and experiences.
  • Appropriate length: Keep quotes concise while maintaining their original meaning and impact.
  • Clear attribution: Provide proper credit to sources when quotes are attributed to specific individuals.
  • Contextual relevance: Ensure quotes directly support and enhance the surrounding content.

Implementation Considerations

  • Proper HTML semantics: Use <blockquote> elements with appropriate citation markup when needed.
  • Content management: Establish processes for verifying quote accuracy and maintaining proper attribution.
  • Responsive behavior: Ensure quotes adapt gracefully to different screen sizes and orientations.
  • Performance optimization: Consider the impact of quote styling on page load times and rendering.

Styling Variations

  • With attribution: Include author information for credibility and context.
  • Without attribution: Use for anonymous feedback or general statements.
  • Inline quotes: Shorter quotes that can be integrated within paragraph content.
  • Featured quotes: Larger, more prominent quotes for key messages or testimonials.

Citation and Attribution

  • Author identification: Clearly identify the source when attribution is appropriate and verified.
  • Role or title context: Include relevant titles or roles that establish the speaker's credibility.
  • Anonymous options: Support anonymous quotes when privacy or confidentiality is important.
  • Source verification: Maintain records of quote sources and permissions when required.
Updated: Jan 19, 2026