import {
  MiniEventCardDemo,
  NewsCardDemo,
  EventDescriptionCardDemo,
  EventCardDemo,
  TeamMemberDemo
} from "../components/playground";

# Playground

## `<MiniEventCard />`

The `<MiniEventCard />` component has a collapsible description, and it is used
on the events page. It uses the `<details>` tag and works without JS!

<MiniEventCardDemo />

---

## `<NewsCard />`

unavailable

<NewsCardDemo />

---

## `<EventDescriptionCard />`

The `<EventDescriptionCard />` component is used on the home page, and uses the
`<Button />` and `<EventSetting />` components.

<EventDescriptionCardDemo />

---

## `<EventCard />`

The `<EventCard />` component is used on the events page, and uses the
`<Button />` and `<EventSetting />` components.

<EventCardDemo />

---

## `<TeamMember />`

The `<TeamMember />` component has an image of the team member along with their name and role. 
It is used on the Meet the Team page for non executive members.

<TeamMemberDemo />