Visulima – Card Group

The CardGroup component lets you group multiple Card components together. It’s most often used to put multiple cards on the same column.

Example 1

Example 2

Example 3

Example 4

Example 1

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

Example 2

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

Example 3

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

Example 4

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

Example
Permalink for this section


import { Card, CardGroup } from "@visulima/nextra-theme-docs/components";
<CardGroup cols={2}>
    <Card
        icon={
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6">
                <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
            </svg>
        }
        title="Example 1"
    />
    <Card
        icon={
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6">
                <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
            </svg>
        }
        title="Example 2"
    />
    <Card
        icon={
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6">
                <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
            </svg>
        }
        title="Example 3"
    />
    <Card
        icon={
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6">
                <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
            </svg>
        }
        title="Example 4"
    />
</CardGroup>

API
Permalink for this section

The Accordion component takes the following props:

`cols`
Permalink for this section

The number of columns per row

Type: number
Required: false
Default: 3

Example 1

Example 2

Example 3

Example 4

Example 1

Example 2

Example 3

Example 4

Exampleself.__wrap_n!=1&&self.__wrap_b(":Ra4dqml6:",1)Permalink for this section

APIself.__wrap_n!=1&&self.__wrap_b(":Rb4dqml6:",1)Permalink for this section

colsself.__wrap_n!=1&&self.__wrap_b(":Rc4dqml6:",1)Permalink for this section

Example
Permalink for this section

API
Permalink for this section

`cols`
Permalink for this section