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:
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:
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:
Last updated
Was this helpful?