UBC Timeline Block

A timeline is a visual representation or chronological sequence of events, actions, or historical developments arranged in a linear fashion. It provides a structured way to display and understand the order and progression of various activities or occurrences over time. Timelines can be used to present historical information, track project milestones, illustrate the evolution of a concept, or depict any sequence of events that unfolds chronologically.

At CTLT(Centre for Teaching, Learning, and Technology), we’ve created a UBC Timeline Block that simplifies the process of incorporating this visual representation using the WordPress block editor.

Table of Contents

Example

  • January 1, 2020

    Product Inception

    The idea for our innovative product was born, sparking initial brainstorming sessions and market research.

  • April 15, 2020

    Design and Prototyping

    Our design team began creating prototypes, refining concepts, and developing the product’s visual identity.

  • JAN 01, 2020

    2021

    Description Placeholder

  • March 1, 2021

    Development Kickoff

    Development officially began, with a dedicated team working on coding, testing, and building the product’s core features.

  • July 15, 2020

    Beta Testing Phase

    We initiated a closed beta testing phase, gathering valuable feedback from early users to improve functionality and user experience.

  • September 01, 2020

    Product Launch

    The product was successfully launched to the public, marking a significant milestone and the beginning of its journey in the market.

Settings

Add New Timeline

By clicking the Add Timeline Item button, you can effortlessly insert a fresh entry into the timeline, complete with pre-filled placeholder text.

Re-order and Delete Timeline.

You have the ability to re-order or delete each timeline item by clicking the buttons within its toolbar.

  • Title: The title of the timeline item.
  • Description: The description of the timeline item, will be rendered directly underneath the title.
  • Info: This setting provides additional information about each timeline item, with the date being automatically utilized as the default. Will be rendered on the opposite side of the title and description.
  • Is Timeline Divider: Enabling this setting will transform the timeline item into a divider, displaying only the title in the center.

Mobile Friendly

The UBC Timeline Block is mobile friendly.

Accessibility

The UBC Timeline Block conforms with WCAG 2.1 AA Guidelines, ensuring that all users can navigate and interact with its content easily and effectively.

Code

The UBC Timelines Block plugin is Open Source.

https://github.com/ubc/UBC-Timelines-Block

How to use the block on UBC CMS?

Navigate to your site’s Dashboard on UBC CMS and go to Plugins. Search for UBC Timeline Block and activate the plugin. proceed to the specific post or page you wish to edit. Click the + button located in the top-left corner or in the desired location on the page to add a block. Finally, search for UBC Timeline to insert it into your content.

Back to List of Blocks