Timeline
The timeline snippet creates a graphic offset two-column layout that connects a title and description to a label such as time, range, or a decorative icon. The timeline connects spans all the items or events with a bold vertical line stopping at a circle with the label and title. Select from a red or gray style timeline and give your snippet a different look with alternating background rows or border options. Add multiple rows to the snippet table to create more timeline items.
Snippet Options
STYLE
Changes the color of the bold vertical line connecting each timeline item.
- GRAY
- RED
STRIPED
When enabled changes the background of every odd row to light gray.
- YES
- NO
BORDERS
Adds a gray border around the right column content (title and description).
- YES
- NO
Snippet Columns
Label
The content on the left side of the line. Accepts plain text or a single Font Awesome icon. You can use this area to label the content on the right hand side of the line. Common uses are a time, time or date range, or grouping. (e.g. 12:00 AM, 1pm - 3pm, or Phase One)
We recommend using the LG or 2x size icons to line up with the timeline indicator circle and heading. When using an icon, no additional content will be included, only the icon.
/ Text or Icon Only, additional content will be removed.
Title
The title of the content on the right side of the line. This title displays in the WKU red color and heading 3 font size to line up with the circle on the timeline as well as the label defined previously.
Text Only, additional content will be removed.
Description
The description or content of your timeline item. Displays underneath the title if
one is included. You can place any additional WYSIWYG content including other snippets
in this column.
WYSIWYG content, nested snippets, components, and assets allowed.
Examples
Example 1
This example uses the default styles of the timeline, with the gray line and no borders or backgrounds.
1:00 PM to 3:00 PM
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
1:00 PM to 3:00 PM
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
1:00 PM to 3:00 PM
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
| Timeline Snippet | ||
|---|---|---|
| Options | ||
| STYLE | GRAY | |
| STRIPED | NO | |
| BORDERS | NO | |
| Timeline Items | ||
| Label | Title | Description |
| 1:00 PM to 3:00 PM | Timeline Event |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| 1:00 PM to 3:00 PM | Timeline Event |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| 1:00 PM to 3:00 PM | Timeline Event |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
Example 2
This example uses the STRIPED option to alternate row color. It also uses "phase" labels instead of a time range as an example of the type of content you could use.
Phase 1
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
Phase 2
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
Phase 3
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
| Timeline Snippet | ||
|---|---|---|
| Options | ||
| STYLE | GRAY | |
| STRIPED | YES | |
| BORDERS | NO | |
| Timeline Items | ||
| Label | Title | Description |
| Phase 1 | Request More Information |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| Phase 2 | Visit WKU |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| Phase 3 | Apply Now |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
Example 3
This example uses the RED option to change the color of the timeline.
January
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
April
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
October
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
| Timeline Snippet | ||
|---|---|---|
| Options | ||
| STYLE | RED | |
| STRIPED | NO | |
| BORDERS | NO | |
| Timeline Items | ||
| Label | Title | Description |
| January | Winter |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| April | Spring |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| October | Fall |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
Example 4
This example uses the BORDERED option to change the style of the timeline. It also uses the Icons - Font Awesome Gadget to add decortive icons instead of text labels.
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
| Timeline Snippet | ||
|---|---|---|
| Options | ||
| STYLE | GRAY | |
| STRIPED | NO | |
| BORDERS | YES | |
| Timeline Items | ||
| Label | Title | Description |
| Go |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
|
| Big |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
|
| Red |
Timeline event description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
|
Example 5
This example combines the STRIPED and BORDERED options. It also has additional rows, you can add as many timeline items as needed.
1st
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
2nd
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
3rd
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
4th
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
5th
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique.
| Timeline Snippet | ||
|---|---|---|
| Options | ||
| STYLE | GRAY | |
| STRIPED | YES | |
| BORDERS | YES | |
| Timeline Items | ||
| Label | Title | Description |
| 1st | Title One |
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| 2nd | Title Two |
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| 3rd | Title Three |
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| 4th | Title Four |
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
| 5th | Title Five |
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu mauris, pellentesque non nisi at, vehicula accumsan libero. Praesent aliquam nec odio nec consectetur. Sed faucibus risus eu velit rhoncus, vitae vehicula lectus posuere. Nullam imperdiet justo dolor, nec tempor tortor venenatis sed. Cras at lacus vitae neque congue rhoncus ac et nunc. Vivamus porttitor mi sit amet urna hendrerit, vel lobortis libero tristique. |
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.