Facebook Pixel Timeline Snippet | Western Kentucky University Skip to main content

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 as many rows to the snippet table as you like to create more timeline items.

 

Available Settings

STYLE
Changes the color of the bold vertical line connecting each timeline item.(Options:GRAY(default) or RED)

STRIPED
When enabled changes the background of every odd row to light gray. (Options:YES or NO (default))

BORDERS
Adds a gray border around the right column content (title and description).(Options:YES or NO(default))

 

Snippet Columns

Label
The content on the left side of the line. Accepts plain text or a single font awesome icon, any additional content will be stripped out. 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. (EX. "12:00 AM", "1 PM to 3 PM", or "Phase 1")

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.

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.

 

 

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

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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
STYLE GRAY
STRIPED NO
BORDERS NO
Label Title Description
1:00 PM to 3:00 PM Timeline Event

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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

Request More Information

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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
STYLE GRAY
STRIPED YES
BORDERS NO
Label Title Description
Phase 1 Request More Information

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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

Winter

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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
STYLE RED
STRIPED NO
BORDERS NO
Label Title Description
January Winter

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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 color of the timeline. It also uses font awesome to create decortive icons instead of text labels.

Go

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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
STYLE GRAY
STRIPED NO
BORDERS YES
Label Title Description
Go

Timeline event description. Replace with your 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. Replace with your 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. Replace with your 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

Title

Description. Replace with your 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

Description. Replace with your 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

Description. Replace with your 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

Description. Replace with your 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

Description. Replace with your 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
STYLE GRAY
STRIPED YES
BORDERS YES
Label Title Description
1st Title

Description. Replace with your 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

Description. Replace with your 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

Description. Replace with your 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

Description. Replace with your 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

Description. Replace with your 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.


Some of the links on this page may require additional software to view.

 Last Modified 7/17/18