Browse 12 ready-made content components from the Pstls UI library. Every variant is fully responsive – copy the code or customize it in the visual editor and export clean code.
<section class="section py-20 has-background-white">
<div class="container">
<div class="has-mw-4xl mb-12">
<span class="has-text-primary">Published 02 September 2022</span>
<h2 class="title mt-2 is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="subtitle">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
</div>
<img class="mb-12 is-fullwidth image" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="">
<div class="content has-mw-xl mx-auto">
<p class="subtitle mb-8 pb-8" style="border-bottom: 1px solid #DFDFDF;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<h2 class="title is-size-3 is-spaced">Lorem ipsum</h2>
<p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<img class="mb-4 image" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="">
<p class="is-size-6 mb-8">
<span>Brown wooden dock by Mark Harpur via</span>
<a class="is-primary" href="#">Unsplash</a>
</p>
<p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
<ol class="mb-12">
<li class="subtitle">Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
<li class="subtitle">Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
<li class="subtitle">Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
</ol>
<div class="mb-6 is-flex is-relative">
Get the code for 13,400+ components
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
<section class="py-24">
<div class="container px-4 mx-auto">
<div class="max-w-4xl mb-12"><span class="text-indigo-300" >Published 02 September 2022</span>
<h2 class="text-4xl md:text-5xl font-heading mt-4 mb-6" >Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="leading-8" >These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
</div><img class="block w-full mb-12" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="" >
<div class="max-w-xl mx-auto">
<p class="leading-8 mb-8 pb-8 border-b" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<h2 class="text-4xl font-heading mb-6" >Lorem ipsum</h2>
<p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="block w-full mb-4" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="" >
<p class="text-sm mb-6"><span >Brown wooden dock by Mark Harpur via</span> <a class="text-indigo-500 hover:text-indigo-600 underline hover:no-underline" href="#" >Unsplash</a></p>
<p class="leading-8 mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
<ul class="mb-6 list-decimal list-inside">
<li class="leading-8 mb-2" >Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
<li class="leading-8 mb-2" >Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
<li class="leading-8" >Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
</ul>
<div class="flex mb-6 bg-indigo-100 relative">
<div class="absolute top-0 left-0 px-1 h-full bg-indigo-200"></div>
<div class="pl-14 py-10 pr-10">
<h2 class="text-4xl font-heading" >“On the other hand, perfection can also haunt some of us to the point of inaction.”</h2>
</div>
Get the code for 13,400+ components
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Blog article layout with hero image, serif headings, pull quote, and body text
A long-form blog article page showing a published date, large serif headline, intro paragraph, full-width hero photo, and body sections with an inline image, numbered list, and styled pull quote. The content is centered in a narrow reading column with generous whitespace and a light background.
Long-form Blog Article with Hero Image and Pull Quote
A single-column editorial blog post layout featuring a full-width hero photo, a centered publication date, serif headings, body text with an embedded image and caption, a numbered list, and a lavender-accented pull quote with attribution. The layout is minimal and spacious, focused on readable article content.
<section class="py-20 bg-white">
<div class="container">
<div class="mw-4xl mb-12"><span class="text-primary-dark" >Published 02 September 2021</span>
<h2 class="mt-2 mb-6 lh-sm display-5 font-heading" >Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="mb-0 lh-lg" >These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
</div><img class="img-fluid w-100 mb-12" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="" />
<div class="mw-xl mx-auto">
<p class="lh-lg mb-8 pb-8 border-bottom" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
<h2 class="mb-6 font-heading" >Lorem ipsum</h2>
<p class="lh-lg mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="img-fluid mb-4" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="" />
<p class="mb-8 small"><span >Brown wooden dock by Mark Harpur via</span> <a href="#" >Unsplash</a></p>
<p class="lh-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
<ol class="mb-12">
<li class="lh-lg" >Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
<li class="lh-lg" >Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
<li class="lh-lg" >Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
</ol>
<div class="d-flex mb-6 bg-primary-light">
<div class="px-1 bg-primary-dark"></div>
<div class="p-10">
<h2 class="lh-sm" >“On the other hand, perfection can also haunt some of us to the point of inaction.”</h2>
</div>
Get the code for 13,400+ components
Create a free account to copy production-ready code from every component in the library.
Free account · No credit card · No password needed
Choose from 12 variations of Content UI components. Presented here are variants available in Pstls library.
You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Content UI components, code and our visual editor. Try the demo for free!
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
The AI Agent just got a lot more powerful
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Multi-AI Designer can now regenerate designs
Not quite there yet? Ask for tweaks like missing assets, your logo or other details, and regenerate the design without starting from scratch.