details group
The detailsGroup
component is a simple wrapper component, if there is the need for multiple details
.
component variations
details group default
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.
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.
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.
<div class="m-details-group">
<details class="a-details">
<summary class="highlight">
<i class="a-icon a-details__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 class="a-details">
<summary class="highlight">
<i class="a-icon a-details__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 class="a-details">
<summary class="highlight">
<i class="a-icon a-details__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>
</div>
details group small
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.
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.
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.
<div class="m-details-group">
<details class="a-details a-details--small">
<summary class="highlight">
<i class="a-icon a-details__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 class="a-details a-details--small">
<summary class="highlight">
<i class="a-icon a-details__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 class="a-details a-details--small">
<summary class="highlight">
<i class="a-icon a-details__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>
</div>
additional content
styles SCSS
.m-details-group {
display: grid;
gap: 2rem;
}