The element hierarchy

This section covers the logic of the hierarchy that is structured on your page as you add elements to it.

Components

A Bubble page consists of three types of components:

The page

The page is the top-level component of a webpage and is responsible for organizing the groups and elements on the page.

The page is the top container for all elements

Containers/Groups:

Groups are used to group elements together and control their layout. They can be thought of as "boxes" that hold other elements. They can be styled or they can be invisible to the user and can contain Elements and even other Groups to create a hierarchy. Groups are a major part of your page's design as they determine how your other elements behave.

Groups are containers for elements and for sub-groups

Elements

Elements are the actual content that your users see and interact with to work with your app, such as buttons, links, images, icons and input fields.

Elements are the things that users interact with on the page

The hierarchy

The way in which these components are organized and styled determines the overall layout and design. From a technical viewpoint they make up the page's hierarchy structure.

It helps to see it in a schematic form:

In a way, the hierarchy above is how your browser "sees" the page before rendering the results on the screen.