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

# Details Styling

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

The following style variants are supported by Details:

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

### <a id="filled"></a>Filled

The `filled` variant makes the component’s boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.

**Lit** — `details-filled.ts`

```typescript
return html`
  <vaadin-details summary="Members (8)" opened theme="filled">
    <ul>
      <li>Blake Martin</li>
      <li>Caroline Clark</li>
      <li>Avery Torres</li>
      <li>Khloe Scott</li>
      <li>Camila Fisher</li>
      <li>Gavin Lewis</li>
      <li>Isabella Powell</li>
      <li>Zoe Wilson</li>
    </ul>
  </vaadin-details>
`;
```

**Flow** — `DetailsFilled.java`

```java
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
        new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
        new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
        new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
        new ListItem("Zoe Wilson"));

Details details = new Details("Members (8)", content);
details.setOpened(true);
details.addThemeVariants(DetailsVariant.FILLED);

add(details);
```

**React** — `details-filled.tsx`

```tsx
<Details summary="Members (8)" opened theme="filled">
  <ul>
    <li>Blake Martin</li>
    <li>Caroline Clark</li>
    <li>Avery Torres</li>
    <li>Khloe Scott</li>
    <li>Camila Fisher</li>
    <li>Gavin Lewis</li>
    <li>Isabella Powell</li>
    <li>Zoe Wilson</li>
  </ul>
</Details>
```

### <a id="small"></a>Small

Use the `small` variant for compact UIs.

**Lit** — `details-small.ts`

```typescript
return html`
  <vaadin-details summary="Members (8)" opened theme="small">
    <ul>
      <li>Blake Martin</li>
      <li>Caroline Clark</li>
      <li>Avery Torres</li>
      <li>Khloe Scott</li>
      <li>Camila Fisher</li>
      <li>Gavin Lewis</li>
      <li>Isabella Powell</li>
      <li>Zoe Wilson</li>
    </ul>
  </vaadin-details>
`;
```

**Flow** — `DetailsSmall.java`

```java
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
        new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
        new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
        new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
        new ListItem("Zoe Wilson"));

Details details = new Details("Members (8)", content);
details.setOpened(true);
details.addThemeVariants(DetailsVariant.SMALL);

add(details);
```

**React** — `details-small.tsx`

```tsx
<Details summary="Members (8)" opened theme="small">
  <ul>
    <li>Blake Martin</li>
    <li>Caroline Clark</li>
    <li>Avery Torres</li>
    <li>Khloe Scott</li>
    <li>Camila Fisher</li>
    <li>Gavin Lewis</li>
    <li>Isabella Powell</li>
    <li>Zoe Wilson</li>
  </ul>
</Details>
```

### <a id="reverse"></a>Reverse

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

**Lit** — `details-reverse.ts`

```typescript
return html`
  <vaadin-details summary="Members (8)" opened theme="reverse">
    <ul>
      <li>Blake Martin</li>
      <li>Caroline Clark</li>
      <li>Avery Torres</li>
      <li>Khloe Scott</li>
      <li>Camila Fisher</li>
      <li>Gavin Lewis</li>
      <li>Isabella Powell</li>
      <li>Zoe Wilson</li>
    </ul>
  </vaadin-details>
`;
```

**Flow** — `DetailsReverse.java`

```java
UnorderedList content = new UnorderedList(new ListItem("Blake Martin"),
        new ListItem("Caroline Clark"), new ListItem("Avery Torres"),
        new ListItem("Khloe Scott"), new ListItem("Camila Fisher"),
        new ListItem("Gavin Lewis"), new ListItem("Isabella Powell"),
        new ListItem("Zoe Wilson"));

Details details = new Details("Members (8)", content);
details.setOpened(true);
details.addThemeVariants(DetailsVariant.REVERSE);

add(details);
```

**React** — `details-reverse.tsx`

```tsx
<Details summary="Members (8)" opened theme="reverse">
  <ul>
    <li>Blake Martin</li>
    <li>Caroline Clark</li>
    <li>Avery Torres</li>
    <li>Khloe Scott</li>
    <li>Camila Fisher</li>
    <li>Gavin Lewis</li>
    <li>Isabella Powell</li>
    <li>Zoe Wilson</li>
  </ul>
</Details>
```

## <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-details-summary-background`    | Aura         |
| `--vaadin-details-summary-border-color`  | Aura         |
| `--vaadin-details-summary-border-radius` | Aura         |
| `--vaadin-details-summary-border-width`  | Aura         |
| `--vaadin-details-summary-font-size`     | Aura         |
| `--vaadin-details-summary-font-weight`   | Aura         |
| `--vaadin-details-summary-gap`           | Aura         |
| `--vaadin-details-summary-height`        | Aura         |
| `--vaadin-details-summary-padding`       | Aura         |
| `--vaadin-details-summary-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-details`

### <a id="states"></a>States

- Opened panel

  `vaadin-details[opened]`

- Disabled panel

  `vaadin-details[disabled]`

- Focused panel

  `vaadin-details[focused]`

- Panel with tooltip

  `vaadin-details[has-tooltip]`

- Keyboard focused panel

  `vaadin-details[focus-ring]`

### <a id="summary"></a>Summary

- Panel header (a.k.a. summary)

  `vaadin-details-summary`

- Toggle

  `vaadin-details-summary::part(toggle)`

- Toggle icon

  `vaadin-details-summary::part(toggle)::before`

- Summary content wrapper

  `vaadin-details-summary::part(content)`

- Opened details summary

  `vaadin-details-summary[opened]`

- Disabled details summary

  `vaadin-details-summary[disabled]`

- Focused details summary

  `vaadin-details-summary[focused]`

- Keyboard focused details summary

  `vaadin-details-summary[focus-ring]`

### <a id="content"></a>Content

- Collapsible content wrapper

  `vaadin-details::part(content)`