Breakdance: Bento-Style Card Section Design (YT Video 37:48)

Also published YouTube.

Welcome back to another Breakdance design tutorial. In this video, we’re going to build out a cool bento-style card layout and design using the grid element in Breakdance. Nothing fancy, we’re going to keep things clean, minimal and focus on accessibility!

What is bento-style design?

Bento-style web design is a modern layout approach actually inspired by Japanese bento boxes — neatly organized trays with small, visually distinct compartments.

In web and UI design, this means breaking a page into a grid of clean, modular blocks (or otherwise known as “cards”), each card is dedicated to a specific piece of content or functionality.

Bento-style is one of my favorite design trends of recent times.

So, how can we create something similar in Breakdance?

Before we move on, credit needs to be given where it is due, this design was inspired by the original design created here in Webflow.

Video

Continue this topic by watching the video below.

Class names and structure

.footer /* Grid 4 col */
   .footer__before-container {...}
      .footer__card {...} /* bg image */
      .footer__card .footer__card-b .bg--l5 {...} /* __card-c: grid-column: 2/4; (set back to 1 @1023px with items per row: 1) */
         #div-block-1 {...}
            #icon {...} /* Quote */
            #text {...} /* Lorem ipsum */
         #div-block-2 {...}
            .footer__avatar {...}
            #div-block {...}
               #text {...} /* Name */
               #text {...} /* Role */
           #icon {...} /* Arrow icon */
      .footer__card {...} /* bg image */
   .footer__after-container {...} /* Grid 2 col */
      .footer__card .bg--l5 {...}
         #image {...} /* Footer logo */
         #div-block-1 {...}
            #heading {...} /* H4 Have a project in mind?*/
            #text {...}
         #div-block-2 {...}
            #button {...} /* Email us button */
            #div-block {...}
               #icon {...} /* Social - Preset */
      .footer__card .bg--l5 {...} /* @1023px set items per row: 1 */
         #heading {...} /* H4 Want to see my work */
         .footer__card-ul {...} /* UL */
            .footer__card-li {...} /* LI */
               #text {...}
               #icon {...} /* Arrow - preset */

More Breakdance tutorials?

Did you find this tutorial useful? Join Van Marciano Pro today and access over 100 page builder design tutorials and over 300 page builder course topics and videos, templates, and more.