Mantle Content Blocks are a collection of web components designed to build accessible and performant content experiences.

Building experiences that are responsive, accessible, and also reusable every time is a challenge. Mantle Content Blocks is a collection of web components that can be mixed and used to build a variety of layouts.

Accessibility

By borrowing from the examples provided by the W3, we ensure accessibility is not an afterthought but our primary focus. Features such as dialog stack order, keyboard navigation, and ARIA attributes are built into each component.

Performance

Module Lazy Loading

All Mantle Content Blocks modules are lazy loaded by default. This ensures a fast Time to Interactive. This means only the web components needed are loaded on the page with no configuration needed.

Lazy Loading Assets by Default

Content such as images and videos are also lazy loaded. This reduces the initial page load time as well as the weight of the page, and assets will only be downloaded when needed by the browser.

Cumulative Layout Shift

Images and Videos also have default width/height attributes, which are encouraged to be specified per asset. However by default assets assume a default width and height, such as width=“16” and height=“9”. The web browser uses these numbers to calculate an aspect ratio, and then applies a calculation based on the rendered width of the element to paint the content. This reduces the amount of cumulative layout shift on a page substantially.