Browser
How to add and style browser mockups.
Last updated
Was this helpful?
How to add and style browser mockups.
Last updated
Was this helpful?
A Browser part shows a box that looks like a browser window.
The Browser (parent) part contains two child parts. The top part is the browser toolbar, and the bottom part is a container that will house the content you want to show in the browser window.
Location in the Parts Library: Base Parts > Mockups > Browser
The container is a versatile part. You can add most other parts here to create what you want to display in the container. For example, you can add rows, columns, images, cards, text, chats - anything that you'd like to display in your browser mockup, including any of the pre-built sections in the parts library.
Adding parts will adjust the container size accordingly.
To change the browser URL placeholder, go to the browser toolbar and select the text input, shown below. This will open the text input editor in the right menu. Go to Placeholder > Value Set, and edit the value to reflect a new URL.
To change the color of the container underneath, select the container part, and then change the background and foreground colors as needed.
To change the color of the three dots next to the URL, select the browser toolbar. Go to Colors, then change the foreground color to your preferred color. The resulting color will be a paler version of what you selected.
To change the of the browser toolbar, select the browser part. Go to Colors, then change the background color to your preferred color. This will change the color of both the toolbar and the container underneath.
can be set around the browser part, and around the container by selecting the relevant part and editing the border property in the right menu.
Text
Customizing and formatting
