Section with 5 values
Numbered List
01.
One Header Image
A title and short subtitle sit at the top of the section, with an optional header image or logo placed beside them. The five values then follow underneath in a grid that adapts to the screen width.
02.
A Cell per Value
Each value gets its own cell holding an auto number, a short title, and a paragraph of description. The cells are divided by thin grid borders whose color you can set to match the section.
03.
Numbers in Style
The leading number can show as a plain digit, a zero padded format like 01, or other styles. Picking the format updates every cell at once so the whole set of five stays consistent.
04.
Type Controls
Font style, size override, and max width are set separately for the title, the number, each value title, the descriptions, and the subtitle, so each text role can be tuned on its own.
05.
Color and Motion
Background, text, and grid border colors come from a scheme or custom picks. An optional sliding effect brings the grid in on scroll and can be switched off for the mobile view.
Section with 5 values
Tighter Copy
01.
Value titles can be left empty so each cell shows only its number and a line of description, which keeps the grid compact.
02.
Here the main title is scaled down with a size override while the logo stays pinned in the top corner, showing how the heading area can be made more compact.
03.
Descriptions use a smaller type setting, useful when each point is brief and you want five items on one tidy row.
04.
The numbers still run in order down the grid, so visitors can follow the sequence even without a heading per cell.
05.
Swapping the color scheme inverts the look, letting the same block sit on a dark or light part of the page.