details

The details component help disclosing data upon toggling the widget into an "open" state. An heading is obligatory using the summary HTML tag.

If you want to use multiple details, please use the detailsGroup component.
table of content

component variations

details default

Open on blank page
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

<details class="a-details">
  <summary class="highlight">
    <i class="a-icon boschicon-bosch-ic-down"></i>
    Lorem ipsum dolor sit amet
  </summary>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </p>
</details>

details small

Open on blank page
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

<details class="a-details a-details--small">
  <summary class="highlight">
    <i class="a-icon boschicon-bosch-ic-down"></i>
    Lorem ipsum dolor sit amet
  </summary>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </p>
</details>

additional content

styles SCSS

.a-details {
  @include size-m;

  // Hide the native arrow
  summary::-webkit-details-marker {
    display: none;
  }

  summary {
    align-items: center;
    background: var(--integrated__enabled__fill__default);
    color: var(--integrated__enabled__front__default);
    cursor: pointer;
    display: flex;
    padding: 0;

    &:hover {
      color: var(--integrated__enabled__front__hovered);
    }

    &:active {
      color: var(--integrated__enabled__front__pressed);
    }

    &:focus-visible {
      @include focus-outside;
    }
  }

  .a-icon {
    @include size-m;

    margin-right: 0.5rem;
  }

  // Open state
  &[open] {
    .a-icon {
      &::before {
        content: var(--boschicon-bosch-ic-up);
      }
    }
  }

  p {
    margin: 0;
    padding: 0.5rem 0 1rem 1.5rem;
  }

  &--small {
    @include size-s;

    .a-icon {
      @include size-s;

      margin-right: 0.375rem;
    }

    p {
      @include size-s;

      padding-left: 1.125rem;
    }
  }
}