Accordion

Accordion item 1

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.

Accordion item 2

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.

Accordion item 3

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.

HTML CSS

<div class="accordion">
  <details class="accordion__item">
    <summary class="accordion__summary">
      Accordion item 1
      <svg class="accordion__summaryIcon" width="18" height="10" fill="none">
        <use href="/library/svg-sprites.svg#accordion" />
      </svg>
    </summary>
    <div class="accordion__details">
      Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
      Velit officia consequat duis enim velit mollit. Exercitation veniam
      consequat sunt nostrud amet.
    </div>
  </details>
  <details class="accordion__item">
    <summary class="accordion__summary">
      Accordion item 2
      <svg class="accordion__summaryIcon" width="18" height="10" fill="none">
        <use href="/library/svg-sprites.svg#accordion" />
      </svg>
    </summary>
  </details>
  <details class="accordion__item">
    <summary class="accordion__summary">
      Accordion item 3
      <svg class="accordion__summaryIcon" width="18" height="10" fill="none">
        <use href="/library/svg-sprites.svg#accordion" />
      </svg>
    </summary>
  </details>
</div>

.accordion {
  color: var(--black);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.accordion__item {
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  padding: 24px 32px 24px 32px;
}

.accordion__item + .accordion__item {
  margin-top: 8px;
}

.accordion__summary {
  position: relative;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  list-style: none;
}
.accordion__summaryIcon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: rotate(180deg);
}

.accordion__item[open] .accordion__summaryIcon {
  transform: rotate(0);
}

.accordion__details {
  color: var(--grey-4);

  font-family: 'Inter';
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 16px 0px 8px 0px;
}

.accordion_fullWidth {
  flex-grow: 1;
}
.accordion_preview {
  margin: 20px;
  width: 100%;
}