Skip to main content
All CollectionsWhat is a dashboard app?
Style & customize your dashboard apps
Style & customize your dashboard apps
Leo avatar
Written by Leo
Updated over a week ago

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 select Delete. 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 by heading and 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 the Divider block from the menu.

  • Type / followed by div and then enter.

  • 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 the Large text toggle. 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 select Box from the menu that pops up.

  • You can also type /box and press enter to 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. Select Color and choose from the background color menu to change the entire block's color. Choosing Default turns 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 block

  • Select 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 select Group from the menu that pops up.

  • You can also type /group and press enter to 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 block

  • Select 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.

Up next

Embeds in Tape's dashboard apps

Did this answer your question?