Layout Components

Card

A flexible container component that groups related content with consistent styling. Cards can contain text, images, and other components.

Source Edit this page

A flexible container component that groups related content with consistent styling. Cards can contain text, images, and other components.

When to Use

Group related content into a visually distinct surface (article preview, settings block, summary panel).
Establish hierarchy on a page where multiple sections need to feel like discrete units.
Wrap clickable surfaces (link/anchor cards) where the entire block is the affordance.
Build form sections, dashboard tiles, or pricing tables.

When NOT to Use

For inline groupings of a few elements — prefer Stack or Row directly without the surface treatment.
For modal/dialog content — Modal already provides the surface and shadow.

Customizing

Set app-wide Card defaults with ThemeProvider's themeDefaults:

import { ThemeProvider, Card } from '@vaneui/ui';

<ThemeProvider themeDefaults={{
  card: { main: { shadow: true } },
}}>
  <Card>Content</Card>
</ThemeProvider>

Basic Card

A simple card container with default styling. md, primary, outline, rounded, border, padding, gap, flex, and column are all defaults — no need to specify them.

Welcome to VaneUI

Build beautiful interfaces with ready-to-use components.

<Card>
  <Title>Welcome to VaneUI</Title>
  <Text>Build beautiful interfaces with ready-to-use components.</Text>
</Card>

Card Sizes

Cards come in different sizes: xs, sm, md (default), lg, xl. Size also scales padding, gap, and border-radius.

Extra Small

Tight content

Small Card

Compact content

Medium Card

Default size

Large Card

More spacious

Extra Large

Maximum room

<Row flexWrap itemsStart>
  <Card xs>
    <Title xs>Extra Small</Title>
    <Text xs>Tight content</Text>
  </Card>
  <Card sm>
    <Title sm>Small Card</Title>
    <Text sm>Compact content</Text>
  </Card>
  <Card>
    <Title>Medium Card</Title>
    <Text>Default size</Text>
  </Card>
  <Card lg>
    <Title lg>Large Card</Title>
    <Text lg>More spacious</Text>
  </Card>
  <Card xl>
    <Title xl>Extra Large</Title>
    <Text xl>Maximum room</Text>
  </Card>
</Row>

Card Appearances

Cards support color appearances: primary (default), brand, accent, secondary, tertiary, success, danger, warning, info, link.

Primary

Default

Brand

Brand color

Accent

Highlight

Secondary

Subtle styling

Tertiary

Quiet emphasis

Success

Positive status

Danger

Error or alert

Warning

Caution

Info

Informational

<Row flexWrap>
  <Card>
    <Title>Primary</Title>
    <Text>Default</Text>
  </Card>
  <Card brand>
    <Title>Brand</Title>
    <Text>Brand color</Text>
  </Card>
  <Card accent>
    <Title>Accent</Title>
    <Text>Highlight</Text>
  </Card>
  <Card secondary>
    <Title>Secondary</Title>
    <Text>Subtle styling</Text>
  </Card>
  <Card tertiary>
    <Title>Tertiary</Title>
    <Text>Quiet emphasis</Text>
  </Card>
  <Card success>
    <Title>Success</Title>
    <Text>Positive status</Text>
  </Card>
  <Card danger>
    <Title>Danger</Title>
    <Text>Error or alert</Text>
  </Card>
  <Card warning>
    <Title>Warning</Title>
    <Text>Caution</Text>
  </Card>
  <Card info>
    <Title>Info</Title>
    <Text>Informational</Text>
  </Card>
</Row>

Card Variants

outline is the default. Use filled for solid backgrounds. Add shadow for elevation.

Outline

Default — border only

Filled

Solid background

Shadow

Elevated appearance

<Row flexWrap>
  <Card>
    <Title>Outline</Title>
    <Text>Default — border only</Text>
  </Card>
  <Card filled>
    <Title filled>Filled</Title>
    <Text filled>Solid background</Text>
  </Card>
  <Card shadow>
    <Title>Shadow</Title>
    <Text>Elevated appearance</Text>
  </Card>
</Row>

Card Shapes

rounded is the default. Use pill for fully rounded corners or sharp for none.

Rounded

Default style

Pill

Fully rounded

Sharp

No radius

<Row flexWrap>
  <Card>
    <Title>Rounded</Title>
    <Text>Default style</Text>
  </Card>
  <Card pill>
    <Title>Pill</Title>
    <Text>Fully rounded</Text>
  </Card>
  <Card sharp>
    <Title>Sharp</Title>
    <Text>No radius</Text>
  </Card>
</Row>

Use CardHeader, CardBody, and CardFooter to give a card explicit structural regions. When any sub-component is present the parent Card switches to compound mode and the sub-components own padding.

Settings

Active

Configure your preferences below. The body grows to fill available space.

