BeforeAfter
All the components you need
We analyzed dozens of successful content sites, and took note of what made them stand out. From both a design standpoint, and a performance standpoint.
Layout
The layout component provides different options of displaying content in different alignment methods.
Hero
The hero section leads into your content and includes your title, cover image, author info, and date.
Content / Body
The main entree: this is the body of content that includes many different elements like lists, headers, paragraphs, code blocks, quotes, embeds and more that are all styled for you.
Breadcrumbs
A type of navigation element that allows users to see their current location within a website's hierarchy and easily access higher levels, improving user experience and SEO.
Table of Contents
List of the main topics and subtopics contained on a single page, which helps users to quickly find and navigate to content users are looking for.
Author Bio
Short section that provides information about the person who wrote the content which helps to establish the author's credibility and authority on a given topic.
Image
The image component sits within the body of the content and includes a caption as well as ability to click and expand the image into a modal.
Socials
List of links to the brand's social media profiles, and can be useful for promoting the content and engaging with readers.
Call-outs
Highlighted area that draws the reader's attention to a specific piece of information, such as a summary, key point, or action item.
Video Embeds
The video component allows you to easily display Youtube, Vimeo, MP4 and other types of videos in a responsive and performant manner.
SEO
List of SEO component resources for different frameworks and libraries.
More coming soon...
We're launching new components soon. Stay tuned to learn more.
Building the front-end for a headless CMS is time-consuming, boring, and painstaking.
And there's so much more to a well-built blog than just how it looks. We also need to consider...
- Is it performant?
- Is it built with accessibility in mind?
- Is it built with search engines in mind? (technical SEO)
- Does it look good or is it just a wall of text?
- Does it work well on mobile?
Go download any generic pre-made template or theme on the web and you'll notice they all have one thing in common: The blog is an afterthought. They don't account for the dozens of different elements that make up a blog post: images that open into modals, videos that retain a proper aspect ratio on mobile, code blocks, quote blocks, the list goes on.
Each time you set out to build the front-end to connect with a headless CMS it is a major time suck. We wanted to give developers the ability to go from 0 to 1 in an hour or less.
How does it work? Just send your vendor's Rich Text or Markdown into their renderer, and then pass that to our components and you're all set.
Compatible with your favorite headless CMS
In the end, all vendors typically all use the same two formats: Rich Text and Markdown. As long as your headless CMS renders one of these two, it will work with our headless templates.
Pick your package
No recurring subscriptions here! Pay a one-time access fee and get updates for life!
Solo / Duo
For teams of 1 or 2. Use our component library on as many sites as you like.
$Free
- Access to all components
- Commercial license
- As many sites as you like
- Email support
Team access
Teams of 3 or more. Use on as many sites as you like.
$Free
- All components
- Commercial license
- Use on as many sites as you like
- Email support (<24 hours)
Frequently asked questions
If you have any further questions, feel free to reach out at team@headlesstemplates.com