webbloqs.io

Privacy Notice

For statistical purposes and to improve our services, the information automatically provided by your device and browser is being collected and processed. This information is being anonymised, preventing any personal identifiability.

Your data is exclusively accessed by us and is not being shared with third parties.

Building blocks for your website

Quickly customize and assemble pre-styled elements to larger components and products, such as accordion, navigation bar or footer.

Learn more

More consistency

webbloqs help to get a consistent user interface and make maintenance easier.

One codebase

webbloqs use one codebase to work on different platforms.

Better teamwork

webbloqs support better teamwork between designers, developers and marketers.

Explore the catalog

Join the Team

Why webbloqs

Websites are built from HTML markup and CSS styles conveniently with a frontend framework like React, Lit or Vue.js. webbloqs provide HTML custom elements glued together with globally themed CSS styling and well-designed API.

Use the frontend framework of your choice to create consistently styled web components, without any need for extra CSS. Reuse your components in different projects and change their styling simply by altering custom properties in the global theme. Use components from different frontend frameworks together and develop larger products more quickly.

What is a webbloq

A webbloq is a visual pattern with modular styling and isolated markup. webbloqs enable developers to focus on implementing business logic without worrying about browser quirks or effects from surrounding styles.

webbloqs are built with web component technology. A compiler translates standard HTML API into higher-level abstractions amendable for native use in frontend frameworks like React, Lit or Vue.js.

A catalog of webbloqs provides visual patterns that can be used to indicate, to illustrate, to structure and to interact with content on the web. Every webbloq is designed for a distinct purpose with three main characteristics in mind:

webbloqs are built with web component technology. A compiler translates standard HTML API into higher-level abstractions amendable for native use in frontend frameworks like React, Lit or Vue.js.

It's parameterizable, through a set of properties that alter its HTML markup or its behavior.

It's styleable, with a set of CSS custom properties that modify visual aspects of its presentation.

It's composable, through standard web component API. Create more complex components by composing webbloqs or any other HTML markup.

It's parameterizable, through a set of properties that alter its HTML markup or its behavior.

It's styleable, with a set of CSS custom properties that modify visual aspects of its presentation.

It's composable, through standard web component API. Create more complex components by composing webbloqs or any other HTML markup.

How to use webbloqs

Use

Select a webbloq shown in your application theme. Customize it before you copy and paste its code into your editor.

Explore

Browse the catalog’s content by purpose and find a webbloq to illustrate, indicate, or structure content. Interact with each webbloq to see it in action.

Customize

Discover a webbloq’s API. Find element and styling properties to customize. See the effects directly in the catalog.

React components

webbloqs can be used natively in frontend frameworks. Use them in your React components with standard JSX, code completion and HMR.

Bring your website development to the next level

Explore the webbloqs catalog or schedule a free demo.

Schedule a demo

Explore the catalog

Software. Quality. Craftsmanship.

webbloqs is developed by Quatico Solutions, a software development company based in Zurich. In numerous projects and for various clients Quatico has been developing high quality components for digital products.

This experience and expertise flows into webbloqs.

Would you like to become part of the team?

Join the Team