How it works

A suite of components designed to capture every content experience

Pick the pieces you need and compose them into any layout.

• Base Elements

  • Content Text Line
  • Content Button
  • Content Image
  • Content Video

• Content Blocks

  • Content Hero Block
  • Content Split Block
  • Content Text Block
  • Content Tout Block

• Content Components

  • Content Accordion
  • Content Carousel
  • Content Tabs
  • Content Overlay

• Content Formatters

  • Content Block
  • Content Grid
  • Content Spacing Wrapper

Why Content Blocks

Built for performance, accessibility and flexibility

• Made for ecommerce

  Content Blocks are opinionated web components for building ecommerce websites.

• Fast and flexible

  Fast, accessible, light, flexible.

• Enterprise ready

  Created to meet performance, localization, and accessibility legal needs of Fortune 250 companies.

• Flexible by design

  Built with flexibility and slots using StencilJS.

• Framework friendly

  Works with Vanilla javascript or frontend frameworks like React.

Responsive values

Pipes

<content-grid-formatter class="grid--cast" columns="1|2|4" type="grid">

<content-spacing-wrapper max-width="100|50" left-offset="2" top-offset="2">

<content-spacing-wrapper max-width="100|100|1200px" horizontal-alignment="center">

<content-spacing-wrapper text-align="center|left">

<content-text-block slot="content" style-class="color--black|color--white" vertical-alignment="center">

<content-spacing-wrapper left-offset="4" right-offset="0" top-offset="4" bottom-offset="4" max-width="100|55|55|45" horizontal-alignment="left|right" text-align="left|center">

Composition

Slots

Slots allow us to insert our own content into predefined positions. We are not limited to a number of lines or elements in a certain order. This is slot technology powering StencilJS: Content Block components offer named slots, which makes integrating with your designs extremely easy.

<content-line style-class="text-style--copy-small">no code required.</content-line>

<content-hero-block>
  <content-image slot="media" width="1600" height="900" src="https://picsum.photos/seed/100/1600/900"></content-image>
  <content-spacing-wrapper slot="content" full-height="true" left-offset="4|5|10" right-offset="4" top-offset="4" bottom-offset="4" max-width="100|55" horizontal-alignment="right">
    <content-overlay id="heroVideoOverlay" target="#" full-screen="false" style-class="aveda-overlay">
      <script slot="content" type="text/template">
        <content-video fit-container="true" src="https://www.youtube.com/embed/aOq49euWnIo" autoplay="true"></content-video>
      </script>
    </content-overlay>
    <content-text-block style-class="color--pink" vertical-alignment="center">
      <content-line style-class="text-style--hero-header">Melt in moisture.</content-line>
      <content-line style-class="text-style--hero-header">Try now free.<sup>*</sup></content-line>
      <content-line style-class="text-style--hero-subline">NEW  revolution<span class="trade">™</span> daily moisturizing treatment</content-line>
      <content-line style-class="text-style--copy" max-width="100|60|75">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</content-line>
      <content-spacing-wrapper top-offset="3">
        <content-group horizontal-alignment="left">
          <content-button style-class="button button--pink" href="#heroVideoFullscreen">Full Screen</content-button>
        </content-group>
      </content-spacing-wrapper>
      <content-text-block slot="footer">
        <content-line style-class="text-style--disclosure">Tristique Consectetur Mollis Aenean</content-line>
      </content-text-block>
    </content-text-block>
  </content-spacing-wrapper>
</content-hero-block>

Components

Everything you need to build a page

• Text Line

  Max width, style class, HTML tag, text alignment.

• Button

  Make an entire block of content clickable, or supply href="#element" to trigger another element.

• Image

  An image or MP4 that is always lazy loaded. MP4s are looped and treated as silent GIFs. Defaults to certain width and height values for cumulative layout shift, and supports pipe separated values.

• Video

  Play YouTube or locally hosted videos with VideoJS. Fully accessible and supports subtitles.

• Hero

  Large media content (image or video) with text on top. Text can be positioned freely and will not overflow its container. Supports a footer area.

• Split Block

  Two columns of content, sometimes reversed on smaller screens.

• Text Block

  A text wrapper supporting background and vertical alignment. One of the most commonly used blocks passed to slots.

• Tout Block

  Two content pieces stacked, usually an image above a text block. Supports hover content disabled on mobile.

• Accordion

  Fully accessible content show and hide. Used for things like FAQs.

• Carousel

  Fully accessible SwiperJS with the ability to hook in and provide options.

• Tabs

  Clickable tabs that are fully accessible and use arrow keys to switch through.

• Content Overlay

  A modal that can take over an element or the whole screen. Supports vertical and horizontal positioning.

• Content Block

  A standard layout of a title or header area above a section of content.

• Grid

  CSS grid (fixed columns) and flex grid (flexible columns) using pipe values.

• Spacing Wrapper

  Apply spacing offsets to left, top, right, and bottom. Supports pipe separated values.

Performance

Light by default

• Lazy loaded automatically

• Dependency free

• Dependency injection self contained

• Async rendering pipeline

• Built via StencilJS, with optimizations built in via compile time analysis

Getting started

Insert a script tag

<script type="module" src="https://cdn.jsdelivr.net/npm/@content-blocks/js@latest/dist/content-blocks/content-blocks.esm.min.js"></script>

Demo

See it in action