--- title: Horizon Theme - Blog Post 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) - [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 # BLOG POST 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/blog-post-cards#section-2) ![Horizon BG](https://horizonthemedev.com/hubfs/horizon-bg.png "Horizon BG") ## **VARIANT: FULL** --- In this module the blog cards include a featured image or thumbnail related to the blog post topic, content topic, read time, post title, author name, a brief summary or excerpt of the content and a CTA button that directs the user to the full blog post. [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder.jpg?width=300&name=img-placeholder.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-1.jpg?width=300&name=img-placeholder-1.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-3.jpg?width=300&name=img-placeholder-3.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) ## **VARIANT: OVERLAY** --- In this module the blog cards the post title and author name are located over the featured image or thumbnail related to the blog post topic, under it there’s the content topic, read time, a brief summary or excerpt of the content and a CTA button that directs the user to the full blog post. [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder.jpg?width=300&name=img-placeholder.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-1.jpg?width=300&name=img-placeholder-1.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-3.jpg?width=300&name=img-placeholder-3.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) ## **VARIANT: CLEAN** --- In this module the blog cards include the post title, author name, content topic, read time, a brief summary or excerpt of the content and a CTA button that directs the user to the full blog post. [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder.jpg?width=300&name=img-placeholder.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-1.jpg?width=300&name=img-placeholder-1.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-3.jpg?width=300&name=img-placeholder-3.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) ## **VARIANT: SIDEBAR** --- This module presents a 3 item row basic forms of the blog cards which include post title, content topic, read time, and a CTA button that directs the user to the full blog post. A featured image or thumbnail related to the blog post topic is included in the “Full” version but not on the Compact one.  ## **VARIANT: Full** ---  Different types of accordions to display the information u want to show. [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder.jpg?width=300&name=img-placeholder.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-1.jpg?width=300&name=img-placeholder-1.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-3.jpg?width=300&name=img-placeholder-3.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) ## **VARIANT: Compact** ---  Different types of accordions to display the information u want to show. [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder.jpg?width=300&name=img-placeholder.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-3?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-1.jpg?width=300&name=img-placeholder-1.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-8?hsLang=en) [![](https://horizonthemedev.com/hs-fs/hubfs/img-placeholder-3.jpg?width=300&name=img-placeholder-3.jpg)](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) [Topic 1](https://horizonthemedev.com/testing/tag/topic-1?hsLang=en) | 1 min read ##### Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Admin](https://horizonthemedev.com/testing/author/admin?hsLang=en) Lorem ipsum dolor sit amet consectetur. Arcu rhoncus arcu amet ut cursus molestie. Lacus massa vulputate eget posuere ac aliquam risus ullamcorper. Diam feugiat neque mauris dui et porttitor commodo amet libero. Feugiat vitae sed lorem sagi... [Read More](https://horizonthemedev.com/blog/blog-listing-template/lorem-ipsum-dolor-sit-amet-consectetur-10?hsLang=en) [![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.