VaneUI

VaneUI

Layout Components

Card

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

Basic Card

A simple card container.

Card Title

This is a basic card with some content inside.

react-icon

BasicCard.tsx

<Card>
  <Text semibold>Card Title</Text>
  <Text>This is a basic card with some content inside.</Text>
</Card>

Card Sizes

Cards come in different sizes.

Card xs

Content for xs size

Card sm

Content for sm size

Card md

Content for md size

Card lg

Content for lg size

Card xl

Content for xl size

react-icon

CardSizes.tsx

<Row flexWrap>
  <Card xs>
    <Text semibold>Card xs</Text>
    <Text>Content for xs size</Text>
  </Card>
  <Card sm>
    <Text semibold>Card sm</Text>
    <Text>Content for sm size</Text>
  </Card>
  <Card md>
    <Text semibold>Card md</Text>
    <Text>Content for md size</Text>
  </Card>
  <Card lg>
    <Text semibold>Card lg</Text>
    <Text>Content for lg size</Text>
  </Card>
  <Card xl>
    <Text semibold>Card xl</Text>
    <Text>Content for xl size</Text>
  </Card>
</Row>

Card Appearances

Cards can have different background appearances.

default Card

Card with default background

accent Card

Card with accent background

primary Card

Card with primary background

secondary Card

Card with secondary background

tertiary Card

Card with tertiary background

success Card

Card with success background

danger Card

Card with danger background

warning Card

Card with warning background

info Card

Card with info background

react-icon

CardAppearances.tsx

<Row flexWrap>
  <Card default>
    <Text semibold>default Card</Text>
    <Text>Card with default background</Text>
  </Card>
  <Card accent>
    <Text semibold>accent Card</Text>
    <Text>Card with accent background</Text>
  </Card>
  <Card primary>
    <Text semibold>primary Card</Text>
    <Text>Card with primary background</Text>
  </Card>
  <Card secondary>
    <Text semibold>secondary Card</Text>
    <Text>Card with secondary background</Text>
  </Card>
  <Card tertiary>
    <Text semibold>tertiary Card</Text>
    <Text>Card with tertiary background</Text>
  </Card>
  <Card success>
    <Text semibold>success Card</Text>
    <Text>Card with success background</Text>
  </Card>
  <Card danger>
    <Text semibold>danger Card</Text>
    <Text>Card with danger background</Text>
  </Card>
  <Card warning>
    <Text semibold>warning Card</Text>
    <Text>Card with warning background</Text>
  </Card>
  <Card info>
    <Text semibold>info Card</Text>
    <Text>Card with info background</Text>
  </Card>
</Row>

Card Borders

Control card border appearance.

Card border

Card with border

Card noBorder

Card with noBorder

react-icon

CardBorders.tsx

<Row flexWrap>
  <Card border>
    <Text semibold>Card border</Text>
    <Text>Card with border</Text>
  </Card>
  <Card noBorder>
    <Text semibold>Card noBorder</Text>
    <Text>Card with noBorder</Text>
  </Card>
</Row>

Card Shapes

Cards support different border radius styles.

Card rounded

Card with rounded corners

Card sharp

Card with sharp corners

react-icon

CardShapes.tsx

<Row flexWrap>
  <Card rounded>
    <Text semibold>Card rounded</Text>
    <Text>Card with rounded corners</Text>
  </Card>
  <Card sharp>
    <Text semibold>Card sharp</Text>
    <Text>Card with sharp corners</Text>
  </Card>
</Row>

Card with Shadow

Cards can have drop shadows.

Card shadow

Card with shadow

Card noShadow

Card with noShadow

react-icon

CardwithShadow.tsx

<Row flexWrap>
  <Card shadow>
    <Text semibold>Card shadow</Text>
    <Text>Card with shadow</Text>
  </Card>
  <Card noShadow>
    <Text semibold>Card noShadow</Text>
    <Text>Card with noShadow</Text>
  </Card>
</Row>

Card with Ring

Cards can have focus rings.

Card ring

Card with ring

Card noRing

Card with noRing

react-icon

CardwithRing.tsx

<Row flexWrap>
  <Card ring>
    <Text semibold>Card ring</Text>
    <Text>Card with ring</Text>
  </Card>
  <Card noRing>
    <Text semibold>Card noRing</Text>
    <Text>Card with noRing</Text>
  </Card>
</Row>

Card Padding

Control card internal padding.

Card padding

Card with padding

Card noPadding

Card with noPadding

react-icon

CardPadding.tsx

<Row flexWrap>
  <Card padding>
    <Text semibold>Card padding</Text>
    <Text>Card with padding</Text>
  </Card>
  <Card noPadding>
    <Text semibold>Card noPadding</Text>
    <Text>Card with noPadding</Text>
  </Card>
</Row>

Card Flex Direction

Control the direction of card content.

Column Direction

Content flows vertically

Another line

Row Direction

Content flows horizontally

react-icon

CardFlexDirection.tsx

<Row flexWrap>
  <Card column>
    <Text semibold>Column Direction</Text>
    <Text>Content flows vertically</Text>
    <Text>Another line</Text>
  </Card>
  <Card row>
    <Text semibold>Row Direction</Text>
    <Text>Content flows horizontally</Text>
  </Card>
</Row>

Card with Gap

Control spacing between card content.

Card gap

Content with gap

Another line

Card noGap

Content with noGap

Another line

react-icon

CardwithGap.tsx

<Row flexWrap>
  <Card gap>
    <Text semibold>Card gap</Text>
    <Text>Content with gap</Text>
    <Text>Another line</Text>
  </Card>
  <Card noGap>
    <Text semibold>Card noGap</Text>
    <Text>Content with noGap</Text>
    <Text>Another line</Text>
  </Card>
</Row>