This section introduces the different card styles available in the system, from compact small cards to visually rich image cards. Each example is paired with JSX code snippets, providing you with a practical guide to incorporate these components seamlessly into your project.
Small Card
<CardGrid>
<Card
title="Instructions"
href="/docs/basic-setup/installation"
icon="alignJustify"
variant="small"
description="test description"
/>
<Card
title="Setup"
href="/docs/basic-setup/setup"
icon="alignJustify"
variant="small"
/>
<Card
title="Kulu AI"
href="https://heykulu.ai/"
icon="alignJustify"
external={true}
variant="small"
/>
</CardGrid>
Large Card
Instructions
Installation
Get started with Documents using our quick start installation guide to get your project started.
Setup
Site Settings
Setting up your Documents projects layout, links and search engine optimisation.
Support
Kulu AI
AI-powered documentation and knowledge base platform.
<CardGrid>
<Card
subtitle="Instructions"
title="Installation"
description="Get started with Documents using our quick start installation guide to get your project started."
href="/docs/basic-setup/installation"
/>
<Card
subtitle="Setup"
title="Site Settings"
description="Setting up your Documents projects layout, links and search engine optimisation."
href="/docs/basic-setup/setup"
/>
<Card
subtitle="Support"
title="Kulu AI"
description="AI-powered documentation and knowledge base platform."
href="https://heykulu.ai/"
external={true}
/>
</CardGrid>
Image Card
<CardGrid>
<Card
title="Instructions"
href="/docs/introduction/installation"
image="/images/og-image.png"
variant="image"
/>
<Card
title="Setup"
href="/docs/introduction/setup"
image="/images/og-image.png"
variant="image"
/>
<Card
title="Kulu AI"
href="https://heykulu.ai/"
image="/images/og-image.png"
external={true}
variant="image"
/>
</CardGrid>