Bento 20 block design & features
Bento20 is a three-tile bento built with shadcn/ui on a light neutral section using an eight-column grid. A full-width top card spans all eight columns and splits into a text column and an image column side by side. The text side carries a blue category label, a large four-line headline about recommendation engine intelligence, and a supporting paragraph. The image side shows a cover photograph sliding in from the right. Below, a wide five-column intelligent data analysis tile shows a cover photograph above its caption, paired with a narrower three-column predictive performance card rendering a monthly budget widget with dropdown selectors and record icons.
Bordered white cards on a neutral page background. The hero card is the structural standout, treating one bento cell as a mini landing section rather than a simple image-plus-caption tile. Blue accent color appears only on the hero label. Smaller bottom tiles use reduced caption text sizes.
Bold and product-marketing oriented with a recommendation-system narrative. The split hero row elevates this beyond a uniform feature grid, while the two supporting tiles maintain standard bento proportions. Moderate complexity with two image-driven tiles and one coded budget UI panel.
The hero card stacks text above image on mobile, and the bottom row collapses to a single column.