(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Header Design

First, we start with the header section to be used in screen designs.

Create a web application called TodoApp. Open the application and change the default Screen1 screen name to TodoList. The header is the part on the top of the screen where components such as menu, screen name, notification, and profile are located and fixed to the top of the screen. In addition to this section, additional options such as search, settings, or New content buttons can be added.

For the TodoList screen, we will add the Screen name and New Todo button components in the header.

We will add a white background to the back of the list. First, let's change the background color of the screen. Select the screen and enter the F4F4F4 hex code for the background color from the Fill section of the Styling panel. Drag and drop the Header element from the Elements list to the screen. Give the Header the white color with the ffffff value from the Styling > Fill section. Thus, the header will be visually separated from the background. Now drag a Row element into it and convert it to 2 columns. Drag a label element to the left column. Add the Todo List text to the Label value section. Then select the Header style from Styling > Typography so that it appears as the screen title. On the right column, drag and drop the Icon element from the Elements panel. Open the styling panel. The Typography panel is used for icon color and size changes. You can use the Layout for resizing, Fill for Color, Border for Outline and corner bevels regarding the frame containing the Icon element. Typography also comes with Icon style. For the frame, let's give the edges padding of 6px in four directions. For the frame color, let's give the color with a transparent value of 7% of the icon color from the fill section. With Border > Radius, let's give the corner slopes the value of 24px in four directions and provide a circular view. We will add new content with this Icon button.

If you need additional peripheral spaces specific to the Header, you can add padding to one of the Header or row elements.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try