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

Subject Card

The Subject Card component provides a clickable, themed card interface for presenting navigational topics or categories with visual emphasis through optional background imagery.

When to use:

Use the Subject Card component when you need to:

  • Present popular or high-priority topics in a visually engaging format

  • Create category navigation that benefits from visual differentiation

  • Direct users to key content areas within your site in a prominent way

  • Group related content under themed visual containers

  • Enhance the visual hierarchy of your information architecture

When not to use:

Do not use the Subject Card component when:

  • The content requires detailed explanations or multiple actions that would be better served by more complex components

  • You need to display dynamic, frequently updating content that would be better suited to a feed or list format

  • You're presenting purely informational content with no navigational purpose

  • Users need to compare detailed information across multiple items, which would be better served by a table or list view

  • Space is limited and simpler navigation patterns would be more appropriate


Best practice guidelines:

  • Clear labelling: Use concise, descriptive headings that clearly communicate the topic or category represented

  • Visual consistency: Maintain a consistent visual style across all Subject Cards on a page to create a cohesive experience

  • Background imagery: When using background images, ensure they are relevant to the subject matter and don't impede text readability

  • Hierarchy considerations: Place the most important or frequently accessed topics in prominent positions within the layout

  • Responsive behaviour: Ensure Subject Cards adapt appropriately across different viewport sizes, maintaining readability and usability

  • Balanced design: When using multiple Subject Cards together, create a balanced layout with consistent spacing and sizing

  • Accessibility focus: Ensure sufficient contrast between text and background, especially when using themed backgrounds

  • Touch targets: Make the entire card clickable for easier interaction on touch devices, not just the heading or text elements

Variations:

  • With/without link: Cards can be configured to be interactive links or static display cards

  • With/without image: Cards can include background imagery for visual emphasis or use a simpler, solid background

  • Light/dark theme: Cards can be styled with either light or dark themes to suit different design requirements


Accessibility:

Based on the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Subject Card component has been evaluated against WCAG 2.2 standards with the following results:

The component has passed testing for multiple standards including:

WCAG Criterion
Level
Status

1.1.1 Non-text Content

A

Pass

1.4.3 Contrast (Minimum)

AA

Pass

1.4.4 Resize text

AA

Pass

1.4.12 Text Spacing

AA

Pass

2.1.1 Keyboard

A

Pass

2.4.4 Link Purpose (In Context)

A

Pass

2.4.7 Focus Visible

AA

Pass

4.1.2 Name, Role, Value

A

Pass

This component meets WCAG 2.2 AA accessibility guidelines.

Security:

No specific security considerations have been identified for this component beyond standard web security practices.

Component inspiration and uplift:

The Subject Card component has been modelled after the Card component from the former Australian Government Design System (AGDS). It has been uplifted by Salsa Digital, as the custodian of the CivicTheme Design System, in the following ways:

  • Enhanced theming: Subject Cards can now be themed with background imagery to create more visually engaging navigation elements

  • Improved hierarchy: Elevation shadows have been more prominently used to emphasise hierarchy and encourage interactions

  • Interactive states: Updated interactive states to "Link" and "Without Link" for clearer usage patterns

  • Typography improvements: Updated the heading size from 5 to 4, making it visually larger and more accessible

  • Simplified interaction design: The card title's default link underline has been removed to create a cleaner visual appearance while maintaining accessibility

The component follows the Digital Service Standard requirements for accessible, user-centred design by ensuring it can be easily understood and navigated by all users.


User research on this component:

★★★☆☆ Confidence rating = Medium (Limited testing with end users)

Based on the available information, some user research has been conducted on card components generally in the CivicTheme system, though specific detailed research focused solely on the Subject Card component is limited. Research across similar card patterns indicates users respond positively to:

  • Clear visual hierarchy that helps them quickly scan and identify relevant topics

  • The ability to navigate directly to topic areas through visually distinct elements

  • Background imagery that provides visual context for the topic area

More comprehensive user testing specifically focused on the Subject Card component would enhance confidence in these findings.

Known issues:

  • Mobile responsiveness: On smaller screens, cards with background images may sometimes have readability issues if the image and text don't maintain sufficient contrast at all screen sizes

  • Consistency in implementation: When multiple content editors add Subject Cards across a site, maintaining visual consistency in background imagery selection can be challenging

  • Loading performance: When using high-resolution background images, care must be taken to optimise image file sizes to prevent performance impacts

More research needed:

More user research is needed in the following areas:

  • Comparative effectiveness of Subject Cards with and without background imagery for different user groups and contexts

  • Optimal number of Subject Cards to display in a single view before cognitive load becomes an issue

  • User expectations and preferences regarding interaction patterns when encountering Subject Card components

  • Effectiveness of Subject Cards for improving information architecture comprehension across different demographics

  • Performance impact of background imagery on page load times, especially for users on slower connections

Help improve this component:

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

  • Contribute to our Subject Card component discussion

  • Submit your user research findings to help improve the Subject Card component

  • Propose a change to the Subject Card component


Resources:

  • Storybook

  • GitHub

References:

  • Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability.

Changelog:

Version
Date
Changes

1.8.0

23 Jul 2024

Updated interactive states to Link and Without Link; Updated the heading size from 5 to 4

1.7.0

20 Mar 2024

WCAG 2.2 compliance updates

1.6.0

[Previous date]

Previous updates

Contact us:

PreviousSnippetNextTable of Contents

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
Material Design (2020). Cards - Components
Nielsen Norman Group (2019). Cards: UI-Component Definition
Getting Help