GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Date modified
<gcds-date-modified>

Also called: Last updated, version date. Date modified is an indicator of the last update to a webpage or application.
  • Required on Canada.ca
  • Required on GC sites
  • GitHub
  • Figma

Date modified component preview

Date modified anatomy

  • The label describes the type specified in the value. The label reads either: “Date modified” or “Version” depending on the component type.
  • The value is either a numerical date formatted as YYYY-MM-DD or a version number.
Date modified with 2023-01-30. Each individual element of the component has a number pointing to it.

Design and accessibility for date modified

Check date modified requirements

The date modified is required on Canada.ca pages and GC sites. Always include the date modified and maintain default settings.
  • Place the date modified component on the left, between the main content of the page and the footer.
  • Use the same placement of the date modified component across all web pages to make it findable.
  • If your page includes the page feedback tool, place the date modified component below it.
 For applications, use a version number in place of a date.

Keep the format consistent

  • Use the YYYY-MM-DD date format across all web pages.
  • If using the version type, apply a standard version number format across all products.

When to update the date modified

  • Only update the date modified when you make a significant content change.
  • Avoid updating for minor corrections, like typos, or small changes to the code.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2025-07-17