GuideCard

A card component that displays content with a title and optional icon. The entire card is clickable and links to the specified URL.

Examples

Getting Started

Start your journey with our comprehensive quickstart guide.

Routing Guide

Learn about file-convention and settings-based routing in xyd.

Customization

Explore how to customize and extend xyd to match your needs.

API Documentation

Discover how to document your APIs with OpenAPI specifications.

Props

children

React.ReactNode

Required

Content to be displayed in the card body

href

string

Required

URL the card links to

title

string

Title displayed at the top of the card

icon

React.ReactNode

Optional icon displayed to the left of the content

kind

"secondary"

Visual style variant of the card

size

"sm" | "md"

Size variant of the card

className

string

Additional CSS class names to apply to the card

as

React.ElementType<any, keyof IntrinsicElements>

Additional props to pass to the link element

:::guide-card{title="Getting Started" icon="code" href="/guides/quickstart"}
Start your journey with our comprehensive quickstart guide.
:::

<GuideCard
  title="Routing Guide"
  icon="code"
  href="/guides/routing"
>
  Learn about file-convention and settings-based routing in xyd.
</GuideCard>

Details Tables

Built with

Show your support! Star us on GitHub ⭐️

Star