Components
Posts
Display posts in a grid, list, masonry, slider or hero.
Live demo
See it in action
A quick tour of the framework, the page builder and your first page.
Battle-tested section layouts you can rebuild with sections and columns.
Sections, columns and elements — how the drag-and-drop canvas fits together.
Use the Pricing Table and Comparison Table elements to convert visitors.
No wrapper bloat means faster pages and happier developers.
The Accordion element with FAQ schema for rich results in search.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12 d-flex flex-column align-items-center">
<div data-mobile-layout="inherit" data-density="regular" data-pagination="none" data-ppp="6" class="posts ps-c002d4e1 posts--style-standard posts--mode-grid posts--cols-d-3 posts--cols-t-2 posts--cols-m-1 posts--ratio-ratio-16-9 posts--align-left posts--meta-pos-above-title" style="--posts-cols-d:3;--posts-cols-t:2;--posts-cols-m:1;">
<div class="posts__layout-wrap posts__layout-wrap--above-grid">
<div class="posts__main">
<div class="posts__grid">
<article class="posts__card posts__card--standard">
<a class="posts__image posts__image--ratio-16-9" href="https://demos.unysonplus.com/upw-sample-1/" tabindex="-1" aria-label="Getting started with UnysonPlus"><img width="768" height="478" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/sample-dabda8d5a8.jpg" class="posts__img fw-img-responsive wp-post-image" alt="Getting started with UnysonPlus" loading="lazy" decoding="async" /></a>
<div class="posts__body entry-content">
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__cats posts__cats--above-title">
<a class="posts__cat-chip" href="https://demos.unysonplus.com/category/tutorials/">Tutorials</a>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<h3 class="posts__title entry-title"><a href="https://demos.unysonplus.com/upw-sample-1/">Getting started with UnysonPlus</a></h3>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__meta posts__meta--inline-dot entry-meta">
<span class="posts__meta-item posts__meta-item--date">June 17, 2026</span>
<span class="posts__meta-sep" aria-hidden="true">·</span>
<span class="posts__meta-item posts__meta-item--author">up_admin</span>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<div class="posts__excerpt entry-summary">
<p>A quick tour of the framework, the page builder and your first page.</p>
</div>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<a class="posts__readmore posts__readmore--text-link" href="https://demos.unysonplus.com/upw-sample-1/">Read more<span class="posts__readmore-sr"> about Getting started with UnysonPlus</span></a>
</div>
</div>
</article>
<article class="posts__card posts__card--standard">
<a class="posts__image posts__image--ratio-16-9" href="https://demos.unysonplus.com/upw-sample-2/" tabindex="-1" aria-label="Five layout patterns that always work"><img width="768" height="478" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/sample-2564d91844.jpg" class="posts__img fw-img-responsive wp-post-image" alt="Five layout patterns that always work" loading="lazy" decoding="async" /></a>
<div class="posts__body entry-content">
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__cats posts__cats--above-title">
<a class="posts__cat-chip" href="https://demos.unysonplus.com/category/design/">Design</a>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<h3 class="posts__title entry-title"><a href="https://demos.unysonplus.com/upw-sample-2/">Five layout patterns that always work</a></h3>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__meta posts__meta--inline-dot entry-meta">
<span class="posts__meta-item posts__meta-item--date">June 14, 2026</span>
<span class="posts__meta-sep" aria-hidden="true">·</span>
<span class="posts__meta-item posts__meta-item--author">up_admin</span>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<div class="posts__excerpt entry-summary">
<p>Battle-tested section layouts you can rebuild with sections and columns.</p>
</div>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<a class="posts__readmore posts__readmore--text-link" href="https://demos.unysonplus.com/upw-sample-2/">Read more<span class="posts__readmore-sr"> about Five layout patterns that always work</span></a>
</div>
</div>
</article>
<article class="posts__card posts__card--standard">
<a class="posts__image posts__image--ratio-16-9" href="https://demos.unysonplus.com/upw-sample-3/" tabindex="-1" aria-label="The page builder, explained"><img width="768" height="478" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/sample-3a37693bdf.jpg" class="posts__img fw-img-responsive wp-post-image" alt="The page builder, explained" loading="lazy" decoding="async" /></a>
<div class="posts__body entry-content">
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__cats posts__cats--above-title">
<a class="posts__cat-chip" href="https://demos.unysonplus.com/category/tutorials/">Tutorials</a>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<h3 class="posts__title entry-title"><a href="https://demos.unysonplus.com/upw-sample-3/">The page builder, explained</a></h3>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__meta posts__meta--inline-dot entry-meta">
<span class="posts__meta-item posts__meta-item--date">June 11, 2026</span>
<span class="posts__meta-sep" aria-hidden="true">·</span>
<span class="posts__meta-item posts__meta-item--author">up_admin</span>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<div class="posts__excerpt entry-summary">
<p>Sections, columns and elements — how the drag-and-drop canvas fits together.</p>
</div>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<a class="posts__readmore posts__readmore--text-link" href="https://demos.unysonplus.com/upw-sample-3/">Read more<span class="posts__readmore-sr"> about The page builder, explained</span></a>
</div>
</div>
</article>
<article class="posts__card posts__card--standard">
<a class="posts__image posts__image--ratio-16-9" href="https://demos.unysonplus.com/upw-sample-4/" tabindex="-1" aria-label="Designing a clean pricing page"><img width="768" height="478" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/sample-4363a7fade.jpg" class="posts__img fw-img-responsive wp-post-image" alt="Designing a clean pricing page" loading="lazy" decoding="async" /></a>
<div class="posts__body entry-content">
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__cats posts__cats--above-title">
<a class="posts__cat-chip" href="https://demos.unysonplus.com/category/design/">Design</a>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<h3 class="posts__title entry-title"><a href="https://demos.unysonplus.com/upw-sample-4/">Designing a clean pricing page</a></h3>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__meta posts__meta--inline-dot entry-meta">
<span class="posts__meta-item posts__meta-item--date">June 8, 2026</span>
<span class="posts__meta-sep" aria-hidden="true">·</span>
<span class="posts__meta-item posts__meta-item--author">up_admin</span>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<div class="posts__excerpt entry-summary">
<p>Use the Pricing Table and Comparison Table elements to convert visitors.</p>
</div>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<a class="posts__readmore posts__readmore--text-link" href="https://demos.unysonplus.com/upw-sample-4/">Read more<span class="posts__readmore-sr"> about Designing a clean pricing page</span></a>
</div>
</div>
</article>
<article class="posts__card posts__card--standard">
<a class="posts__image posts__image--ratio-16-9" href="https://demos.unysonplus.com/upw-sample-5/" tabindex="-1" aria-label="Why clean markup matters"><img width="768" height="478" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/sample-d7806df855.jpg" class="posts__img fw-img-responsive wp-post-image" alt="Why clean markup matters" loading="lazy" decoding="async" /></a>
<div class="posts__body entry-content">
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__cats posts__cats--above-title">
<a class="posts__cat-chip" href="https://demos.unysonplus.com/category/news/">News</a>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<h3 class="posts__title entry-title"><a href="https://demos.unysonplus.com/upw-sample-5/">Why clean markup matters</a></h3>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__meta posts__meta--inline-dot entry-meta">
<span class="posts__meta-item posts__meta-item--date">June 5, 2026</span>
<span class="posts__meta-sep" aria-hidden="true">·</span>
<span class="posts__meta-item posts__meta-item--author">up_admin</span>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<div class="posts__excerpt entry-summary">
<p>No wrapper bloat means faster pages and happier developers.</p>
</div>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<a class="posts__readmore posts__readmore--text-link" href="https://demos.unysonplus.com/upw-sample-5/">Read more<span class="posts__readmore-sr"> about Why clean markup matters</span></a>
</div>
</div>
</article>
<article class="posts__card posts__card--standard">
<a class="posts__image posts__image--ratio-16-9" href="https://demos.unysonplus.com/upw-sample-6/" tabindex="-1" aria-label="Building an FAQ that ranks"><img width="768" height="478" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/sample-820e62eea4.jpg" class="posts__img fw-img-responsive wp-post-image" alt="Building an FAQ that ranks" loading="lazy" decoding="async" /></a>
<div class="posts__body entry-content">
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__cats posts__cats--above-title">
<a class="posts__cat-chip" href="https://demos.unysonplus.com/category/tutorials/">Tutorials</a>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<h3 class="posts__title entry-title"><a href="https://demos.unysonplus.com/upw-sample-6/">Building an FAQ that ranks</a></h3>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<div class="posts__meta posts__meta--inline-dot entry-meta">
<span class="posts__meta-item posts__meta-item--date">June 2, 2026</span>
<span class="posts__meta-sep" aria-hidden="true">·</span>
<span class="posts__meta-item posts__meta-item--author">up_admin</span>
</div>
</div>
<div class="posts__row posts-row--stack posts-j-start posts-a-start">
<div class="posts__excerpt entry-summary">
<p>The Accordion element with FAQ schema for rich results in search.</p>
</div>
</div>
<div class="posts__row posts-row--inline posts-j-start posts-a-center">
<a class="posts__readmore posts__readmore--text-link" href="https://demos.unysonplus.com/upw-sample-6/">Read more<span class="posts__readmore-sr"> about Building an FAQ that ranks</span></a>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Posts shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.