Guide Card

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.ReactNodeRequired
Content to be displayed in the card body
href
stringRequired
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