Skip to main content
Web Components for Simplifying Web Development

Content Blocks JS are web components designed to simplify building rich interactive media websites.

It's so easy you can build full websites without any bundler or build tool.

Docs Storybook
<content-line>

A content-line is the most basic component. It supports responsive properties that are useful for styling a special line of text, such as marketing copy or a section header.

<content-image>

A content-image is a component that supports an image or a silent looping mp4 instead of a GIF. This is a convenient option for consuming a CMS API.

With responsive width and height attributes, we can specify different widths and heights for different viewports to reduce Cumulative Layout Shift.

<content-hero-block>

The hero block is a layout where the image is a background or on smaller screens is usually above the text. We can use content-image and content-line within our content hero block by wrapping them with the slot attribute.

Simple UI Web Components Build Rich Content Themes and Websites Built for Performance, Accessibility, and Customization

Native HTML elements with slots and Javascript APIs allow you to integrate Content Blocks into your existing project, or build a new website from scratch!

<content-grid-formatter>

Grids, simplified. Switch between flex and fixed width grids with ease. Responsive properties allow you to specify different columns per breakpoint.

Watch Video
<content-tout-block> Touts work great as grid cards, but any element can be used. Hover content is also available.
More Info
<content-tout-block> Touts work great as grid cards, but any element can be used. Hover content is also available.
<content-tout-block> Touts work great as grid cards, but any element can be used. Hover content is also available.
Native HTML Element Composition

Content Blocks are designed to be composed and used together like building blocks. Basic components such as content-line or content-image isolate and solve concerns with accessibility, responsiveness, and future-proofing. Higher level components like content-hero-block and content-grid-formatter provide structures for typical design layouts. Utility components such as content-grid-formatter and content-spacer provide helper utilities that can be used anywhere to adjust spacing and alignment.

This is the design philosophy behind Content Blocks.

When Content Blocks are used together, such as a content-hero-block with a content-image and content-line, they work seamlessly while still maintaining independent functionality. Furthermore, you are not obligated to use these components, so you are still able to build fully custom layouts.

Native CSS Styling

You can use regular CSS to style components easily. Content Blocks come with minimal styling and properties like fonts, colors, and spacing are often left to the developer. You can also use libraries like Bootstrap and TailwindCSS for utility classes.

Native JS Interactions

Just like the HTML5 video element exposes an API (video.play(), video.stop(), etc.), some components such as content-overlay also expose a Javascript API. In certain cases you may want to trigger an event on an element. In either case all you need to do is reference the element with a selector such as an ID or class and you can trigger a native method or event.

In simple words, what is Content Blocks JS?

You can import new HTML elements with a script tag. If you use these elements, you won't have to write a lot of Javascript related to accessibility and performance. For example, to show a video in an overlay you can just use HTML.

What are some use-cases for Content Blocks?

You can use Content Blocks anywhere from the most basic landing pages to an existing enterprise monolith undergoing a rewrite. You can also Content Blocks for building Wordpress and Shopify themes, as well as consuming an API to render content. For example, if you have a CMS backend that allows file uploads, content-image will automatically display an image or looping mp4 based on the file extension.

Since Content Blocks are native and designed to be themed, they work really well for multi-tenant / multi-site environments.

Who built Content Blocks and why?

The Content Blocks JS library is written by a developer with over 12 years experience in e-commerce building designs and layouts for some of the largest brands in the world. Seeing a pattern to these layouts, they also discovered that the vast majority of e-commerce sites used similar layouts but were often prone to bugs, visual misalignments, and every brand took a slightly different approach with trade-offs and limitations to flexibility.

As designs and interactions grow more complex, so do the challenges of accessibility, performance, and technical debt. For example, a hero with a button that launches a video can be difficult to scale when working in an enterprise environment. There are considerations about the existing platform, technical debt, and how to best build features in a scalable way.

We can implement these features in a scalable way by using web components that respond to the markup instead. We can also do things like use IntersectionObserver to add lazy loading to a looping mp4, which is included with content-image. By building these optimizations in the native HTML element layer, we can build larger, more robust, accessible, and scalable designs with less work.

Is Content Blocks stable for production?

We have a working Storybook with interactive examples. Content Blocks has been used and iterated on over a dozen different prototypes and public facing sites. The vast majority of the components are battle-tested and much of the decisions are based on learnings from building international e-commerce sites serving millions of customers a day.

That said, there are a few things left to do before we get to a 1.0 release. content-navigation-block, content-tabs, and content-video need a few accessibility, composition, and performance enhancements.

Expected release of 1.0 is by end of March 2024.