# About Office Locations

> Offices section: a heading and visiting note above four city entries, each marked by a thin left rule with a primary accent at the title, and a street address set in an address element.

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

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

## Install

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

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

## Dependencies

- Registry items: `@01orbital/features`, `@01orbital/heading`, `@01orbital/section`

## Files

### `blocks/about/about-08/index.tsx`

```tsx
import {
  Feature,
  FeatureDescription,
  FeatureGroup,
  FeatureTitle,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Our offices",
  body: "Four studios, each with a front desk that answers the phone. Visits are by appointment; write to the studio first and someone will meet you at the door.",
} as const

const OFFICES = [
  { name: "Lisbon", address: ["14 Lantern Row", "1200-118 Lisbon"] },
  { name: "Melbourne", address: ["212 Comet Lane", "Fitzroy VIC 3065"] },
  { name: "Montréal", address: ["88 Rue des Orbites", "Montréal, QC H2T 1S1"] },
  { name: "Oslo", address: ["5 Nordlys Gate", "0182 Oslo"] },
] as const

export default function About08() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <FeatureGroup cols={4}>
          {OFFICES.map((office) => (
            <Feature key={office.name} variant="outline">
              <FeatureTitle>{office.name}</FeatureTitle>
              <FeatureDescription render={<address />}>
                {office.address.map((line) => (
                  <p key={line}>{line}</p>
                ))}
              </FeatureDescription>
            </Feature>
          ))}
        </FeatureGroup>
      </SectionContent>
    </Section>
  )
}
```