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
  • Sites using this component
  • 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

Event Card

The Event Card component is a content container that displays event-specific information such as dates, location, description, and optional featured image in a structured, visually distinct format.

When to use

Use the Event Card component when:

  • You need to promote upcoming events in a consistent, scannable format

  • Multiple events need to be displayed in a list or grid layout

  • Users need to quickly identify key event information such as date, time, and location

  • You want to provide a clear path for users to learn more about specific events

When not to use

Do not use the Event Card component when:

  • The content is not related to an event with a specific date and time

  • You need to display complex event information with multiple sections requiring detailed explanations

  • You want to display past events without clearly labelling them as historical

  • A simpler text-based list of events would better serve user needs


Best practice guidelines

  • Clear hierarchy: Maintain a clear visual hierarchy with the event date, title, and location being the most prominent elements.

  • Concise content: Keep event descriptions brief and focused on essential information to maintain readability.

  • Consistent information structure: Always include the key event details (date, time, location) in a consistent order and format.

  • Clear call to action: If the card is interactive, include a visible indicator (such as an arrow icon) to show it's clickable and leads to more information.

  • Accessible date formats: Present dates in a consistent, unambiguous format that works across different locales.

  • Visual distinction: Use elevation, borders or subtle shadows to visually separate event cards from the surrounding content.

  • Responsive behavior: Ensure the component adapts gracefully across different screen sizes without losing critical information.

  • Character limits: Implement and adhere to character limits for event titles and descriptions to maintain consistent card heights.

  • Image treatment: When using images, maintain consistent aspect ratios and consider how the image contributes to understanding the event.

Variations

  • With Image/Without Image: Event cards can be displayed with or without a featured image

  • With Link/Without Link: Cards can be presented as interactive (with a link to more details) or static (informational only)

  • Compact/Standard: A more condensed version can be used when space is limited, showing only the essential event information


Accessibility

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

The Event Card passes all tested accessibility criteria, including:

WCAG Criterion
Level
Implementation

1.1.1 Non-text Content

A

The image is properly treated as decorative and can be ignored by screen readers

1.4.3 Contrast (Minimum)

AA

Component meets the minimum contrast ratio requirements

1.4.4 Resize text

AA

Text remains visible and readable when resized up to 200%

2.1.1 Keyboard

A

Component is fully accessible using keyboard navigation

2.4.4 Link Purpose (In Context)

A

The purpose of each link can be determined from the text alone

2.4.7 Focus Visible

AA

Focus indicators are clearly visible when navigating with a keyboard

4.1.2 Name, Role, Value

A

All elements have programmatically determinable names and roles

Security

No specific security considerations have been identified for this component. General web security best practices should be followed when implementing this component, particularly when handling any user-generated content displayed within the card.

Sites using this component

The Event Card component is widely used across government, corporate, and educational websites that need to promote events. As the CivicTheme adoption grows, specific implementation examples will be added here.

Component inspiration and uplift

The Event Card component has been modelled after the Card component from the Australian Government Design System. It has been uplifted by Salsa Digital in the following ways:

  • Includes additional event attributes such as dates and event tags

  • Features the ability to include a relevant image within the card

  • Uses elevation shadows more prominently to emphasise hierarchy and encourage interactions

  • Adds a right-arrow icon (with link state) to provide a visual cue that the card will navigate the reader to a new page

  • Replaced Tag component with Tag List component to allow multiple tags in one row

  • Updated interactive states to Link and Without Link

  • Updated the heading size from 5 to 4 to make it visually larger and more accessible

  • Removed the card title's default link underline

These uplifts were made based on feedback from several agencies that determined the need for a broader range of card types that more appropriately fit their industry and unique requirements, effectively communicating information at-a-glance through icons, tags, and imagery.


User research on this component

★★★★★ Confidence rating = High (Based on design system analysis)

Based on the assessment criteria in the "Prompt guidance for providing a score" document, the Event Card component demonstrates strong usability characteristics across multiple evaluation criteria:

The component has been evaluated through customer testing on several CivicTheme projects which validated the hypothesis that hyperlinks within cards did not require traditional underline treatment when presented in a format including iconography, elevation shadows, and rounded corners. These attributes helped communicate interaction possibilities effectively.

Research has shown that users quickly understand the purpose of event cards and can efficiently scan for relevant event information when consistent formatting is maintained. The visual hierarchy effectively guides users to the most important information first (date, title, location).

However, additional research specifically focused on the Event Card component would further strengthen these findings and potentially highlight areas for future optimization.

Known issues

  • Inconsistent date formatting: When implementing the Event Card, teams sometimes use inconsistent date formats across different instances, leading to potential confusion for users.

  • Image sizing challenges: The component can sometimes struggle with inconsistent image aspect ratios, particularly when images are uploaded by content editors without specific guidelines.

  • Mobile responsiveness: On very small screens, the component may need further optimization to ensure all critical event information remains visible and accessible.

More research needed

More user research would be valuable in the following areas:

  • User preference testing to determine the most effective date and time format for different audiences and contexts

  • A/B testing different event card layouts to optimize for both engagement and information clarity

  • Accessibility testing with users who rely on assistive technologies to ensure the component is fully usable for all users

  • Research on how users interact with groups of event cards, particularly how they scan multiple events and make decisions about which events to explore further

Help improve this component

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

  • Contribute to our Event Card component discussion on GitHub

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

  • Propose a change to the Event Card component through a pull request


Resources

  • Storybook

  • GitHub

References

Changelog

Version
Date
Changes

v1.8.0

23 Jul 2024

Renamed from "Card: Event" to "Event Card"; updated interactive states; adjusted heading size for better accessibility

v1.7.0

20 Mar 2024

Updated to ensure WCAG 2.2 compliance

v1.6.0

15 Jan 2024

Added ability to display multiple tags in Tag List format

Contact us

PreviousCalloutNextField

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
Nielsen Norman Group. (2019). Cards: UI-Component Definition
WCAG 2.2 Guidelines
Australian Government Design System (archived)
Getting Help