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="Transnology"
href="https://transnology.co"
icon="alignJustify"
external={true}
variant="small"
/>
</CardGrid>
Large Card
Instructions
Installation
Get started with Acosta AI docs using our quick start installation guide.
Setup
Site Settings
Setting up your project layout, links and search engine optimisation.
About
Transnology
The company behind Acosta AI.
<CardGrid>
<Card
subtitle="Instructions"
title="Installation"
description="Get started with Acosta AI docs using our quick start installation guide."
href="/docs/basic-setup/installation"
/>
<Card
subtitle="Setup"
title="Site Settings"
description="Setting up your project layout, links and search engine optimisation."
href="/docs/basic-setup/setup"
/>
<Card
subtitle="About"
title="Transnology"
description="The company behind Acosta AI."
href="https://transnology.co"
external={true}
/>
</CardGrid>
Image Card
<CardGrid>
<Card
title="Instructions"
href="/docs/basic-setup/installation"
image="/images/og-image.png"
variant="image"
/>
<Card
title="Setup"
href="/docs/basic-setup/setup"
image="/images/og-image.png"
variant="image"
/>
<Card
title="Transnology"
href="https://transnology.co"
image="/images/og-image.png"
external={true}
variant="image"
/>
</CardGrid>