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
any
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
any
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>

Edit page

Details Tables

Built with

Show your support! Star us on GitHub ⭐️

Star