# Minimal Guide Cards

> Plain resources section: a heading above three guide cards, each with a reading time, a title, a line of copy and a Read the guide link. Theme tokens only, light and dark.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/minimal-resources-01).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/minimal-resources-01
- Screenshot: https://shadcn.exchange/shot/01orbital/minimal-resources-01/light.png
- Registry item: https://01orbital.dev/r/minimal-resources-01.json
- Categories: resources
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/minimal-resources-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@phosphor-icons/react`, `cn`
- Registry items: `@01orbital/button`, `card`, `@01orbital/heading`, `@01orbital/section`

## Files

### `blocks/resources/minimal-resources-01/index.tsx`

```tsx
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Guides",
  body: "Short, practical reads on planning and shipping with a small team.",
  read: "Read the guide",
} as const

const GUIDES = [
  {
    kind: "Guide · 6 min",
    title: "Write a plan people read",
    body: "Owners, dates and one sentence of why: the three things every line needs.",
    href: "#",
  },
  {
    kind: "Guide · 8 min",
    title: "Run a ten-minute standup",
    body: "Let the digest carry the news so the meeting only handles what is blocked.",
    href: "#",
  },
  {
    kind: "Guide · 5 min",
    title: "Hand off without a meeting",
    body: "What goes in the handoff note, and what the next person should never have to ask.",
    href: "#",
  },
] as const

export default function MinimalResources01() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <ul
          role="list"
          className="grid grid-cols-1 gap-4 @5xl/section:grid-cols-3"
        >
          {GUIDES.map((guide) => (
            <li key={guide.title} className="flex">
              <Card className="w-full">
                <CardHeader className="gap-2">
                  <p className="text-sm text-muted-foreground">{guide.kind}</p>
                  <CardTitle role="heading" aria-level={3}>
                    {guide.title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="flex-1">
                  <CardDescription>{guide.body}</CardDescription>
                </CardContent>
                <CardFooter>
                  <a
                    href={guide.href}
                    data-slot="button"
                    className={cn(
                      buttonVariants({ variant: "link" }),
                      "h-auto p-0 font-semibold"
                    )}
                  >
                    {COPY.read}
                    <span className="sr-only">: {guide.title}</span>
                    <ArrowRightIcon data-icon="inline-end" aria-hidden="true" />
                  </a>
                </CardFooter>
              </Card>
            </li>
          ))}
        </ul>
      </SectionContent>
    </Section>
  )
}
```