Timeline Block

A horizontal scrolling block that displays content in a sequential, timeline format. Each inner
card block can include dates, images, headers, and body text.


The University of Florida

1853

seal of the university of florida

Founding of East Florida Seminary in Ocala, Florida

The modern University of Florida traces its origins to 1853, when the East Florida Seminary, the oldest of its four predecessor institutions, was founded in 1853 as the East Florida Seminary in Ocala, Florida. The seminary was Florida’s first state-supported institution of higher learning and operated until 1861 with the outbreak of the American Civil War. Source: https://en.wikipedia.org/wiki/University_of_Florida

1866

East Florida Seminary barracks

East Florida Seminary re-opens in Gainesville

In 1866, the East Florida Seminary reopened in Gainesville on the grounds of the Gainesville Academy, a small private college that had closed during the war. Source: https://en.wikipedia.org/wiki/University_of_Florida

1884

Florida Agricultural College in Lake City in 1884

Florida Agricultural College (FAC) founded under the Morrill Act

Florida Agricultural College (FAC), the state’s first land-grant college under the Morrill Act, established in Lake City. Source: https://en.wikipedia.org/wiki/University_of_Florida

1905

Group photo of the members of the Florida state legislature in 1905

Florida Legislature passes the Buckman Act

The Florida Legislature passed the Buckman Act, which reorganized the state’s publicly supported institutions of higher education. Under the act, Florida’s six state-supported institutions were merged to form the State University System of Florida under the newly established Florida Board of Control. Source: https://en.wikipedia.org/wiki/University_of_Florida

1905

campus building

The University of Florida moves to Gainesville

The Buckman Act did not specify where the new University of the State of Florida would be located. The City of Gainesville, led by its mayor William Reuben Thomas, campaigned to be the site of the new university, with its primary competitor being Lake City. After a brief but intense period of lobbying, the Board of Control selected Gainesville on July 6, 1905, and funds were allocated for the construction of a new campus on the western edge of the town. Source: https://en.wikipedia.org/wiki/University_of_Florida

1906

aerial view of campus buildings

First semester for Gainesville UF campus

The University of Florida’s first semester in Gainesville began on September 26, 1906, with an enrollment of 102 students. Two buildings had been completed at the time: Buckman Hall, named after the primary author of the law that created the university, and Thomas Hall, named after the mayor of Gainesville who had led the successful effort to bring the school to town. Both structures were designed by William A. Edwards, who designed many of the university’s original buildings in the Collegiate Gothic style in his role as lead architect for Florida’s Board of Control. Source: https://en.wikipedia.org/wiki/University_of_Florida

Use this block to help feature historical timelines, step-by-step processes and visual storytelling that flows chronologically through individual cards for each event.

Cards in the timeline block allow for a date, image, header and body text. For the block to display properly, each timeline card should include:

  • Date or step number (at the top) – helps users understand the sequence
  • Header – the main point of this card
  • Body text – supporting details
  • Image (optional) – adds visual interest

While you can technically publish without these elements, following this structure will give you the best results.

This block is available on all page types, including landing pages. Some limitations do exist below.


How to Edit

Add a new card by

Click “Add timeline card” button

Select the “Timeline Card” when focused inside the “Timeline” block

Reorder cards by

  • Using the Document Overview panel
  • Using left/right arrows in the block toolbar
  • Dragging and dropping in the editor

How Users Can Navigate

Once the page is published, site visitors can interact with the timeline by

  • Click left/right arrows
  • Keyboard arrow keys
  • Shift + mouse scroll (desktop)
  • Swipe on mobile
  • Keyboard/screen reader accessible

Limitations and Content Guidelines

Limitations

Users frequently scroll past these blocks without engaging with the content beyond the first card. This risk increases with more cards. The blocks should be used for supplementary/
nice-to-have content.

Content Structure Guidelines

Images

  • Block automatically resizes images to fit
  • Max height: 400px (desktop), 200px (mobile)
  • Use landscape-oriented images for best results

Body Text

  • No strict character limit, but for best mobile display
  • With an image: One paragraph (~400 characters or less)
  • Without an image: One and a half paragraphs (~500 characters or less)
  • Longer text may cut off on smaller phones

Number of Cards

No limit, but remember, more cards may make it less likely users will see them all.