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 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

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.

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

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.

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

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.

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.

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.

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

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.

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.

Get Help



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

 Last Modified 11/6/20