# Isometric feature grid

A shadcn/ui features section for e-commerce and logistics brands that want a crafted feel: a bold headline and four isometric feature drawings on paper.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** E-commerce and logistics landing pages; Fulfillment, shipping and Shopify app websites; Product pages with illustrated feature grids
- **Category:** Marketing, E-commerce · **Type:** Features · **Style:** Minimal
- **See it:** [Live preview](https://www.craftui.space/docs/templates/feature-section-03) · [Screenshot](https://www.craftui.space/llms.md/preview/feature-section-03.44da2f11.jpg)

![Isometric feature grid](https://www.craftui.space/llms.md/preview/feature-section-03.44da2f11.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/feature-section-03.json
```

This is a paid item (SEC-0011): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import FeatureSection03 from "@/components/blocks/feature-section-03";

export default function Page() {
  return <FeatureSection03 />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | `"Orders out the door by noon."` | The headline, its first line indented round the badge. Defaults to "Orders out the door by noon." |
| `badge` | `ReactNode` | `<FeatureParcelBadge />` | The round badge set into the headline's first line. Defaults to `FeatureParcelBadge`; pass `null` for none. |
| `intro` | `ReactNode` | `"Parcel connects your storefront to a network of 40 warehouses. We store, pick,…` | The lead paragraph beside the headline, set large and muted: what the product is and does, in two or three sentences. |
| `features` | `FeatureSection03Item[]` | `built-in demo content` | The features, in order: a 2 × 2 grid on tablets and desktops, one column on phones. Four read best. |
| `headingLevel` | `1 \| 2 \| 3` | `2` | The headline's level: 1 when this is the page's main heading, 2 or 3 to fit under the page's own. The feature titles take the next level. Defaults to 2. |

It also accepts every `<section>` attribute (`className`, `id`, `aria-*` and so on).

### `FeatureSection03Item`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id: the list keys on it. |
| `title` (required) | `string` | The feature's title, short and declarative: "Packed with care." |
| `description` (required) | `string` | One or two sentences under the title, about 100 characters. |
| `art` (required) | `ReactNode` | The drawing on the feature's tile. Use `FeatureShelvesArt`, `FeatureBoxArt`, `FeatureTruckArt` or `FeatureReturnsArt` from this file, or any SVG drawn on a 440 × 440 canvas: the tile scales it to fit. |

## Files

The install adds:

- `components/blocks/feature-section-03.tsx`

No npm dependencies beyond React and Tailwind CSS.

shadcn/ui components it uses (the shadcn CLI adds any that are missing): `separator`.