Components

Posts

Display posts in a grid, list, masonry, slider or hero.

Live demo

See it in action

Layout mode

Grid

Cards on a responsive CSS grid — the default arrangement.

Layout mode

List

Full-width rows, image beside the content.

Layout mode

Masonry

A staggered, Pinterest-style column layout.

Layout mode

Slider

A swipeable slider of post cards — arrows and dots.

Card style

Standard — image top

Card style

Overlay — content over image

Card style

Minimal — text only

Card style

Gradient magazine

Card style

Editorial big-title

Card style

Polaroid

Card style

Tile — hover reveal

Card style

Circular

Card style

Accent bar

Card style

Magazine cover

Card style

Quote-led

Card style

Postcard

Card style

Bordered badge

Card style

Diagonal split

Card style

Glassmorphism

Card style

Filmstrip — film-frame image

Card style

Hero split — first post 2x

Card style

Side — image beside content

Card style

Side — image right

Card style

Alternating zig-zag

Card style

Numbered listicle

Card style

Compact news list

Card style

Timeline

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 class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div data-mobile-layout="inherit" data-density="regular" data-pagination="none" data-ppp="2" class="posts ps-1d0b1b4e posts--style-standard posts--mode-grid posts--cols-d-3 posts--cols-t-2 posts--cols-m-1 posts--ratio-ratio-16-9 posts--meta-pos-above-title posts--align-left posts--equal-height" style="--posts-cols-d:3;--posts-cols-t:2;--posts-cols-m:1;">
		<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>
						</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>
						</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>
		</div>
	</div>
</section>

To learn more about the Posts shortcode, please check out the online manual here.