SectionHeader

layout

A section heading with an optional index number, title, subtitle, and a 'View All' action link. Consistent typography across all sections.

Recent Projects

All Projects

A selection of work I've shipped recently.

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { SectionHeader } from "piece-ui";

2Usage

Basic usage

tsx

1import { SectionHeader } from "piece-ui";
2
3export default function Example() {
4  return (
5    <SectionHeader
6      number="02"
7      title="Recent Projects"
8      subtitle="A selection of work I've shipped recently."
9      viewAllHref="/projects"
10      viewAllLabel="All Projects"
11    />
12  );
13}

3Props

Prop	Type	Default	Description
`number`	`string \| number`	—	Section index number (e.g. '01').
`title`req	`string`	—	Main heading text.
`subtitle`	`string`	—	Optional secondary description.
`viewAllHref`	`string`	—	URL for the 'View All' link.
`viewAllLabel`	`string`	`"View All"`	Text for the 'View All' link.

SectionWrapper

SpotlightReveal