You can use the following menu to navigate through this article
To create your a component, click on the "+" icon. This will show you three options:
- Design Component
- Choose from Library
- Code your own
In this article, we'll focus on Design Component. This will show you a popup to give your component a name.
Once created, the No-code Editor will open, we can now start creating our very own component!
Layers
On the left hand side you will find the Layers panel.
The plus icon next the name of our component (f.e. My First Component), will show all the available building blocks that you can use to create your own component.
You can select the block you want to work on. Click a block here and its settings open in the Properties panel on the right.
The Layers panel is also where you add new blocks, which is covered in the section: Adding Blocks to our component
Properties
On the right hand side you will find the Properties panel. This panel lets you change the design settings of whichever block you have selected.
Layout
In this section you can change how your component positions and aligns the blocks inside it. You can choose between three layout modes:
For these three options, we already some blocks to showcase every options. Adding these blocks will be explained in more detail in a later section of this article
To build our components mobile-first we recommend using the Flexbox principle. They adapt to the width that is available more easily than a fixed grid does.
We recommend checking out the Complete Guide on CSS-Tricks
Grid
Use Grid when you want to place your blocks in a clear structure of rows and columns. You set how many rows and columns you need, and then place each block exactly where you want it.
See the Grid article to learn how to edit the grid properties in more detail.
Horizontal Flex
Horizontal Flex arranges your blocks in a row, next to each other. Use it for content that reads
across the page, such as a row of cards.
You can use this article to learn how to edit the flex properties even further
Vertical Flex
Vertical Flex stacks your blocks on top of each other, from top to bottom. Use it for content that
reads as a column, such as a title with a paragraph and a button underneath it.
You can use this article to learn how to edit the flex properties even further
Custom Styles
Custom Styles lets you apply your own CSS to a component, for anything the other settings do not cover. In the example below we use background-color: #cecece to give the component a custom
background colour.
Breakpoints
When creating a component, you can check what it looks like on each breakpoint: Base, Desktop, Tablet and Mobile.
See the Breakpoints article for what each breakpoint does and how to change its settings.
Adding blocks to our component
To add a new block, click the "+" icon in the Layers panel, or the blue "+" icon underneath Empty Section.
You can also group blocks together to keep your component easier to maintain. Grouping is done with Structures, which you will find at the bottom of that same popup. There are several to choose from, such as Content and Card.
After adding a structure such as Content, click the "+" icon on that structure to add blocks to it.
In this example we add a Default Text and a Default Title to our Content structure.
You can then click the structure in the Layers panel to adjust it further. In the image below we
changed the layout from Horizontal Flex to Vertical Flex, which gives us the final result.
To leave the No-Code Editor, click Save and Exit.