---
name: MeetingCard
menu: Components
route: /components/MeetingCard
---

import MeetingCard from './';
import { Playground, Props } from 'docz';
import {
	meetingCard1,
	meetingCard2,
	meetingCard3,
	meetingCard4,
	meetingCardMedium,
	meetingCardSmall,
	meetingCardMedium2,
	meetingCardSmall2,
	meetingCardMedium3,
	meetingCardSmall3,
	meetingCardMedium4,
	meetingCardSmall4,
	stacked1,
	stacked2,
	stacked3,
	stacked4,
	stacked5,
	stacked6,
	stacked7,
	stacked8,
	stacked9,
} from './items.js';

# MeetingCard

This component renders an HTML `<div>` and passes along all props.

## API
<Props of={MeetingCard} />

## Examples all Large size

## Not in progress yet

<Playground>
	<MeetingCard options={meetingCard1} onCardClick={() => console.log('CARD CLICKED')} onEditClick={() => console.log('CARD EDITED')} />
</Playground>

## Finished

<Playground>
	<MeetingCard options={meetingCard2}/>
</Playground>

## In progress

<Playground>
	<MeetingCard options={meetingCard3}/>
</Playground>

## From google calendar

<Playground>
	<MeetingCard options={meetingCard4}/>
</Playground>

## Medium size Not in progress yet

<Playground>
	<MeetingCard options={meetingCardMedium}/>
</Playground>

## Small size Not in progress yet

<Playground>
	<MeetingCard options={meetingCardSmall}/>
</Playground>

## Medium size Finished

<Playground>
	<MeetingCard options={meetingCardMedium2}/>
</Playground>

## Small size Finished

<Playground>
	<MeetingCard options={meetingCardSmall2}/>
</Playground>

## Medium size In progress

<Playground>
	<MeetingCard options={meetingCardMedium3}/>
</Playground>

## Small size In progress

<Playground>
	<MeetingCard options={meetingCardSmall3}/>
</Playground>

## Medium size From google calendar

<Playground>
	<MeetingCard options={meetingCardMedium4}/>
</Playground>

## Small size From google calendar

<Playground>
	<MeetingCard options={meetingCardSmall4}/>
</Playground>

## Large size Stacked 2

<Playground>
	<div style={{ display: 'flex'}}>
		<MeetingCard options={meetingCard1} styles={{width: '145'}}/>
    	<MeetingCard options={meetingCard2} styles={{width: '145'}}/>
    	<MeetingCard options={meetingCard3} styles={{width: '145'}}/>
    	<MeetingCard options={meetingCard4} styles={{width: '145'}}/>
	</div>
</Playground>

## Large size Stacked 3

<Playground>
	<div style={{ display: 'flex'}}>
		<MeetingCard options={meetingCard1} styles={{width: '96'}}/>
    	<MeetingCard options={meetingCard2} styles={{width: '96'}}/>
    	<MeetingCard options={meetingCard3} styles={{width: '96'}}/>
    	<MeetingCard options={meetingCard4} styles={{width: '96'}}/>
	</div>
</Playground>

## Large size Stacked 4

<Playground>
	<div style={{ display: 'flex'}}>
		<MeetingCard options={meetingCard1} styles={{width: '72'}}/>
    	<MeetingCard options={meetingCard2} styles={{width: '72'}}/>
    	<MeetingCard options={meetingCard3} styles={{width: '72'}}/>
    	<MeetingCard options={meetingCard4} styles={{width: '72'}}/>
	</div>
</Playground>

## Medium size Stacked 2

<Playground>
	<div style={{ display: 'flex'}}>
	<MeetingCard options={stacked8} styles={{width: '145'}}/>
	<MeetingCard options={stacked2} styles={{width: '145'}}/>
	<MeetingCard options={stacked3} styles={{width: '145'}}/>
	<MeetingCard options={stacked4} styles={{width: '145'}}/>
	</div>
</Playground>

## Medium size Stacked 3
<Playground>
	<div style={{ display: 'flex'}}>
	<MeetingCard options={stacked8} styles={{width: '96'}}/>
	<MeetingCard options={stacked2} styles={{width: '96'}}/>
	<MeetingCard options={stacked3} styles={{width: '96'}}/>
	<MeetingCard options={stacked4} styles={{width: '96'}}/>
	</div>
</Playground>

## Medium size Stacked 4
<Playground>
	<div style={{ display: 'flex'}}>
	<MeetingCard options={stacked8} styles={{width: '72'}}/>
	<MeetingCard options={stacked2} styles={{width: '72'}}/>
	<MeetingCard options={stacked3} styles={{width: '72'}}/>
	<MeetingCard options={stacked4} styles={{width: '72'}}/>
	</div>
</Playground>

## Small size Stacked 2

<Playground>
	<div style={{ display: 'flex'}}>
	<MeetingCard options={stacked9} styles={{width: '145'}}/>
	<MeetingCard options={stacked5} styles={{width: '145'}}/>
	<MeetingCard options={stacked6} styles={{width: '145'}}/>
	<MeetingCard options={stacked7} styles={{width: '145'}}/>
	</div>
</Playground>

## Small size Stacked 3
<Playground>
	<div style={{ display: 'flex'}}>
	<MeetingCard options={stacked9} styles={{width: '96'}}/>
	<MeetingCard options={stacked5} styles={{width: '96'}}/>
	<MeetingCard options={stacked6} styles={{width: '96'}}/>
	<MeetingCard options={stacked7} styles={{width: '96'}}/>
	</div>
</Playground>

## Small size Stacked 4
<Playground>
	<div style={{ display: 'flex'}}>
	<MeetingCard options={stacked9} styles={{width: '72'}}/>
	<MeetingCard options={stacked5} styles={{width: '72'}}/>
	<MeetingCard options={stacked6} styles={{width: '72'}}/>
	<MeetingCard options={stacked7} styles={{width: '72'}}/>
	</div>
</Playground>