cotton
Core UI Kit
21

Card

A versatile container for grouping related content and actions.

Welcome Back

Your dashboard shows an overview of your recent activity and important metrics. 

<c-ui.card>
    <h3 class="text-lg font-semibold mb-2">Welcome Back</h3>
    <p class="text-ink-600">
        Your dashboard shows an overview of your recent activity and important metrics.
    </p>
</c-ui.card>
{% cotton ui.card %}
    <h3 class="text-lg font-semibold mb-2">Welcome Back</h3>
    <p class="text-ink-600">
        Your dashboard shows an overview of your recent activity and important metrics.
    </p>
{% endcotton %}

Variants

Cards default to variant="raised": a filled surface (--color-surface) with a subtle shadow that lifts off the page. Use variant="outline" for a flat, border-only card with no fill or shadow.

Raised

Filled surface with a shadow. The default.

Outline

Border only, sits flat on the page background.

<c-ui.card>...</c-ui.card>                    {# raised (default) #}

<c-ui.card variant="outline">...</c-ui.card>
{% cotton ui.card %}...{% endcotton %}                    {# raised (default) #}

{% cotton ui.card variant="outline" %}...{% endcotton %}

Compact

Use padding="sm" for smaller cards like notifications, alerts, or list items.

New Message

You have 3 unread messages

Task Complete

Your export has finished processing

<c-ui.card padding="sm">
    <h4 class="font-semibold">New Message</h4>
    <p class="text-sm text-ink-600 mt-1">You have 3 unread messages</p>
</c-ui.card>

<c-ui.card padding="sm">
    <h4 class="font-semibold">Task Complete</h4>
    <p class="text-sm text-ink-600 mt-1">Your export has finished processing</p>
</c-ui.card>
{% cotton ui.card padding="sm" %}
    <h4 class="font-semibold">New Message</h4>
    <p class="text-sm text-ink-600 mt-1">You have 3 unread messages</p>
{% endcotton %}

{% cotton ui.card padding="sm" %}
    <h4 class="font-semibold">Task Complete</h4>
    <p class="text-sm text-ink-600 mt-1">Your export has finished processing</p>
{% endcotton %}

With Header and Content

Structure your card with distinct header and content sections.

Team Members

Manage your team and permissions

Sarah Chen
sarah@example.com
Admin
Michael Park
michael@example.com
Member 
<c-ui.card class="space-y-4">
    <div>
        <h3 class="text-xl font-bold">Team Members</h3>
        <p class="text-sm text-ink-600 mt-1">Manage your team and permissions</p>
    </div>

    <div class="space-y-3">
        <div class="flex items-center justify-between py-2">
            <div>
                <div class="font-medium">Sarah Chen</div>
                <div class="text-sm text-ink-600">sarah@example.com</div>
            </div>
            <c-ui.badge>Admin</c-ui.badge>
        </div>

        <div class="flex items-center justify-between py-2">
            <div>
                <div class="font-medium">Michael Park</div>
                <div class="text-sm text-ink-600">michael@example.com</div>
            </div>
            <c-ui.badge color="blue">Member</c-ui.badge>
        </div>
    </div>
</c-ui.card>
{% cotton ui.card class="space-y-4" %}
    <div>
        <h3 class="text-xl font-bold">Team Members</h3>
        <p class="text-sm text-ink-600 mt-1">Manage your team and permissions</p>
    </div>

    <div class="space-y-3">
        <div class="flex items-center justify-between py-2">
            <div>
                <div class="font-medium">Sarah Chen</div>
                <div class="text-sm text-ink-600">sarah@example.com</div>
            </div>
            {% cotton ui.badge %}Admin{% endcotton %}
        </div>

        <div class="flex items-center justify-between py-2">
            <div>
                <div class="font-medium">Michael Park</div>
                <div class="text-sm text-ink-600">michael@example.com</div>
            </div>
            {% cotton ui.badge color="blue" %}Member{% endcotton %}
        </div>
    </div>
{% endcotton %}

With Actions

Add buttons and actions to your card footer.

Export Data

Download your account data in CSV or JSON format. This may take a few minutes for large datasets. 

<c-ui.card class="space-y-6">
    <div>
        <h3 class="text-lg font-semibold">Export Data</h3>
        <p class="text-ink-600 mt-2">
            Download your account data in CSV or JSON format. This may take a few minutes for large datasets.
        </p>
    </div>

    <div class="flex gap-3">
        <c-ui.button variant="primary">Download CSV</c-ui.button>
        <c-ui.button variant="default">Download JSON</c-ui.button>
    </div>
</c-ui.card>
{% cotton ui.card class="space-y-6" %}
    <div>
        <h3 class="text-lg font-semibold">Export Data</h3>
        <p class="text-ink-600 mt-2">
            Download your account data in CSV or JSON format. This may take a few minutes for large datasets.
        </p>
    </div>

    <div class="flex gap-3">
        {% cotton ui.button variant="primary" %}Download CSV{% endcotton %}
        {% cotton ui.button variant="default" %}Download JSON{% endcotton %}
    </div>
{% endcotton %}

Interactive Cards

Make cards clickable by wrapping them in a link. Add hover states for better user feedback.

Documentation

Learn how to integrate our API

Support

Get help from our support team

Community

Join our developer community

 
<a href="/docs">
    <c-ui.card padding="sm" class="hover:shadow-md transition-shadow">
        <h4 class="font-semibold">Documentation</h4>
        <p class="text-sm text-ink-600 mt-2">Learn how to integrate our API</p>
    </c-ui.card>
</a>

<a href="/support">
    <c-ui.card padding="sm" class="hover:shadow-md transition-shadow">
        <h4 class="font-semibold">Support</h4>
        <p class="text-sm text-ink-600 mt-2">Get help from our support team</p>
    </c-ui.card>
</a>

<a href="/community">
    <c-ui.card padding="sm" class="hover:shadow-md transition-shadow">
        <h4 class="font-semibold">Community</h4>
        <p class="text-sm text-ink-600 mt-2">Join our developer community</p>
    </c-ui.card>
</a>
<a href="/docs">
    {% cotton ui.card padding="sm" class="hover:shadow-md transition-shadow" %}
        <h4 class="font-semibold">Documentation</h4>
        <p class="text-sm text-ink-600 mt-2">Learn how to integrate our API</p>
    {% endcotton %}
</a>

<a href="/support">
    {% cotton ui.card padding="sm" class="hover:shadow-md transition-shadow" %}
        <h4 class="font-semibold">Support</h4>
        <p class="text-sm text-ink-600 mt-2">Get help from our support team</p>
    {% endcotton %}
</a>

<a href="/community">
    {% cotton ui.card padding="sm" class="hover:shadow-md transition-shadow" %}
        <h4 class="font-semibold">Community</h4>
        <p class="text-sm text-ink-600 mt-2">Join our developer community</p>
    {% endcotton %}
</a>

Form Layout

Cards work great for containing forms and input groups.

Account Settings

Update your profile information

<c-ui.card class="space-y-6">
    <div>
        <h3 class="text-xl font-bold">Account Settings</h3>
        <p class="text-sm text-ink-600 mt-1">Update your profile information</p>
    </div>

    <div class="space-y-4">
        <c-ui.input label="Full Name" type="text" placeholder="Enter your name" />
        <c-ui.input label="Email" type="email" placeholder="you@example.com" />
        <c-ui.textarea label="Bio" placeholder="Tell us about yourself" height="sm" />
    </div>

    <div class="flex gap-3">
        <c-ui.button variant="primary">Save Changes</c-ui.button>
        <c-ui.button variant="ghost">Cancel</c-ui.button>
    </div>
</c-ui.card>
{% cotton ui.card class="space-y-6" %}
    <div>
        <h3 class="text-xl font-bold">Account Settings</h3>
        <p class="text-sm text-ink-600 mt-1">Update your profile information</p>
    </div>

    <div class="space-y-4">
        {% cotton ui.input label="Full Name" type="text" placeholder="Enter your name" /%}
        {% cotton ui.input label="Email" type="email" placeholder="you@example.com" /%}
        {% cotton ui.textarea label="Bio" placeholder="Tell us about yourself" height="sm" /%}
    </div>

    <div class="flex gap-3">
        {% cotton ui.button variant="primary" %}Save Changes{% endcotton %}
        {% cotton ui.button variant="ghost" %}Cancel{% endcotton %}
    </div>
{% endcotton %}

API Reference

Props

Name Description Type Options Default
variant raised: filled surface + shadow that lifts off the page; outline: border only, no fill or shadow. str
raisedoutline
raised
padding Body padding; none gives a flush body so full-width content sits edge to edge. str
nonexssmmdlgxl2xl
md
title Optional heading; renders a padded header band with a divider above the body. str —
subheading Optional sub-text shown under the title in the header band. str —
class Extra classes on the card container. str —

Slots

Name Description Type Options Default
header Custom header content instead of title/subheading; renders the padded header band. slot —
slot (default) The card's body content. slot —
Theme
Accent
Ink