Content Blocks

Content blocks are flexible layout components used to structure and present information in a clear, consistent, and readable way. They form the foundation of page content across Sharjah Government websites, helping teams organize text, media, and actions into meaningful sections that support user understanding and navigation.

Purpose

  • Group related information into clear sections
  • Present text-heavy content in a structured format
  • Combine text with images, icons, or actions
  • Maintain visual consistency across different page types

Content blocks should be used as the primary building units for pages, ensuring predictable layouts and improved content scan ability.

Content Block Types

1. Text Content Block

Used for presenting headings, paragraphs, and supporting text.

Common uses:

  • Page introductions
  • Descriptive content
  • Policy or informational text

Best practices:

  • Keep paragraphs concise and readable
  • Use headings to establish hierarchy
  • Maintain consistent spacing between elements

2. Media Content Block

Combines images, videos, or illustrations with supporting text.

Common uses:

  • Highlight key initiatives or campaigns
  • Showcase visuals with contextual information

Best practices:

  • Ensure media supports the message, not distracts from it
  • Provide alternative text for accessibility
  • Maintain consistent aspect ratios

3. Mixed Content Blocks

Allows flexible combinations of text, media, icons, and actions within a single block.

Common use cases:

  • Feature sections
  • Service highlights
  • Promotional content

Best practices:

  • Maintain clear visual balance
  • Limit the number of elements per block
  • Keep calls to action focused and intentional

4. Action-Oriented Content Block

Designed to encourage user interaction through buttons or links.

Common use cases:

  • Call-to-action sections
  • Navigation highlights
  • Next-step guidance

Best practices:

  • Use clear, action-driven labels
  • Avoid overwhelming users with too many actions
  • Place actions consistently within the block

Accessibility Guidelines

  • Use semantic HTML elements to support screen readers
  • Ensure sufficient contrast between text and background
  • Avoid relying solely on colour to convey meaning
  • Maintain logical reading order for all content

Responsive Behavior

Content blocks adapt fluidly across screen sizes:

  • Content stacks vertically on smaller screens
  • Media resizes without losing context
  • Spacing remains consistent to preserve readability