Three Column Icons
Three column grid of icon backed feature summaries.
Three column grid of icon backed feature summaries.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
A classic feature section that lays out six benefits in a responsive icon grid. A left aligned heading and lede sit above the grid, and each cell pairs a rounded icon badge with a short title and a one line description. It is the fastest way to communicate breadth of capability without overwhelming the reader.
bg-base-200 badgeThe grid starts as a single column on small screens, shifts to two columns at the sm breakpoint, and settles into three columns on large viewports. Generous gap-x-8 and gap-y-10 spacing keep the cells legible at every width.
Swap any icon by importing a different glyph from lucide-react and updating the features array. The badges inherit your daisyUI theme through bg-base-200 and text-base-content, so a theme change restyles them automatically. Edit the copy in place, and add or remove items freely since the layout flows from the array.
Place it under a hero, then follow with a deeper alternating rows or tabbed section once interest is established.