<details open>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details>
    <summary>Details</summary>
    __ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.
</details>

<details>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<hr class="dotted">

<details class="callout">
    <summary>details.callout</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</p>
</details>

<hr class="dotted">

<details>
    <summary class="bg-green100 t-green600 hover-bg-green150 pad10-tb pad20-rl" style="--summary-marker: '➕'; --summary-marker-rotate: 135deg; --summary-marker-color: #003800; --summary-marker-time: .9s;">Details</summary>
    <div class="bg-green50 pad20">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<hr class="dotted">

<details class="details-group" open name="group42">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group" name="group42">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group" name="group42">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>