All Collections
Styling and customizing your Bento experience
Styles: Adding and styling media (images, videos, stats, icons and more)
Styles: Adding and styling media (images, videos, stats, icons and more)

It's easy to add media to Bento guides and style them.

Emily Wang avatar
Written by Emily Wang
Updated over a week ago

Great onboarding steps are a lot more than just text. Come'on, you're not even reading this article are you...

But a video?

Or a GIF?

Or a stat?

Now you're talking...

Media that Bento supports

Bento supports:

  • Images

  • GIFS

  • Videos

  • Dynamic attributes (so you can show stats!)

  • Icons (coming soon)

How to add media – single step guides (i.e. cards)

To add media, click the "Add Media" button at the bottom of the content builder (again, this only applies to single step guides). Choose your media type.

Note: Images and videos have additional customization capabilities like:

  • Whether it should expand into a lightbox on click

  • Whether the image should show "Edge to edge" (i.e. no margins)

  • Whether the video should play inline

You can add in the URL of the video or image, or select the image file. To choose a different image, click the revert icon.

How to add media – multi step guides (i.e. checklists)

To add media, click on the blue "+" button at the bottom of the text editor and select your media type.

How to style media

In the Preview & Style tab, you can manipulate the orientation and position of your media

  • When in a Vertical orientation, you can change whether the media is top or bottom aligned

  • When in a Horizontal orientation, you can change whether the media appears on the Left or Right, and is Top, Center, or Bottom aligned

  • Images can also be resized in a relative or fixed px width

Did this answer your question?