readme.md

---
title: Accordion
sidebar: true
---

# Accordion

Accordion component

## Usage

<hy-accordion-container>
  <hy-accordion-item accordiontitle="This is a accordion item 1">
  <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 2">
  <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 3">
  <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
</hy-accordion-container>

```html
<hy-accordion-container>
  <hy-accordion-item accordiontitle="This is a accordion item 1">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 2">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 3">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
</hy-accordion-container>
```

<!-- Auto Generated Below -->

## Properties

| Property         | Attribute        | Description | Type                                                  | Default                     |
| ---------------- | ---------------- | ----------- | ----------------------------------------------------- | --------------------------- |
| `accordiontitle` | `accordiontitle` |             | `string`                                              | `undefined`                 |
| `headerstyle`    | `headerstyle`    |             | `string`                                              | `'common'`                  |
| `variant`        | `variant`        |             | `AccordionVariants.default \| AccordionVariants.mini` | `AccordionVariants.default` |

## Dependencies

### Used by

- [hy-footer-info](../footer/hy-footer-info)

### Depends on

- [hy-icon](../icon)

### Graph

```mermaid
graph TD;
  hy-accordion-item --> hy-icon
  hy-footer-info --> hy-accordion-item
  style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System