Card Group

This section previews the Card Group component.

I have implemented the card group component into markdown which is ready to use.

Preview

Heading 1

This is an example of card content with columns.

Heading 2

This is an example of card content with columns.

Grid Card

This is a horizontal card layout.

Horizontal Card

This is a horizontal card layout.

Props

PropTypeDefaultDescription
colsnumber{2}By default 2 The number of columns per row

Code

<CardGroup cols={2}>
<Card title="Heading 1" icon="Heading1">
  This is an example of card content with columns.
</Card>
<Card title="Heading 2" icon="Heading2">
  This is an example of card content with columns.
</Card>
<Card title="Grid Card" icon="Grid" horizontal>
    This is a horizontal card layout.
</Card>
<Card title="Horizontal Card" icon="Layout" horizontal>
    This is a horizontal card layout.
</Card>
</CardGroup>

Published on Feb 20, 2025