DoorCard

One of two equal entry points on a landing page, one per audience, with a signature line, three points and an anchor button.

LayoutServer-rendered

Examples

Two doors

You're building an MCP server

Run your server anywhere and choose which one answers.

sb dev my-server --port 3000

Localhost with no tunnel
Switch builds in one command

See the dev loop

You use a lot of MCP servers

Add each server once by URL and sign in once.

https://switchboard.example.com/mcp

One URL for every agent
Tokens kept off your laptop

See how it works

Example

Wrap

<Grid min="380px" gap="6">
  <DoorCard icon="terminal" title="…" body="…" signature="sb dev my-server --port 3000" points={[…]} action={<Button href="#build" variant="secondary">See the dev loop</Button>} />
  <DoorCard icon="layers" … />
</Grid>

Usage

Wrap

import { DoorCard } from '@switchboard/ui'

<DoorCard icon title body signature? points? action? level?={3} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

`DoorCard`

DoorCard props
Prop	Type	Default	Description
icon*	IconName	–	Accent icon beside the title.
title*	string	–	The heading (h3 by default).
body*	RemixNode	–	Two or three sentences.
signature	string	–	One mono line (a command, a URL), truncated with an ellipsis.
points	RemixNode[]	–	Short points with check marks.
action	RemixNode	–	One Button, usually an in-page anchor.
level	3 \| 4	3	Heading level.

An <article>; also accepts its attributes.

Accessibility

Points are a real <ul>; the check icons are aria-hidden.
The signature keeps its full text in a title attribute.

Guidance

Do

Use two (at most three) side by side, equal weight.

Don’t

Make the whole card a link (it holds a button already).
Use it as a pricing card.