Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Practice Depth Grid About Block for Ark UI

An expertise section for a data consultancy, with six practice cells in shared hairlines, each listing bench time, projects and tools, plus five depth marks, and a first cell twice as tall.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A practice grid for React with Ark UI, written for Keelmark, a fictional data consultancy. A centred header states the project total, which is the sum of the cells, then six domains in shared hairlines inside a framed grid. Each cell is a definition list of years and projects, the tools they reach for as badges, and a row of five depth marks with the depth in text. The first cell is twice as tall and carries the practice in a sentence. The last cell spans the row. Below a large screen the cells stack in one column. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show how deep a practice goes. The domains and the counts are example data.

FAQ

How do I change the practices?

Edit DOMAINS at the top of the file. Each has a name, years, projects, a level from 1 to 5, tools, and a span of lead, cell or foot. Only the lead has a summary. The header's project total is the sum of projects, and the practice count is the length of the array.

How does the first cell become twice as tall?

On a large screen the grid is four columns. The lead spans two columns and two rows, the next four cells fill the space beside it, and the foot spans the whole row. Below that breakpoint every span is off and the cells stack in one column, so a phone never opens a hole in the hairlines.

What do the five marks mean?

They repeat the level. Filled marks run up to that number and the rest stay faint. The same number is written beside them as "Depth N of 5", which is what a screen reader gets. The marks themselves are decorative.

How is a cell read by a screen reader?

Each practice is an h3. Years and projects are a definition list. The tools are a list labelled "Typical tools". The depth sentence follows. The lead's summary is a paragraph under its title.

How does it fit on a phone?

The header stays centred and the six cells stack, each with its facts under the title. The frame keeps its corners. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The heading fades up once when the page loads. The grid sits still. With reduced motion the entrance is off.

All 150 about blocks