Visulima – Card

Card Title

This is how you use a card with an icon and a link. Clicking on this card brings you to the Card Group page.


import { Card } from "@visulima/nextra-theme-docs/components";
<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="Card Title"
    href="/docs/package/nextra-theme-docs/writing-content/components/card-group"
>
    This is how you use a card with an icon and a link. Clicking on this card brings you to the Card Group page.
</Card>

A Card without a link.
Permalink for this section

A Card can also be used without a link and with or without a content.

Card Title

This is how you use a card with an icon.

Card Title


import { Card } from "@visulima/nextra-theme-docs/components";
<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="Card Title"
>
    This is how you use a card with an icon.
</Card>
<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="Card Title"
/>