<Card>
  <CardHeader>
    <Title>Settings</Title>
    <Badge success filled>Active</Badge>
  </CardHeader>
  <CardBody>
    <Text>Configure your preferences below. The body grows to fill available space.</Text>
  </CardBody>
  <CardFooter>
    <Button secondary>Cancel</Button>
    <Button filled>Save</Button>
  </CardFooter>
</Card>

Responsive Layout

Use row for horizontal layout and mobileCol or tabletCol to switch to column on smaller screens.

Product Image

Visual content area

Product Details

This layout switches to column on tablets and below. Resize to see the effect.

<Card row tabletCol>
  <Col>
    <Title>Product Image</Title>
    <Text secondary>Visual content area</Text>
  </Col>
  <Col>
    <Title>Product Details</Title>
    <Text>This layout switches to column on tablets and below. Resize to see the effect.</Text>
  </Col>
</Card>

Nested Cards

Cards can be nested. Pair a secondary or tertiary inner card with the default primary outer card to create clear visual hierarchy.

Account

Manage the resources tied to your workspace.

Storage

4.2 GB of 10 GB used

Members

3 active collaborators

<Card>
  <Title>Account</Title>
  <Text>Manage the resources tied to your workspace.</Text>
  <Card secondary>
    <Title sm>Storage</Title>
    <Text sm>4.2 GB of 10 GB used</Text>
  </Card>
  <Card secondary>
    <Title sm>Members</Title>
    <Text sm>3 active collaborators</Text>
  </Card>
</Card>

<Row flexWrap>
  <Card href="#services" filled>
    <Title filled>Services</Title>
    <Text filled>Click to navigate</Text>
  </Card>
  <Card href="#pricing" secondary filled>
    <Title secondary filled>Pricing</Title>
    <Text secondary filled>View our plans</Text>
  </Card>
  <Card href="https://github.com" target="_blank" rel="noopener noreferrer">
    <Title>External Link</Title>
    <Text>Opens in new tab</Text>
  </Card>
</Row>

Next.js Link Integration

Use the tag prop to render the card as a Next.js Link for client-side navigation.

import Link from 'next/link';
import { Card, Title, Text } from '@vaneui/ui';

<Card href="/docs" tag={Link}>
  <Title>Documentation</Title>
  <Text>Browse component guides and API reference.</Text>
</Card>

Card Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance	✓	Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`desktopCol`	Breakpoint		Switch to column layout on desktop and below (max-desktop: 80rem)
`mobileCol`	Breakpoint		Switch to column layout on mobile and below (max-mobile: 48rem)
`tabletCol`	Breakpoint		Switch to column layout on tablet and below (max-tablet: 64rem)
`flex1`	Flex		Take up remaining space (= `flex-1`, i.e. `flex: 1 1 0%`)
`flexAuto`	Flex		Grow but respect intrinsic size (= `flex-auto`, i.e. `flex: 1 1 auto`)
`flexNone`	Flex		Don't grow and don't shrink (= `flex-none`, i.e. `flex: none`)
`noPadding`	Padding		Disable internal padding
`padding`	Padding	✓	Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`pill`	Shape		Fully rounded corners (circular)
`rounded`	Shape	✓	Medium rounded corners (default)
`sharp`	Shape		No rounded corners (square)
`noShrink`	Shrink		Prevent the flex item from shrinking below its content size (= `shrink-0`)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left
`textRight`	Text Align		Align text to right
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border	✓	Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border		Disable all borders
`cursorDefault`	Cursor		Default cursor - standard arrow
`cursorMove`	Cursor		Move cursor - indicates draggable element
`cursorNone`	Cursor		No cursor - hides the cursor
`cursorNotAllowed`	Cursor		Not-allowed cursor - indicates disabled state
`cursorPointer`	Cursor		Pointer cursor - indicates clickable element
`cursorText`	Cursor		Text cursor - indicates selectable text
`cursorWait`	Cursor		Wait cursor - indicates loading/processing
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display	✓	Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`column`	Flex Direction	✓	Flex direction column (vertical)
`columnReverse`	Flex Direction		Flex direction column-reverse
`row`	Flex Direction		Flex direction row (horizontal)
`rowReverse`	Flex Direction		Flex direction row-reverse
`focusVisible`	Focus Visible		Enable focus-visible outline
`noFocusVisible`	Focus Visible		Disable focus-visible outline
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`reverse`	Reverse		Reverse the order of children
`noRing`	Ring		Disable focus ring
`ring`	Ring		Enable focus ring
`noShadow`	Shadow		Disable drop shadow
`shadow`	Shadow		Enable drop shadow
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint
`flexNoWrap`	Wrap		Force flex items to stay on single line (may overflow)
`flexWrap`	Wrap		Allow flex items to wrap to new lines when container is too narrow
`flexWrapReverse`	Wrap		Wrap flex items in reverse order (last items wrap first)