Horizontal With Dividers
A single row of figures split by thin vertical dividers for a tidy summary. Use it under a hero to surface three or four headline numbers fast.
A single row of figures split by thin vertical dividers for a tidy summary. Use it under a hero to surface three or four headline numbers fast.
Search blocks by description or jump to a page.
Horizontal With Dividers opens with a centered heading and a short supporting line, then presents four stat cells in a single horizontal row separated by thin vertical dividers. Each cell holds a label, an oversized bold number, and a small trend indicator showing a directional arrow and a percentage change against the previous quarter. On smaller screens the row stacks vertically with horizontal rules between each cell instead.
Every cell is independent. You can update the label, number, comparison text, or trend arrow for each one without affecting the others. The four cells are the default but the row adapts naturally to three or five if you add or remove a cell. The heading and subheading at the top can also be rewritten or removed entirely.
Use this block when you need a compact, scannable summary of hiring or workforce numbers that reads quickly without taking up much vertical space. For an HR and hiring platform it is ideal on a homepage or a product overview page where you want to show candidate volume, time to fill, offer acceptance rate, and retention side by side. It outperforms a card grid here because the shared row keeps all the numbers at the same visual weight and the dividers draw the eye across without breaking the line.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each cell is a slot for one focused metric and its quarter over quarter movement. A few fits for an HR context:
Tip: keep the trend arrows meaningful by pairing them with a clear comparison label such as "vs previous quarter" so readers know exactly what improved.