Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
Build And Launch
How to launch a portfolio site that actually gets you hired
How to build a documentation site with MDX and Next.js
How to ship a landing page and dashboard with authentication in Next.js
How to launch a social app with Next.js and Supabase
Vibe Coding
Introduction to vibe coding
Set up your local dev environment
Essential tools for vibe coding
Build your first Once UI app
Common Patterns
Hero section
Static panel
Form layout
Highlighted card
Responsive stacking
Decoration layers
Dialog & modal
Toast & feedback
Tables & lists
Loading states
App shell navigation
Dashboard & charts
Chat & messaging
Auth & verification
Settings & split panels
Data filters & toolbar
Command palette
Pricing & plans
Accordion & FAQ
Media & uploads
Empty & error states
SEO, Open Graph, and structured data
Documentation code blocks with live preview
Carousels, galleries, and before/after comparisons
Date pickers and scheduling
Context menus and dropdown actions
Tags, chips, and multi-value inputs
Roadmap & kanban
Form inputs & controls
Progress, status & badges
Scrolling & feeds
Profile, avatars & identity
Social proof & logo clouds
Masonry & media grids
Table pagination, search & bulk selection
Banners & announcements
Footer layouts
Onboarding & first run
Waitlist & coming soon
Design Tips
Color & surfaces
Harness overview
Row, Column & Grid
Spacing & rhythm
Icons & buttons
Reveal & motion
Theme tokens, FOUC-free init, and runtime style controls
Tooltips and hover cards
Block updates
Block updates changelog
Agent Resources
Column, not Flex
Semantics over CSS
Typography scale
Common gotchas
Block anchors
Validate generated code
Pro block registry
Match task bundles
TrademarkTrademark
Ctrl k
Search...
Sign up
Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
Build And Launch
How to launch a portfolio site that actually gets you hired
How to build a documentation site with MDX and Next.js
How to ship a landing page and dashboard with authentication in Next.js
How to launch a social app with Next.js and Supabase
Vibe Coding
Introduction to vibe coding
Set up your local dev environment
Essential tools for vibe coding
Build your first Once UI app
Common Patterns
Hero section
Static panel
Form layout
Highlighted card
Responsive stacking
Decoration layers
Dialog & modal
Toast & feedback
Tables & lists
Loading states
App shell navigation
Dashboard & charts
Chat & messaging
Auth & verification
Settings & split panels
Data filters & toolbar
Command palette
Pricing & plans
Accordion & FAQ
Media & uploads
Empty & error states
SEO, Open Graph, and structured data
Documentation code blocks with live preview
Carousels, galleries, and before/after comparisons
Date pickers and scheduling
Context menus and dropdown actions
Tags, chips, and multi-value inputs
Roadmap & kanban
Form inputs & controls
Progress, status & badges
Scrolling & feeds
Profile, avatars & identity
Social proof & logo clouds
Masonry & media grids
Table pagination, search & bulk selection
Banners & announcements
Footer layouts
Onboarding & first run
Waitlist & coming soon
Design Tips
Color & surfaces
Harness overview
Row, Column & Grid
Spacing & rhythm
Icons & buttons
Reveal & motion
Theme tokens, FOUC-free init, and runtime style controls
Tooltips and hover cards
Block updates
Block updates changelog
Agent Resources
Column, not Flex
Semantics over CSS
Typography scale
Common gotchas
Block anchors
Validate generated code
Pro block registry
Match task bundles
TrademarkTrademark
Once UIDocumentationBlog
© Once UI. All rights reserved.
Built with Aveiro

Highlighted card

Interactive Card with brand glow for featured pricing tiers and CTAs.
Updated 19d ago
Form layout
Responsive stacking
5 min · Pattern
Card is for interactive surfaces. Add a top glow and brand border to emphasize one item in a set — like a featured pricing tier.

When to use

Use a highlighted card when one item in a set should stand out and is interactive:
  • "Most popular" pricing tier
  • Featured plan or product
  • Selectable option with onClick
Static, non-clickable panels use the static panel recipe instead.

Basic interactive card

Card requires href or onClick — that's what makes it a card, not a panel.

Highlighted variant

Add a brand border and top glow for emphasis:

Pricing row

Place cards side by side, highlighted in the center or end: 
<Card href="/pricing/pro" fillWidth padding="24" radius="l" background="surface" border="neutral-alpha-weak">
  <Column gap="16" fillWidth>
    <Heading variant="heading-strong-m">Pro</Heading>
    <Text variant="display-strong-s" onBackground="neutral-strong">$29/mo</Text>
    <Text variant="body-default-s" onBackground="neutral-weak">
      For growing teams.
    </Text>
    <Button fillWidth>Get started</Button>
  </Column>
</Card>
<Card href="/pricing/pro" fillWidth padding="24" radius="l" background="surface" border="brand-alpha-medium" overflow="hidden">
  <Background
    position="absolute" top="0" left="0" fill pointerEvents="none"
    gradient={{
      display: true,
      colorStart: "brand-alpha-medium",
      colorEnd: "static-transparent",
      x: 50, y: 0,
      width: 200, height: 60,
      opacity: 50,
    }}
  />
  <Column zIndex={1} gap="20" fillWidth>
    <Text variant="label-default-s" onBackground="brand-medium">MOST POPULAR</Text>
    <Heading variant="heading-strong-m">Pro</Heading>
    <Text variant="display-strong-s" onBackground="neutral-strong">$29/mo</Text>
    <Button fillWidth>Get started</Button>
  </Column>
</Card>
<Row gap="24" vertical="stretch" s={{ direction: "column" }}>
  <Card href="/basic" fill padding="24" radius="l" background="surface" border="neutral-alpha-weak">
    {/* basic tier */}
  </Card>
  <Card href="/pro" fill padding="24" radius="l" background="surface" border="brand-alpha-medium" overflow="hidden">
    {/* highlighted tier with glow */}
  </Card>
  <Card href="/enterprise" fill padding="24" radius="l" background="surface" border="neutral-alpha-weak">
    {/* enterprise tier */}
  </Card>
</Row>
Use vertical="stretch" so all tiers match height.

Write this / not this

✅ Once UI way
❌ Common mistake
`Card` with `href` or `onClick``Card` for static content
`Column` + surface props for static boxes`Card` without interaction
Glow only on highlighted tierGlow on every card in the set
`overflow="hidden"` when using inner glowGlow bleeding past radius

Check yourself

  • Every Card has href or onClick
  • Static tiers use neutral border
  • Highlighted tier has brand border + top glow
  • Content inside glow has zIndex={1}

Related

→ Static panel → Decoration layers → Task bundle: tasks/pricing.json