Timeline

There are currently two different timeline components: List - Timeline and Timeline.

• The List - Timeline component presents a simple list of items, each with a heading and simple WYSIWYG content.
• The more complex Timeline component uses a timeline chart to control an image gallery/carousel.

List - Timeline

The List - Timeline component is a simple list with each list item containing a heading and WYSIWYG content. The list will be styled with a line and round markers below or to the left of the items (depending on whether the list uses the Horizontal or Vertical orientation, respectively). When displayed horizontally, the list will display up to 5 items before wrapping onto a new line, depending on the contents of the items. On smaller screen/browser widths or when the contents of individual items require more width, it will wrap after fewer items.

The List - Timeline component will work both within [WYSIWYG] Content Containers and outside of them.

• Heading Level [Drop-Down]: Set the Heading Level from 2 to 6 (defaults to 3).
• Orientation [Radio Buttons]: Horizontal (default) or Vertical. Set the orientation of the list.
• Timeline Entries [Group]: The list items:
  • Item Heading [Short Text]: The heading for the list item.
  • Item Content [WYSIWYG]: Content for the list item.

Horizontal

• Jan. 9, 2023

  Launch of the List - Timeline component.

  

• Nov. 16, 1987

  "It's the End of the World as We Know It (And I Feel Fine)"
  - R.E.M.

• April 17, 2007

  "This is the beginning of the end"
  - Nine Inch Nails

• May 24, 1974

  "Because of all we've seen, because of all we've said
  We are the dead"
  - David Bowie

• December 1, 2017

  "Too blind to see that we are prison born"
  - The Faceless

• June 10, 1996

  "Your only salvation
  will come in the shape of the bomb"
  - Carcass

• January 5, 1998

  "See my shadow changing
  Stretching up and over me"
  - Tool

Vertical

• Item 1

  This is some text and an image

  

• Item 2

  This is more text

Timeline

The Timeline component uses a timeline chart to control an image gallery/carousel. The component supports the addition of Date Ranges and Moments to the timeline. Each Date Range or Moment can have an associated Image, which will be displayed in the image gallery when that item is selected in the timeline chart. A Date Range represents something which occurred over a period of time, with a starting and ending date. A Moment represents something which occurred on a single day.

• Date Ranges 1: A group of Date Ranges to be added to the timeline chart.
  • Name/Title [Short Text]: Displayed in the timeline and, if Image is used, displayed as a heading alongside the image.
  • Start Date [Date]: The starting date for the range.
  • End Date [Date] (Optional): The ending date for the range. If omitted, "Present" will be used.
  • Image [Image Picker] (Optional): An image to display in the image gallery when this item is selected.
  • Image Description [Short Text] (Optional, required if Image is used): accessible description of the image
  • Text (Long Text): Paragraph/text to be displayed next to the image.
• Date Ranges 1 Position [Radio Buttons: Above, Below]: Display this group of Date Ranges above or below the timeline.
• Date Ranges 2: A group of Date Ranges to be added to the timeline chart.
  • Name/Title [Short Text]: Displayed in the timeline and, if Image is used, displayed as a heading alongside the image.
  • Start Date [Date]: The starting date for the range.
  • End Date [Date] (Optional): The ending date for the range. If omitted, "Present" will be used.
  • Image [Image Picker] (Optional): An image to display in the image gallery when this item is selected.
  • Image Description [Short Text] (Optional, required if Image is used): accessible description of the image
  • Text (Long Text): Paragraph/text to be displayed next to the image.
• Date Ranges 2 Position [Radio Buttons: Above, Below]: Display this group of Date Ranges above or below the timeline.
• Moments 1: A group of Moments to be added to the timeline chart.
  • Name/Title [Short Text]: Displayed in the timeline and, if Image is used, displayed as a heading alongside the image.
  • Date [Date]: The date for the moment.
  • Image [Image Picker] (Optional): An image to display in the image gallery when this item is selected.
  • Image Description [Short Text] (Optional, required if Image is used): accessible description of the image
  • Text (Long Text): Paragraph/text to be displayed next to the image.
• Moments 1 Position [Radio Buttons: Above, Below]: Display this group of Moments above or below the timeline.
• Moments 1 Name [Short Text] (Optional): A name for the group of moments. Displayed in the tooltip of each moment in this group.
• Moments 2: A group of Moments to be added to the timeline chart.
  • Name/Title [Short Text]: Displayed in the timeline and, if Image is used, displayed as a heading alongside the image.
  • Date [Date]: The date for the moment.
  • Image [Image Picker] (Optional): An image to display in the image gallery when this item is selected.
  • Image Description [Short Text] (Optional, required if Image is used): accessible description of the image
  • Text (Long Text): Paragraph/text to be displayed next to the image.
• Moments 2 Position [Radio Buttons: Above, Below]: Display this group of Moments above or below the timeline.
• Moments 2 Name [Short Text] (Optional): A name for the group of moments. Displayed in the tooltip of each moment in this group.
• Timeline Height [Short Text] (Optional): Set the height of the region that will contain the timeline.
• Timeline Vertical Offset [Short Text] (Optional): Adjust the position of the chart relative to its container. Negative numbers move the chart up, positive numbers move it down.
• ID [Short Text] (optional): Add an ID to be used as a link target on the page. ID must be unique on the page and use only lowercase letters, numbers, and hyphens (-). The first character must be a letter.