<div class="post-content">
	<h1>Post title</h1>
	<!-- {{content}} would be here, example rendered below -->
	<figure class="kg-card kg-image-card kg-card-hascaption">
		<img src="https://images.unsplash.com/photo-1558980663-3685c1d673c4" class="kg-image">
		<figcaption>Photo by <a href="#">Harley-Davidson</a> / <a href="#">Unsplash</a></figcaption>
	</figure>
	<p>Main post content... lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, repellat molestiae iure repudiandae explicabo labore harum eum recusandae a voluptatibus nesciunt qui commodi magnam, quaerat quis fuga veritatis molestias esse.</p>
</div>
/* General presentation stuff */
.post-content {
	max-width: 600px;
	margin: 0 auto;
}

img {
	max-width: 100%;
}

/* Set content grid so it respects order values */
.post-content {
	display: grid;
}

/*
Style image if there is an image right after the heading
Use order to put it above the heading
Relative position for absolute caption
*/
.post-content h1 + .kg-image-card {
	margin: 0 -24px;
	order: -1;
	position: relative;
}

/* Style image's caption if there is an image right after the heading */
.post-content h1 + .kg-image-card figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem 1rem 1.2rem;
	opacity: 0.5;
	background: white;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.