> Markdown version of [Styling](https://vaadin.com/docs/latest/components/accordion/styling). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# Accordion Styling

## <a id="style-variants"></a>Style Variants

Accordion supports the following style variants. Variants must be applied to individual panels, not to the Accordion itself.

| Variant      | Description                                       | Supported by |
| ------------ | ------------------------------------------------- | ------------ |
| `filled`     | Makes the panel’s boundaries visible              | Aura, Lumo   |
| `no-padding` | Removes the padding from the panel content area   | Aura         |
| `small`      | Used for compact UIs                              | Aura, Lumo   |
| `reverse`    | Places the toggle icon after the summary contents | Aura, Lumo   |

### <a id="filled-panels"></a>Filled Panels

The `filled` style variant makes the panel’s boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.

**Lit** — `accordion-filled-panels.ts`

```html
<vaadin-accordion>
  <vaadin-accordion-panel summary="Personal information" theme="filled">
    <vaadin-vertical-layout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </vaadin-vertical-layout>
  </vaadin-accordion-panel>
</vaadin-accordion>
```

**Flow** — `AccordionFilledPanels.java`

```java
Accordion accordion = new Accordion();
AccordionPanel personalInfoPanel = accordion.add("Personal information",
        personalInformationLayout);
personalInfoPanel.addThemeVariants(DetailsVariant.FILLED);
```

**React** — `accordion-filled-panels.tsx`

```tsx
<Accordion>
  <AccordionPanel summary="Personal information" theme="filled">
    <VerticalLayout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Billing address" theme="filled">
    <VerticalLayout>
      <span>4027 Amber Lake Canyon</span>
      <span>72333-5884 Cozy Nook</span>
      <span>Arkansas</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Payment" theme="filled">
    <VerticalLayout>
      <span>MasterCard</span>
      <span>1234 5678 9012 3456</span>
      <span>Expires 06/21</span>
    </VerticalLayout>
  </AccordionPanel>
</Accordion>
```

### <a id="no-padding-panels"></a>No-Padding Panels

The `no-padding` style variant removes the padding from the panel content area. This is useful when the content needs to extend to the edges of the panel.

**Lit** — `accordion-no-padding-panels.ts`

```html
<vaadin-accordion>
  <vaadin-accordion-panel summary="Personal information" theme="no-padding">
    <vaadin-vertical-layout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </vaadin-vertical-layout>
  </vaadin-accordion-panel>
</vaadin-accordion>
```

**Flow** — `AccordionNoPaddingPanels.java`

```java
Accordion accordion = new Accordion();
AccordionPanel personalInfoPanel = accordion.add("Personal information",
        personalInformationLayout);
personalInfoPanel.addThemeVariants(DetailsVariant.AURA_NO_PADDING);
```

**React** — `accordion-no-padding-panels.tsx`

```tsx
<Accordion>
  <AccordionPanel summary="Personal information" theme="no-padding">
    <VerticalLayout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Billing address" theme="no-padding">
    <VerticalLayout>
      <span>4027 Amber Lake Canyon</span>
      <span>72333-5884 Cozy Nook</span>
      <span>Arkansas</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Payment" theme="no-padding">
    <VerticalLayout>
      <span>MasterCard</span>
      <span>1234 5678 9012 3456</span>
      <span>Expires 06/21</span>
    </VerticalLayout>
  </AccordionPanel>
</Accordion>
```

### <a id="small-panels"></a>Small Panels

Use the `small` style variant for compact UIs.

**Lit** — `accordion-small-panels.ts`

```html
<vaadin-accordion>
  <vaadin-accordion-panel summary="Personal information" theme="small">
    <vaadin-vertical-layout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </vaadin-vertical-layout>
  </vaadin-accordion-panel>
</vaadin-accordion>
```

**Flow** — `AccordionSmallPanels.java`

```java
AccordionPanel paymentPanel = accordion.add("Payment", paymentLayout);
paymentPanel.addThemeVariants(DetailsVariant.SMALL);
```

**React** — `accordion-small-panels.tsx`

```tsx
<Accordion>
  <AccordionPanel summary="Personal information" theme="small">
    <VerticalLayout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Billing address" theme="small">
    <VerticalLayout>
      <span>4027 Amber Lake Canyon</span>
      <span>72333-5884 Cozy Nook</span>
      <span>Arkansas</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Payment" theme="small">
    <VerticalLayout>
      <span>MasterCard</span>
      <span>1234 5678 9012 3456</span>
      <span>Expires 06/21</span>
    </VerticalLayout>
  </AccordionPanel>
</Accordion>
```

### <a id="reverse-panels"></a>Reverse Panels

The `reverse` style variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content.

**Lit** — `accordion-reverse-panels.ts`

```html
<vaadin-accordion>
  <vaadin-accordion-panel summary="Personal information" theme="reverse">
    <vaadin-vertical-layout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </vaadin-vertical-layout>
  </vaadin-accordion-panel>
</vaadin-accordion>
```

**Flow** — `AccordionReversePanels.java`

```java
AccordionPanel paymentPanel = accordion.add("Payment", paymentLayout);
paymentPanel.addThemeVariants(DetailsVariant.REVERSE);
```

**React** — `accordion-reverse-panels.tsx`

```tsx
<Accordion>
  <AccordionPanel summary="Personal information" theme="reverse">
    <VerticalLayout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Billing address" theme="reverse">
    <VerticalLayout>
      <span>4027 Amber Lake Canyon</span>
      <span>72333-5884 Cozy Nook</span>
      <span>Arkansas</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Payment" theme="reverse">
    <VerticalLayout>
      <span>MasterCard</span>
      <span>1234 5678 9012 3456</span>
      <span>Expires 06/21</span>
    </VerticalLayout>
  </AccordionPanel>
</Accordion>
```

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/latest/styling/styling-components.md#component-style-properties) for more information on style properties.

| Property                                   | Supported by |
| ------------------------------------------ | ------------ |
| `--vaadin-accordion-heading-background`    | Aura         |
| `--vaadin-accordion-heading-border-color`  | Aura         |
| `--vaadin-accordion-heading-border-radius` | Aura         |
| `--vaadin-accordion-heading-border-width`  | Aura         |
| `--vaadin-accordion-heading-font-size`     | Aura         |
| `--vaadin-accordion-heading-font-weight`   | Aura         |
| `--vaadin-accordion-heading-gap`           | Aura         |
| `--vaadin-accordion-heading-height`        | Aura         |
| `--vaadin-accordion-heading-padding`       | Aura         |
| `--vaadin-accordion-heading-text-color`    | Aura         |

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/latest/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

- Root element

  `vaadin-accordion`

### <a id="panels"></a>Panels

- Panel element

  `vaadin-accordion-panel`

- Opened panel

  `vaadin-accordion-panel[opened]`

- Disabled panel

  `vaadin-accordion-panel[disabled]`

- Focused panel

  `vaadin-accordion-panel[focused]`

- Keyboard focused panel

  `vaadin-accordion-panel[focus-ring]`

- Panel with tooltip

  `vaadin-accordion-panel[has-tooltip]`

- Panel body content wrapper

  `vaadin-accordion-panel::part(content)`

### <a id="panel-heading"></a>Panel Heading

- Heading element

  `vaadin-accordion-heading`

- Toggle

  `vaadin-accordion-heading::part(toggle)`

- Toggle icon

  `vaadin-accordion-heading::part(toggle)::before`

- Panel header content wrapper

  `vaadin-accordion-heading::part(content)`