# Accordions
> Cherry accordion design specifications with card and inline variants.
Source: https://cherry.al/accordions
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Accordions
Accordions show and hide content behind a clickable title, keeping dense pages scannable. The chevron rotates to mirror the open state, and the open and close motion is animated.
## States
When customizing your designs, consider all the different states that accordions can have:
1. **Normal** - The default appearance of the accordion.
2. **Hover** `:hover` - When the user hovers the cursor over the title.
3. **Focus** - When the accordion title gains focus.
4. **Open / Closed** - The content expands or collapses, and the chevron rotates to match.
Ensure that your designs account for all these states to provide a consistent
and user-friendly experience.
## Variations
| Variation | Open | Closed |
| --------- | ---- | ------ |
| Card | Yes | Yes |
| Inline | Yes | Yes |
- **Card** - A bordered, rounded surface with generous padding. Use it when the accordion stands on its own.
- **Inline** - No border, radius, or side padding. Use it inside cards, lists, or other surfaces that already provide their own container. Enabled in code with the `$inline` prop.
In code, both variations use the same `Accordion` component:
```jsx
import { Accordion } from "cherry-styled-components";
Content;
```
The accordion manages its own open state and starts closed; use `defaultOpen` to start it open, or pass `open` together with `onToggle` to control it from the parent.
Ready to build? See the [Accordion](/code/accordion) component docs for props
and usage examples.
Accordions can be found in the Figma Template in the Components page.