Ripple Design System

Key dates

The Key dates component shows users a card promoting key dates or events.


Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.

When and how to use

  • Use only on landing pages.
  • Include in a grid of promo cards.
  • Only use once per page.
  • Use clear and concise content.
  • Only use as the last card in the grid.
  • Include a summary.

When and how not to use

  • Don’t use with navigation cards.
  • Don’t use the key dates card by itself.
  • Don’t overload with content.
  • Don’t use with other interactive elements like links.
  • Don’t use it to replace a call to action.


The key date card uses colour to:

  • add visual prominence to key information
  • indicate an interaction to users.

To create your own theme, see theming guidance for designers or theming guidance for developers.