--- title: Horizon Theme - Flip Cards --- [![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?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) - 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 # FLIP CARDS --- 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/flip-cards#section-2) ![Horizon BG](https://horizonthemedev.com/hubfs/horizon-bg.png "Horizon BG") ## FLIP TOP STYLE OF FLIP BOX ---  Choose ‘Flip Top’ as your ‘Flipbox Type’, add images, content in front & back side, insert link & style in advance ## LOREM IPSUM DOLOR SIT ### LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. Nunc nam pulvinar pellentesque rutrum maecenas. Est nisl amet fames erat fermentum. Id integer velit vitae enim tincidunt.  ## LOREM IPSUM DOLOR SIT ### LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. Nunc nam pulvinar pellentesque rutrum maecenas. Est nisl amet fames erat fermentum. Id integer velit vitae enim tincidunt.  ## FLIP LEFT BOX --- Make a standout Flip Box using Flip Left animation, and style accordingly **1** ### LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. **2** ### LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. **3** ### LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. ## FLIP ZOOM BOX --- Use ‘Zoom In’, ‘Zoom Out’ Flipbox Type and represent your content beautifully ### **Lorem ipsum dolor sit amet aconsecteur.** Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. ### **Lorem ipsum dolor sit amet aconsecteur.** Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. ### **Lorem ipsum dolor sit amet aconsecteur.** Lorem ipsum dolor sit amet consectetur. Non pharetra felis urna iaculis molestie aliquam sit risus. Eget imperdiet ullamcorper sit nibh sed adipiscing quam. Nibh metus pellentesque dui amet. ## FLIP BULLETS BOX --- Use different types of ‘Flipbox Type’ like flip left, right, top, bottom, zoom in, & zoom out to make your content interactive ![Rocket](https://horizonthemedev.com/hs-fs/hubfs/Rocket.png?width=66&height=66&name=Rocket.png) ### Lorem ipsum dolor - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. ### Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua [Lorem Ipsum](https://google.com) ![Rocket](https://horizonthemedev.com/hs-fs/hubfs/Rocket.png?width=66&height=66&name=Rocket.png) ### Lorem ipsum dolor - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. ### Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua [Lorem Ipsum](https://google.com) ![Rocket](https://horizonthemedev.com/hs-fs/hubfs/Rocket.png?width=66&height=66&name=Rocket.png) ### Lorem ipsum dolor - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. - Lorem ipsum dolor sit amet. ### Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua [Lorem Ipsum](https://google.com) ## FLIP BOX --- This design is surrounded by elements that make it fun to design.  ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Scelerisque aliquet neque imperdiet porta at amet sit lorem gravida. [Lorem Ipsum](https://google.com) ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Scelerisque aliquet neque imperdiet porta at amet sit lorem gravida. [Lorem Ipsum](https://google.com) ### Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur. Scelerisque aliquet neque imperdiet porta at amet sit lorem gravida. [Lorem Ipsum](https://google.com) [![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.