--- title: Horizon Theme - Timeline --- [![Horizon Logo](https://horizonthemedev.com/hs-fs/hubfs/raw_assets/public/horizon-theme/images/style-guide-images/logo-header.png?width=60&height=65&name=logo-header.png "Horizon Logo")](https://horizonthemedev.com/?hsLang=en) - Components #### Components Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare sed consequat tempus sed adipiscing pellentesque ullamcorper . - [Style Guide](https://horizonthemedev.com/style-guide?hsLang=en) - [Header](https://horizonthemedev.com/header?hsLang=en) - [Footer](https://horizonthemedev.com/footer?hsLang=en) - [Featured Image](https://horizonthemedev.com/featured-image?hsLang=en) - [Shape Divider](https://horizonthemedev.com/shape-divider?hsLang=en) - [Fancy Headline](https://horizonthemedev.com/fancy-headline?hsLang=en) - [Accordion](https://horizonthemedev.com/accordion?hsLang=en) - [Creative Tabs](https://horizonthemedev.com/creative-tabs?hsLang=en) - [Timeline](https://horizonthemedev.com/timeline) - [Blog Post Cards](https://horizonthemedev.com/blog-post-cards?hsLang=en) - [Testimonial Slider](https://horizonthemedev.com/testimonial-slider?hsLang=en) - [Pricing Cards](https://horizonthemedev.com/pricing-cards?hsLang=en) - [Image Gallery](https://horizonthemedev.com/image-gallery?hsLang=en) - [Image Text](https://horizonthemedev.com/image-text?hsLang=en) - [Image Slider](https://horizonthemedev.com/image-slider?hsLang=en) - [Content Tabs](https://horizonthemedev.com/content-tabs?hsLang=en) - [Background Overlay](https://horizonthemedev.com/background-overlay?hsLang=en) - [Featured Form](https://horizonthemedev.com/featured-form?hsLang=en) - [Flip Cards](https://horizonthemedev.com/flip-cards?hsLang=en) - Icon List - [Popup Modal](https://horizonthemedev.com/pop-up?hsLang=en) - Scroll Arrows - [Social Follow](https://horizonthemedev.com/social-follow?hsLang=en) - [Column Swiper](https://horizonthemedev.com/column-swiper?hsLang=en) - [HubDB Listing](https://horizonthemedev.com/hubdb-listing?hsLang=en) - [Multistep Form](https://horizonthemedev.com/multistep-form?hsLang=en) - [Dynamic Tabs](https://horizonthemedev.com/dynamic-tab?hsLang=en) - [Team Members](https://horizonthemedev.com/team-members?hsLang=en) - [Button Group](https://horizonthemedev.com/button-group?hsLang=en) - [Event Calendar](https://horizonthemedev.com/event-calendar?hsLang=en) - Interactive Landings - [Scrolling Animations Landing 1](https://horizonthemedev.com/scrolling-animations-landing-1?hsLang=en) - [Scrolling Animations Landing 2](https://horizonthemedev.com/scrolling-animations-landing-2?hsLang=en) - Blog - Help ###### COMPONENTS # TIMELINE --- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare sed consequat tempus sed adipiscing pellentesque ullamcorper aliquet. Ornare erat nullam vitae netus tristique adipiscing id aliquet rhoncus. [View Variants](https://horizonthemedev.com/timeline#section-2) ![Frame](https://horizonthemedev.com/hubfs/Frame.png "Frame") ## **VARIANT: SIMPLE RIGHT** --- This variant is a vertical line, in which each section is represented as a marker along the line. The tittle is on the left, filling information on the right. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ## **VARIANT: SIMPLE LEFT** --- This variant is a vertical line, in which each section is represented as a marker along the line. The tittle is on the right, filling information on the left. ## **VARIANT: SIMPLE MIXED** --- This variant is a vertical line, in which each section is represented as a marker along the line. The tittle is on top of the section, filling information is on both sides along the line. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ## **VARIANT: RIGHT WITH IMAGE** --- This variant is a vertical line, in which each section is represented as a marker along the line. Filling information on this variant is composed text and images which are located on the right. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) ## **VARIANT: LEFT WITH IMAGE** --- This variant is a vertical line, in which each section is represented as a marker along the line. Filling information on this variant is composed of text and images, which are located on the left. ## **VARIANT: MIXED WITH IMAGE** --- This variant is a vertical line, in which each section is represented as a marker along the line. Tittle text is at the top of this section, filling information on this variant is composed text and images which are located on both sides of the module. - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) - ###### January 25, 2023 ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Amet tellus nunc auctor in. Nibh pellentesque nec purus vestibulum eleifend in nibh sed elit. In gravida potenti ut pulvinar ornare tellus. Gravida aliquet blandit est morbi tempor aliquet. ![friends-placeholder](https://horizonthemedev.com/hs-fs/hubfs/friends-placeholder.jpg?width=490&height=258&name=friends-placeholder.jpg) [![logo](https://horizonthemedev.com/hubfs/raw_assets/public/horizon-theme/images/logo-horizon-dark.svg "logo")](https://horizonthemedev.com/style-guide?hsLang=en) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Copyright © 2025 Horizon Theme . All Rights Reserved.