2 Types of Timeline Elements

If you want to show off your schedule to the others, this element will come very handy. Please showcase your work using our timeline element.

Timeline Image

Vertical Timeline

You can particularly add different items across your timeline, especially images and text. It can be easily pickable for each item by timeline turning point.

2016 - 2018

Degree in Los Angeles Art School

Lorem Ipsum. Proin gravida nibh vel velitauc cil tor alique enean solli citudin lorem biben elif dumau ctor.

2019 - 2020

Degree in Los Angeles Art School

Lorem Ipsum. Proin gravida nibh vel velitauc cillorem biben elif dumau ctor, nisi elit consequat psum.

History Timeline

2016-2018

Degree in Los Angeles Art School

Lorem Ipsum. Proin gravida nibh vel velitauc cil tor aliquet. Aenean solli citudin lorem biben elif dumau ctor, nisi elit consequat... ipsum,nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.Sed non mauris vitae erat consequat auctor eu in elit.

2019-2020

Degree in Los Angeles Art School

Lorem Ipsum. Proin gravida nibh vel velitauc cil tor aliquet. Aenean solli citudin lorem biben elif dumau ctor, nisi elit consequat... ipsum,nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.Sed non mauris vitae erat consequat auctor eu in elit.

Custom Icon

01. First Step Info

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

02. Second Step Info

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

03. The Last Step Info

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

Horizontal Timeline

UDesign support horizontal timeline element comparable with vertical one. This element particularly support custom line with which link to each item.

01
02
03

First Step Info

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

Second Step Info

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

The Last Step Info

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean

Glossary

Timeline Element Options

Customize Elements Globally or Individually

  • Show Image: Toggle to decide whether image is shown or not.
  • Show Icon: Toggle to decide whether icon is shown or not.
  • Title: Input text for each step.
  • Meta: Input information form each step.
  • Description: Input description for each step.
  • Type: Control the type of breakpoints for each step.
  • Horizontal Alignment: Control horizontal position of timeline.
  • Vertical Alignment: Control vertical position of timeline.
  • Horizontal Space: Control space between timeline and contents.
  • Vertical Space: Control space between each steps.
  • Image: Styling options for images.
  • Icon: Styling options for icon.
  • Meta: Styling options for meta information.
  • Title: Styling options for title.
  • Description: Styling options for description.
  • Content: Styling options for content.
  • Point: Styling options for point.
  • Line: Styling options for timeline.