Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Mentorship Match About Block for React

Two sides of a mentorship match for a mentoring-software company, joined by a connector, with three steps underneath for how a match is made.

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 mentorship match for React with Base UI, written for Matchwell, a fictional mentoring product, describing the company's own program. The header states how many pairs are meeting and how many weeks a match runs. Under it, "As a mentor" and "As a mentee" sit on either side of a connector, a line with a node. On a wide screen a divider splits the two sides and the connector sits on it; below that the sides stack, a rule separates them, and a short connector sits at the start of the second side. Under both, a numbered "How we match" lists three steps. The week count in the mentee list and in the last step is the same WEEKS figure, and the pair count is PAIRS. The steps band ends the block, so it draws no rule under itself. The page's rails and top rule come from the Guides spine. It's built from Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show both sides of a program. The points are example data.

FAQ

How do I change the two sides and the steps?

The sides are SIDES and the steps are STEPS. Each side has a title and four points, and each point has a lead and a rest. WEEKS is the length of a match: the mentee list and the third step both read it. PAIRS is the number in the header. Keep two sides: from lg they share the row.

How is it read by a screen reader?

The heading is the section's only h2. Each side is an h3 followed by a list, and "How we match" is an h3 followed by an ordered list of three steps. The connector is hidden, because the two headings already name the sides, and one visually hidden sentence says the lists are the two sides of one match. The lines are drawn by a layer hidden from assistive technology.

What is the connector?

A line with a node, drawn as decoration. On a wide screen it runs along the divider between the two sides. On a narrow screen it is a short horizontal line at the start of the second side, under the rule that separates the two lists.

How does it fit on a phone?

The two sides stack, each as its own block of text, and the three steps become one column. From lg the sides sit in two columns and the steps sit in three, divided between them. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the divider moves to the other side.

Why is there no calendar year?

A year goes stale the day the page ships. The header counts pairs this quarter and weeks in a match, and the steps use that same week count. If you prefer a date, put it in a time element with a dateTime attribute.

What moves, and what happens with reduced motion?

The header fades up once on load. With reduced motion it simply appears. Nothing else moves: the block has no state and no script, so it can render on the server.

  • Pro

    Learning Program Budget About

    Careers

    A learning-budget table for a learning platform, where the headline is the sum of each program's spend per person and a bar shows the share of the team that joined.

  • Pro

    Career Path Spotlights About

    Team and leaders

    An employee spotlight for a film-crew planning company, with four people in a vertical tab list and the open profile as a three-step career path, three answers, and a tenure badge.

  • Pro

    Culture Rituals About

    Culture and values

    A team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.

  • Pro

    Day Track Hiring Process

    Careers

    A hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.

  • Pro

    Alumni Network About

    Careers

    Where a mentoring platform's alumni went: a ranked list of destinations with bars, and one alumna on a framed card with the line from her old role to her new one.

  • Pro

    Participation Rings About

    Culture and values

    An about section for an employee-engagement company: five rituals as rings for the share of the team that joins, each with a cadence badge and one line.

All 150 about blocks