Activity Timeline

The Folwell Activity Timeline is designed to display significant events in a chronological order on a stylized graph.

Activity Timeline Example

1851

Minnesota Territorial Legislature and Gov. Alexander Ramsey charter the University of Minnesota and elect a board of regents, seven years before Minnesota becomes a state.

1858

Old Main, the U of M’s first permanent building, is erected on the Historic Knoll Area of campus.

 

1861

The University temporarily closes during the Civil War.
 

Historic University of Minnesota building during the 19th century.

1862

Morrill Land-Grant Colleges Act signed, establishing federal land-grant resources for schools that teach and research agriculture and mechanic arts.

1868

Regent John Sargent Pillsbury reopens Old Main and the U of M resumes operations.

1873

Warren Clark Eustis and Henry Martyn Williamson are the first graduates.

1875

Helen Marr Ely is the first female graduate.

1900

The Minnesota Daily begins publication.

Usage

Create new component with Layout Builder

This will create a new Activity Timeline with the Layout Builder UI to be used on the page.

  1. After creating and publishing a page, click on the layout button. This will allow you to design and edit the layout of the page.
     

    Highlighted button of text reading "Layout"

  2. From Layout Builder, select + Add Block
     

    A screenshot of a mouse cursor on an "Add Block" button.

  3. In the right-sidebar menu, select + Create content block
     

    Highlighted button to create a content block

  4. Select Folwell Timeline
     

    Button with a label reading: "Folwell Timeline"

  5. The Configure block window will appear for the Folwell Activity Timeline component. Add a Title to the block. You may optionally display or hide the title you've added to the block.
     

    Configure Block window with Title input box.

  6. Add an Event Title (e.g. Folwell 2026) followed by additional content in the Event Body section.
     

    Configuration window for adding an Event Title and Event Body.

  7. Click Add another item.
     

    Button with label "Add another item"
  8. Repeat step 6 for any additional events.

  9. Click Add Block
     

    Add block button

  10. Scroll to the top of the page and click Save layout to save the changes
     

    Save Layout and Discard Changes buttons
Best Practice
  • Design accessibility into Activity Timelines to ensure the content is recognizable to screen readers. See Accessibility content for more information.
  • Text should be clear and easy to understand for maximum reader comprehension 
  • If there are links in a Timeline, the link text must clearly describe where the link is going to take a user.
  • Activity Timelines are meant to distill important and sometimes complex information into simple visual form. As such, color should be used sparingly to highlight only key information. Be sure there is enough color contrast between the foreground content and background content. 
  • Structure: Activity Timelines should have a logical structure. This may include titles and heading levels, consistent colors, a flow that is linear and easy to follow - ie: Event Titles containing dates in chronological order.
Accessibility
  • Contrast high enough for background colors, fonts, and lines 
  • Screen readers and other adaptive technologies able to identify the component as an Activity Timeline, read the text and link (if any), and access link
  • Ensure events are in chronological order for informational clarity