Basic Page

The basic page provides a flexible foundation for content-heavy pages with consistent structure and typography. Use this pattern for informational pages, policy documents, service descriptions, and general content that requires clear hierarchy and readability. The layout includes proper heading structure, responsive design, and accessibility considerations for government content standards.

Do

  • Use semantic heading hierarchy - structure content with proper H1-H6 progression to create logical information architecture.
  • Keep content scannable - break up long text with subheadings, bullet points, and white space for easy reading.
  • Include clear page titles - write descriptive, specific titles that accurately represent the page content and purpose.
  • Provide logical content flow - organize information in order of importance or user workflow needs.
  • Use consistent formatting - apply standard text styles, spacing, and layout patterns throughout the page.
  • Include contact information - provide relevant department or service contact details when users need assistance.
  • Add breadcrumb navigation - help users understand their location within the site hierarchy.
  • Optimize for mobile - ensure content remains readable and usable on all device sizes.

Don't

  • Don't skip heading levels - avoid jumping from H2 to H4 without an H3, which breaks screen reader navigation.
  • Don't create walls of text - break up large paragraphs into smaller, digestible chunks with subheadings.
  • Don't use vague page titles - avoid generic titles like "Information" or "Details" without specific context.
  • Don't ignore page length - consider splitting extremely long content into multiple focused pages.
  • Don't forget alt text - ensure all images have descriptive alternative text for accessibility.
  • Don't mix content types randomly - keep related information grouped together logically.
  • Don't overlook loading performance - optimize images and content for fast page loading.
  • Don't assume prior knowledge - provide context and definitions for technical terms or government processes.

Layout

The example below demonstrates a comprehensive basic page layout with proper semantic structure, responsive typography, and accessibility features. Shows how to organize government content with clear hierarchy, readable formatting, and user-friendly navigation elements.

Loading preview...
Open example in a new tab

Content Guidelines

  • Clear, descriptive headings: Write headings that accurately describe the section content and help users scan for information.
  • Plain language principles: Use simple, direct language that citizens can easily understand, avoiding jargon and complex terminology.
  • Logical information order: Present information in order of importance or user needs, with key details prominently placed.
  • Actionable content: Include clear next steps, contact information, or links to related services when relevant.
  • Consistent tone: Maintain a professional, helpful tone that reflects government service standards.
  • Accessible formatting: Use proper list structures, adequate contrast, and clear link text for all users.

Implementation Considerations

  • Content management: Basic pages should integrate seamlessly with your CMS workflow and content approval processes.
  • SEO optimization: Include proper meta descriptions, structured data, and keyword optimization for search visibility.
  • Print compatibility: Ensure pages format appropriately when printed, with clear hierarchy and readable text.
  • Translation support: Structure content to accommodate multiple languages and right-to-left text when needed.
  • Performance monitoring: Track page loading times and user engagement to optimize content delivery.
  • Maintenance workflow: Establish regular content review cycles to keep information current and accurate.

Accessibility Features

  • Semantic HTML structure: Uses proper heading hierarchy and landmark elements for screen reader navigation.
  • Keyboard navigation: All interactive elements are accessible via keyboard with clear focus indicators.
  • Color contrast compliance: Text and background combinations meet WCAG AA standards for readability.
  • Responsive design: Layout adapts to different screen sizes and zoom levels without losing functionality.
  • Alternative text: Images include descriptive alt text that conveys meaning and context.
  • Link clarity: Link text clearly describes the destination or action, avoiding generic phrases like "click here."
Updated: Dec 02, 2025