Card

Card description.

Props

Card properties

Property	Description	Type	Default
bordered	Should card have border around it or be entirely flat?	`boolean`	false
elevate	Should the card elevate on the z-index?	`boolean`	false
height	Height of the card	`string`	-
width	Width of the card	`string`	-

Usage

Elevate

import { Button, Card, Image, Text, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Card elevate>
      <Image
        src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
        alt="woman in orange knit cap and blue jacket"
      />
      <Text>John Doe</Text>
      <Button variant="secondary" block pill>
        Follow
      </Button>
    </Card>
  </BrowserWindow>
);

import { Button, Card, Image, Text, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Card elevate>
      <Image
        src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
        alt="woman in orange knit cap and blue jacket"
      />
      <Text>John Doe</Text>
      <Button variant="secondary" block pill>
        Follow
      </Button>
    </Card>
  </BrowserWindow>
);

Bordered

import { Box, Button, Card, Image, Text, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Box>
        <Card>
          <Image
            src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
            alt="woman in orange knit cap and blue jacket"
          />
          <Text>John Doe</Text>
          <Button variant="secondary" block pill>
            Follow
          </Button>
        </Card>
      </Box>
    </Box>
  </BrowserWindow>
);

import { Box, Button, Card, Image, Text, Spacer, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Box>
        <Card>
          <Image
            src="https://source.unsplash.com/V_WBdOLOgJU/400x300"
            alt="woman in orange knit cap and blue jacket"
          />
          <Text>John Doe</Text>
          <Button variant="secondary" block pill>
            Follow
          </Button>
        </Card>
      </Box>
    </Box>
  </BrowserWindow>
);