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-zinc-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-zinc-600">
Your dashboard shows an overview of your recent activity and important metrics.
</p>
{% endcotton %}Use padding="sm" for smaller cards like notifications, alerts, or list items.
You have 3 unread messages
Your export has finished processing
<c-ui.card padding="sm">
<h4 class="font-semibold">New Message</h4>
<p class="text-sm text-zinc-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-zinc-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-zinc-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-zinc-600 mt-1">Your export has finished processing</p>
{% endcotton %}Structure your card with distinct header and content sections.
Manage your team and permissions
<c-ui.card class="space-y-4">
<div>
<h3 class="text-xl font-bold">Team Members</h3>
<p class="text-sm text-zinc-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-zinc-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-zinc-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-zinc-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-zinc-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-zinc-600">michael@example.com</div>
</div>
{% cotton ui.badge color="blue" %}Member{% endcotton %}
</div>
</div>
{% endcotton %}Add buttons and actions to your card footer.
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-zinc-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-zinc-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 %}Make cards clickable by wrapping them in a link. Add hover states for better user feedback.
<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-zinc-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-zinc-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-zinc-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-zinc-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-zinc-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-zinc-600 mt-2">Join our developer community</p>
{% endcotton %}
</a>Cards work great for containing forms and input groups.
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-zinc-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-zinc-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 %}| Name | Description | Type | Options | Default |
|---|---|---|---|---|
padding |
Body padding; none gives a flush body so full-width content sits edge to edge. | str |
nonexssmmdlgxl2xl
|
md |
slot (default) |
The card's content. | — | — |