# {Component name}

{Brief 1 sentence overview}
_Example. Accordion is vertically-stacked list that allows users to expand and collapse additional content_

# Overview

## {Variant 1 (Default)}

{Description of component's variants and what are they for with a picture or actual component}

## {Variant 2}

{Description of component's variants and what are they for with a picture or actual component}

## {Variant ..X}

{Description of component's variants and what are they for with a picture or actual component}

## Accessibility

To ensure that usage of this component complies with accessibility guidelines:

- {Action point 1} _Example. Provide descriptive label for accordion header_
- {Action point 2} _Example. Be aware that embedding lengthy content in an accordion can be disorienting._
- {Action point ..X} ...

This component has compliance with WCAG guidelines by:
{Explain what component features were created to ensure accessability}

- {Feature 1} _Example. Component supports keyboard interaction._
- {Feature 2} _Example. Component supports ARIA tags for accessability_
- {Feature ..X} ...

# Guidelines

## Use When

- {Use case 1} Example. Providing users more content within the same layout
- {Use case 2} Example. Displaying content that is directly related, or supplemental, to the main subject of the page
- {Use case ..X} ...

## Don't Use When

- {Innapropriate usage case 1} _Example. Linking a title to another page. Instead, use [link](https://examplelink12rwrfkcvjhfndj.com)_
- {Innapropriate usage case 2} _Example. Designing with sparse content. Instead, use [list](https://examplelink12rwrfkcvjhfndj.com)_
- {Innapropriate usage case ..X} _Example. Content is lengthy. Instead, use [tabs](https://examplelink12rwrfkcvjhfndj.com)_

## {Component specific notes}

{Points about component's background, type of allowed content, positionting, nesting, etc}

## Responsiveness

{Mention how responsive is the component and which breakpoints are utilized for responsiveness}

## Code example

{Code snippet with usage and comment}

## Props API

{Generated by storybook}

## Additional storybook page with knobs

{Connect storybook knobs to the components to create a component's playground page }