Content and display

import { Card } from '@cskn/ui';

<Card>Bordered, padded</Card>
<Card elevated padded={24}>Shadow instead of a border</Card>

import { List, ListItem, Avatar, Badge, Icon } from '@cskn/ui';

<List>
  <ListItem leading={<Avatar name="Ada" src={ada.picture} />} title="Ada" subtitle="12 books" onClick={openAda} />
  <ListItem
    leading={<Icon name="star-filled" />}
    title="Favorites"
    trailing={<Badge tone="primary">18</Badge>}
    href="/favorites"
  />
</List>

<Avatar src={user.picture} name="Ada Lovelace" size={44} />

<Badge tone="danger">3</Badge>
<Badge tone="success" dot />

<Divider spacing={12} />
<Divider vertical />

import { Grid, StatTile, Icon } from '@cskn/ui';

<Grid cols={2} gap={12}>
  <StatTile value="128" label="Films" />
  <StatTile value="8.4" label="Average" hint="Last 30 days" adornment={<Icon name="star-filled" size={16} />} />
</Grid>

import { Accordion, AccordionItem } from '@cskn/ui';

<Accordion defaultOpen={['shipping']}>
  <AccordionItem id="shipping" title="Shipping">Ships in two days.</AccordionItem>
  <AccordionItem id="returns" title="Returns">Thirty days, no questions.</AccordionItem>
</Accordion>

import { Callout } from '@cskn/ui';

<Callout tone="danger" title="Couldn't save">Check your connection and try again.</Callout>

import { EmptyState, Button } from '@cskn/ui';

<EmptyState
  icon="image"
  title="Nothing here yet"
  description="Add your first photo to get started."
  action={<Button onClick={add}>Add photo</Button>}
/>