Card

import

import { Card } from '@bone-ui/card'

Basic

Loading...

<Card>A basic card.</Card>

<Card>A basic card.</Card>

LIVE DEMO

Borderless

Loading...

<Box bgGray100 p4> <Card borderNone>A borderless card.</Card> </Box>

<Box bgGray100 p4>
  <Card borderNone>A borderless card.</Card>
</Box>

LIVE DEMO

Shadow

Loading...

<Card shadow borderNone> A card with shadow. </Card>

<Card shadow borderNone>
  A card with shadow.
</Card>

LIVE DEMO

Hoverable

Loading...

<Card shadowMedium--hover>A hoverable card.</Card>

<Card shadowMedium--hover>A hoverable card.</Card>

LIVE DEMO

With title

Loading...

<Card spaceY4 w-400> <Box textLG fontBold> Bone UI </Box> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed voluptatum quae eum fugit earum. </Box> </Card>

<Card spaceY4 w-400>
  <Box textLG fontBold>
    Bone UI
  </Box>
  <Box>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed
    voluptatum quae eum fugit earum.
  </Box>
</Card>

LIVE DEMO

With Divider

Loading...

<Card spaceY4 w-400> <Box textLG fontBold> Bone UI </Box> <Divider></Divider> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed voluptatum quae eum fugit earum. </Box> </Card>

<Card spaceY4 w-400>
  <Box textLG fontBold>
    Bone UI
  </Box>
  <Divider></Divider>
  <Box>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed
    voluptatum quae eum fugit earum.
  </Box>
</Card>

LIVE DEMO

With footer

Loading...

<Card p0 w-400> <Box p4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed voluptatum quae eum fugit earum. </Box> <Divider></Divider> <Box textLG fontBold p4> Bone UI </Box> </Card>

<Card p0 w-400>
  <Box p4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed
    voluptatum quae eum fugit earum.
  </Box>
  <Divider></Divider>
  <Box textLG fontBold p4>
    Bone UI
  </Box>
</Card>

LIVE DEMO

With Image

Loading...

<Card p0 w-200> <Box as="img" w-100p src="https://avatars2.githubusercontent.com/u/2668081" /> <Box p4> <Box textLG fontBold mb2> Bone UI </Box> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed </Box> </Box> </Card>

<Card p0 w-200>
  <Box as="img" w-100p src="https://avatars2.githubusercontent.com/u/2668081" />
  <Box p4>
    <Box textLG fontBold mb2>
      Bone UI
    </Box>
    <Box>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus quis sed
    </Box>
  </Box>
</Card>

LIVE DEMO