CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Molecules

Figure

A container component that presents and formats visual content such as images along with optional captions to enhance understanding and context.

When to use

Use the Figure component when you need to:

  • Display content images that require captions or additional context

  • Present visual content in a consistent, accessible format across your website

  • Showcase images that need to be enlarged for better viewing of details

  • Format images within content areas where the visual needs to stand apart from the surrounding text

  • Provide proper attribution or citation for visual content

When not to use

Do not use the Figure component when:

  • The image is purely decorative and requires no caption or context

  • The visual content would be better served as a background image

  • You need a complex gallery of multiple images (use a gallery component instead)

  • The image is part of a more complex component such as a card or banner

  • You need interactive image features beyond simple enlargement


Best practice guidelines

  • Meaningful captions: Provide concise, informative captions that add context rather than simply repeating information already available in the surrounding content.

  • Image quality: Use appropriately sized and optimised images to balance quality with performance. Consider responsive image techniques to serve different sizes based on viewport.

  • Responsive behaviour: Ensure the figure and its caption maintain their relationship and readability across all screen sizes.

  • Visual hierarchy: Maintain a clear visual distinction between the image and its caption through consistent styling and adequate spacing.

  • Accessibility: Always include alternative text for images to ensure screen reader users understand the content. The caption does not replace the need for alt text.

  • Enlargement functionality: When implementing the enlarge feature, ensure focus management is handled properly when opening and closing the enlarged view.

  • Content relevance: Only use figures for images that add meaningful value to the content and deserve specific attention or explanation.

  • Placement and flow: Position figures to complement the surrounding content flow rather than disrupting it, considering how text wraps around the component.

Variations

Desktop and Mobile versions: The Figure component adapts its presentation between desktop and mobile views to maintain optimal viewing across different screen sizes. On smaller screens, the component adjusts proportionally to maintain the visual integrity of the image while ensuring the caption remains readable.


Accessibility

This component meets most WCAG 2.2 AA accessibility guidelines, with specific tests conducted against the standards as documented in the CivicTheme accessibility assessments.

According to the 'CivicTheme v1.7.0 Accessibility Assessments' document, the Figure component (listed as "Figure (Responsive Media)") has been tested for accessibility compliance. The assessment shows that the component passes tests for:

  • Non-text Content (1.1.1, Level A)

  • Contrast Minimum (1.4.3, Level AA)

  • Resize text (1.4.4, Level AA)

  • Keyboard accessibility (2.1.1, Level A)

  • Focus Visible (2.4.7, Level AA)

  • Text Spacing (1.4.12, Level AA)

The component includes proper functionality to allow images to be enlarged to maximise screen real estate and provides the ability to add captions with a "photo" icon, enhancing accessibility and user experience.

Security

No specific security considerations have been identified for this component beyond standard image handling best practices. As with all components that display user-uploaded content, server-side validation should be implemented to ensure only permitted file types and sizes are accepted.

Component inspiration and uplift

This component has been modelled after Responsive Media from the former Australian Government Design System. According to the CivicTheme documentation, it has been uplifted in the following ways:

  • Figures can be enlarged to maximise their screen real estate, providing users with a better viewing experience for detailed images

  • Similar to the Table component, it provides the ability to add a caption (alongside a "photo" icon), improving context and accessibility

  • The component supports displaying images in both desktop and mobile views with appropriate sizing adjustments

These uplifts were based on user research findings indicating that responsive media has requirements in multiple formats. The documentation notes that:

  • Responsive media in its default location in the body was limited in width (approximately 670px for desktop), making it less immersive

  • Limited space made it more difficult to view and understand the finer details of the media's content

  • When enlarged, the content becomes the primary focus, appearing front-and-centre in a separate modal that hides potential distractions


User research on this component

★★★☆☆ Confidence rating = Moderate (Informed by limited research)

Based on the available documentation, there appears to be some user research conducted on the Figure component, although specific details are limited. The CivicTheme documentation mentions that research was done to identify limitations of responsive media in default body locations, leading to the enhanced enlargement functionality.

The research highlighted issues with restricted space making media less immersive and details harder to discern, which informed the design decisions for this component. However, comprehensive user testing data specifically for this component is not extensively documented.

The component appears to address Digital Service Standard criteria, particularly "Leave no one behind" (through accessible caption implementation) and "Build trust in design" (through consistent, user-focused presentation of visual content).

Known issues

  • Modal interaction: Some users may experience challenges with keyboard navigation when using the enlargement feature, particularly when returning focus to the original position after closing the enlarged view.

  • Caption length handling: Very long captions may create layout issues on smaller screens, requiring careful content management.

  • Image loading performance: Large images may impact page performance if not properly optimised before implementation.

More research needed

More user research is needed in the following areas:

  • Accessibility testing with users who rely on assistive technologies to ensure the enlargement functionality works well with screen readers and keyboard navigation

  • User preferences regarding caption placement (below vs. beside the image) across different viewport sizes

  • Performance impact of the enlargement feature on various devices and connection speeds

  • User expectations around image manipulation capabilities (zoom, pan, etc.) when viewing enlarged images

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to discussions about the Figure component in the CivicTheme GitHub repository

  • Submit your user research findings to help improve the understanding of how this component is used

  • Propose enhancements to the component's functionality or accessibility features


Resources

  • Storybook

  • GitHub

References

  • Australian Government Design System (Archived)

Changelog

Version
Date
Changes

1.8.0

2024-07-23

Renamed Figure (Responsive Media) to Figure

1.7.0

2024-03-20

Component maintained with accessibility improvements

Contact us

PreviousFieldNextGroup filter

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Web Content Accessibility Guidelines (WCAG) 2.2
Digital Service Standard
Nielsen Norman Group: Guidelines for Displaying Images
Getting Help