Tape's dashboard apps are designed to display various types of blocks on a single page. Once they're in place, you can rearrange, organize, and structure them. Tape gives you the tools to customize your dashboards to match your unique style. You can adjust the look and feel of any dashboard to make it truly yours. No matter what, Tape ensures it always looks polished and professional 🎨
Drag & drop
Any block in Tape's dashboard apps can be dragged and dropped around the page.
Hover over any block and use the
⋮⋮icon that appears as a handle to drag it around.Blue guides will appear to show you where it will go.
Release your mouse to drop the block wherever you want it.
Columns
Sometimes, it makes sense to put pieces of information next to each other. In these situations, you can format your text into columns (or create side-by-side sections with headings) using drag and drop:
Click and drag the text you want to put in another column. (The
⋮⋮symbol in the left margin is your handle for drag and drop.)Follow the blue guides that appear.
Drop it where you want it. You’ll create a new column if you drop the block left next to the first block or all the way to the right next to the last block.
You can create as many columns as you want across the width of a page.
💡 Tip: When selecting the number of columns, remember that some team members might have smaller screens. Think carefully before using more than five columns.
Remove columns
To remove columns, simply do the reverse of the action you took to create them.
Click the
⋮⋮icon and hold to drag the block in your right-hand column back under or above the block in the left-hand column. When you see the blue guide span the width of the page, drop it and the columns should disappear.Sometimes, it's possible to have an empty column. In this case, click the
⋮⋮icon and selectDelete. This also removes the column format.
Change columns size
You can resize columns by hovering over the edges they share with other blocks and dragging the gray vertical guides that appear left or right.
💡Tip: By double-clicking on the gray vertical guide between blocks, you can make all columns the same width.
Headings & sub-headings
Using different sizes of headings throughout your writing gives your dashboard app more structure, context, and a sense of priority. Tape makes three sizes of headings available.
Click the
+in the left margin that appears when you hover over a new line, and select the size heading you want. See the menu in the image below.Type
/followed byheadingand choose a heading size to convert the text!Type whatever you want. Then, press
cmd/ctrl+/and choose a heading size to convert the text!
Dividers
Breaking up content on a dashboard app can help you separate distinct sections and ideas. Dividers are a good way to distinguish these sections and add some stylistic flair to your page.
Click the
+in the left margin that appears when you hover over a new line and select theDividerblock from the menu.Type
/followed bydivand thenenter.You can drag and drop these dividers just like any other block on your dashboard app
Font size
Choose lager text for every dashboard you produce.
Just click
•••at the upper right of your dashboard. This includes theLarge texttoggle. When you turn it on, the text on your dashboard expands. Helpful if you want to fit more on a page or if you like the way it looks. All the text on your dashboard will change accordingly.
Full width
You can shrink the margins on any dashboard app and widen your content area by going to ••• at the top right of your dashboard app and toggling on Full width.
Box block
Box blocks are useful for better designing and organizing your dashboards. They provide consistent styling, alignment, and spacing across all nested blocks, making it easier to manage and create even the most complex layouts.
Add a box
Click the
+that appears in the left-hand margin when you hover over a new line. Scroll to selectBoxfrom the menu that pops up.You can also type
/boxand pressenterto add it to your page.Move your box block around your page by using the
⋮⋮icon that appears on hover as a handle to drag and drop it.
Style your box
Change the color of the box block itself by clicking the
⋮⋮icon that appears to the left on hover. SelectColorand choose from the background color menu to change the entire block's color. ChoosingDefaultturns the block white with a light gray outline.Choose your own style for nested blocks within the box, such as background color, border, header, and more, depending on the block type.
Pro tip: you can create columns within an empty block inside a box. Once the columns are set up, you can easily drag and drop other blocks into different columns within the box.
Ungroup your box
Click the
⋮⋮icon that appears to the left on hover of a group blockSelect
Unbox
Group block
Group blocks help you organize your dashboards by grouping related blocks together, allowing you to move or manage them as a single unit. They don't change the visual design but keep your blocks organized. In an unlocked dashboard, a group block is outlined in red to show its boundaries, but this outline is not visible to end-users.
The group block is a step towards future conditional logic. Learn more → here
Add a group
Click the
+that appears in the left-hand margin when you hover over a new line. Scroll to selectGroupfrom the menu that pops up.You can also type
/groupand pressenterto add it to your page.Move your group block around your page by using the
⋮⋮icon that appears on hover as a handle to drag and drop it.
Style your group
You can edit and style the blocks within a group block just like you normally would.
Ungroup your group
Click the
⋮⋮icon that appears to the left on hover of a group blockSelect
Ungroup
Difference between box and group block
Group Block:
Purpose: primarily for logical grouping and managing related blocks as a single unit.
Visibility: grouped blocks are not visible to the end-user as a distinct section. In a unlocked dashboard, a group block is outlined in red to indicate its boundaries, but this outline is not visible to end-users.
Use Case:
In the future: Ideal for organizing blocks in dashboards where certain blocks need to be conditionally displayed, allowing for dynamic content.
Until then: Makes it easier to move multiple blocks together within a group block, without end-users noticing any difference in styling.
Box Block:
Purpose: primarily for creating visually distinct sections with consistent styling.
Visibility: the box block always has a visible border, making it easy for users to see. This border, along with options for background color and padding, clearly defines the section, making it stand out.
Use Case: ideal for highlighting or isolating blocks, providing clear separation
Summary:
Group Block: focused on logical organization, with no visible border, making it invisible to users.
Box Block: focused on visual distinction, with a visible border, making it clear and prominent to users.
Both blocks help organize blocks and enhance the user experience, but the group block is more about behind-the-scenes structuring, while the box block highlights sections with clear visual separation.
Why did we developed the group block now, and not wait for conditional logic in dashboards, webforms, and records?
We introduced the group block because the box block always requires a design change. The group block allows for logical grouping and easier movement or copying of multiple blocks without altering the visual design, providing immediate practical benefits — and we didn't want to miss out on those advantages.