Card systems Galleries

Card

The card component brings polished surfaces, gradients, and rich layout slots for marketing tiles, dashboards, and data summaries.

Hero tiles

Blend gradients, media, badges, and footer actions with just a few slots. Hover states and tone gradients keep hero cards lively yet refined.

Featured

Product launch

Skyline Analytics

Automate KPI synths, annotate trends, and broadcast live dashboards straight to investor workspaces with zero configuration.

AI insights Usage · 12 teams


<.card tone={:sky} variant={:glass} hoverable>
<:badge>Featured</:badge>
<:media>
<img src="..." class="h-60 w-full object-cover md:h-72" />
</:media>
<:header>
<h3 class="text-2xl font-semibold">Skyline Analytics</h3>
</:header>
Automate KPI synths and broadcast live dashboards.
<:footer>
<span class="text-white/70">Usage · 12 teams</span>
<button class="rounded-full border px-4 py-1.5">Launch workspace</button>
</:footer>
</.card>

New

Changelog

Collaboration cockpit

Inline comment threads across every block.
Auto-summarised standups sent to Slack and Teams.
Figma, Linear, and GitHub presence indicators.

Rollout 2.4 · GA next week


<.card tone={:emerald} variant={:soft} hoverable shadow={:lg}>
<:badge>New</:badge>
<:header>
<h3 class="text-xl font-semibold">Collaboration cockpit</h3>
</:header>
<ul class="space-y-2">
<li>Inline comment threads across every block.</li>
...
</ul>
<:footer>
<span class="text-slate-600">Rollout 2.4 · GA next week</span>
</:footer>
</.card>

Campaign

Nebula brand system

Nebula’s creative crew remixed PyraUI cards with tone gradients to balance vibrancy and readability across their hero surfaces.

Variants & tones

Mix visual styles—solid, soft, glass, and outline—with tones to match your brand palette.

Solid minimal

Classic white surface with subtle depth. Ideal for dashboards, tables, and stacked layouts.

Soft gradient

Gentle gradient wash and accent line keep marketing sections fresh without overpowering content.

Glass surface

Frosted transparency with luminous edges—perfect for hero callouts on dark backdrops.

Outline

Lightweight border treatment for utility drawers, settings screens, or dense forms.


<.card tone={:violet} variant={:glass} hoverable shadow={:lg}>...</.card>
<.card tone={:rose} variant={:outline} padded={false}>...</.card>

Layout patterns

Compose headers, action rows, media, and footers to suit marketing hero cards or product summaries.

Case study

Nimbus Payback

Nimbus migrated payback workflows to PyraUI and shipped a new partner portal in three days. See how the team composed dashboards with live metrics.

Read story

Conversion snapshot

+18.4%

Weekly incremental uplift following the onboarding refresh. Most gains came from the global search surface and real-time templates.

Last updated 2 hours ago

Campaign

Nebula brand system

Nebula’s creative crew remixed PyraUI cards with tone gradients to balance vibrancy and readability across their hero surfaces.

Props

Cards accept slots for media, badges, headers, footer actions, and support multiple surface variants with brand tones.

Prop	Type	Default	Description
variant	:solid \| :soft \| :glass \| :outline	:solid	Surface style and chroma treatment.
tone	:neutral \| :sky \| :violet \| :emerald \| :amber \| :rose	:neutral	Accent gradient for the top indicator and badges.
shadow	:none \| :sm \| :md \| :lg \| :xl	:md	Depth intensity for the card surface.
padded	boolean	true	Toggle internal padding when composing custom layouts.
hoverable	boolean	false	Adds lift and shadow animation on hover.
slots	`header`, `media`, `badge`, `footer`, `actions`	—	Compose hero content, imagery, CTA actions, and metadata.