All Collections
Understand Bento basics
Styles: Checklist layouts and hiding steps
Styles: Checklist layouts and hiding steps

Set a theme to match your app style and use components that best fit.

Meera Kanani avatar
Written by Meera Kanani
Updated over a week ago

Checklists can be created in 4 different styles (stay tuned for more styles) to best align to the aesthetic of your product and vision:

  • Nested

  • Flat

  • Compact

  • Timeline

Choose a checklist-style when you create a "New user checklist" or set your org's default style in branding settings.

From the preview tab of any checklist guide you can also switch between styles and launch the updated style.

Nested

Nested guides allow you to provide detailed information to your users in each step. You can include multiple forms of media (e.g., pictures, videos, gifs, etc.), many lines of text, and links / calls to action.

The Nested guides are often made up of many steps and are most relevant for more complex products and onboarding flows.

Flat

Flat guides are meant for simple onboarding flows to clearly outline the few required steps, include call to actions, and link users to relevant documentation as needed.

The step descriptions will be 'inline' with the titles rather than requiring the user to open the steps to expose the description, this is true for guides inline and in the sidebar.

You can include all content types and branching in flat guides but it may require you to adjust the step height.

Note: We recommend step descriptions for flat guide to be quite short to avoid a jarring UX.

Compact

The compact layout most closely resembles the nested layout in terms of the assets you can include and the length of the steps.

The compact layout allows you to show the simple steps required for onboarding upfront, followed by more detail guidance when the user clicks into the experience.

Timeline

The timeline layout gives you the opportunity for horizontal scroll / navigation rather than vertical like the other layouts.

It is great for simple onboarding steps that are more informational rather than action-oriented.

If there are any other guide themes or styles you would like to see send us your inspiration and we will help you create them!

Hiding completed steps in checklists

For flat and compact guides you can hide completed steps from the inline and sidebar checklist.

  1. In the styles tab of any checklist make sure the layout is flat or compact

  2. Select "Hide completed steps"

  3. Play with the preview to see what the end user experience looks like

Did this answer your question?