Components

Components are reusable and versatile elements. They are used to create different sections of a web page, such as menus, headers, or buttons. By using components, you can easily apply the same design and functionality repeatedly. This saves time and effort in web design and helps create a consistent look.

For example, after designing a header section, you can right-click on it and select the ‘make component‘ option to convert the item into a component.

You can also create components directly from the explorer panel on the left bar.

For example, in the explorer panel screenshot below, you can see that there are “menu”, “dropdown”, “tabs”, “header” and “footer” components.

After creating a component, you can add it to the page by dragging and dropping it from the explorer panel, or by right-clicking and selecting the ‘add to page‘ option.

Understanding and correctly using components greatly simplifies your workflow. Our rule should be to use components for repeating sections wherever possible.

a simple card component:

Note: By default, Kraft does not provide components like headers or footers; you need to create these basic elements yourself from the explorer panel.

Note: Nested components are supported.