Side Content Date Range

A component that shows times and dates.


Category: Side content

Here is a working example of Side Content Date Range. Its appearance will change in response to the size of your screen.


Start date: End date:

Usage guidelines

  • Use to show the time and date (or date range) of an event.
  • Upon the user clicking on the link an overlay will appear with actions to fill in.
  • Once the user has selected date ranged and pressed apply the results should display using the date filters defined.


  • Place in the Side Content.

Editing and customisation

  • You can edit the Date (date/time) and End Date (date/time) fields.

Live examples

  • Virgin Money London Marathon 2018
  • Events

Related components

Share Page
More details
More details
More details
More details
Back to top