--- title: Horizon Theme - Content Tabs --- [![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?hsLang=en) - [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) - [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 # CONTENT TABS --- 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/content-tabs#section-2) ![Horizon BG](https://horizonthemedev.com/hubfs/horizon-bg.png "Horizon BG") ## **VARIANT: BASIC** --- You can find a basic layout for content tabs, each tab corresponds to a different category or section of content and image in each separate in a modal window. Example One Example Two Example Three ![Rectangle 4](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204.png?width=207&height=259&name=Rectangle%204.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 6](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%206.png?width=207&height=244&name=Rectangle%206.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 4 (1)](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204%20(1).png?width=207&height=260&name=Rectangle%204%20(1).png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ## **VARIANT: BASIC-LEFT** --- This is a basic layout for content tabs, in which the category tittle is aligned to the left. Each tab corresponds to a different section of content and image in each separate in a modal window. Tab title Tab title Tab title ![Rectangle 4](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204.png?width=207&height=259&name=Rectangle%204.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 4 (1)](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204%20(1).png?width=207&height=260&name=Rectangle%204%20(1).png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 6](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%206.png?width=207&height=244&name=Rectangle%206.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ## **VARIANT: LINE** --- This is a basic layout for content tabs, each tab corresponds to a different category or section which only includes written content in each separate in a modal window. Example One Example Two Example Three ![Rectangle 4](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204.png?width=300&height=376&name=Rectangle%204.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 4](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204.png?width=300&height=376&name=Rectangle%204.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 4](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204.png?width=300&height=376&name=Rectangle%204.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ## **VARIANT: TABS-LEFT** --- In this layout the tittle is aligned to the left. Each tab corresponds to a different section which only includes written content in each separate in a modal window. Tab title Tab title Tab title ![Rectangle 4](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204.png?width=207&height=259&name=Rectangle%204.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 4 (1)](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%204%20(1).png?width=207&height=260&name=Rectangle%204%20(1).png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  ![Rectangle 6](https://horizonthemedev.com/hs-fs/hubfs/Rectangle%206.png?width=207&height=244&name=Rectangle%206.png) #### Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu integer id id nam sed pharetra. Velit cursus commodo, velit sagittis etiam feugiat. Sem aenean auctor vel massa aliquam. In enim hac fermentum ac convallis semper scelerisque. Netus tincidunt lacus, ullamcorper placerat sit.  [![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.