Details classes are created to enhance the native behaviors of <details>
.
Use .details-overlay
to expand the click area of <summary>
to cover the full screen, so user can click anywhere on a page to close <details>
.
<details class="details-overlay"><summary class="btn">More</summary><div class="border p-3 mt-2">Hidden text</div></details>
Use .details-overlay-dark
darken the click area overlay. Useful for modals.
<details class="details-overlay details-overlay-dark"><summary class="btn">More</summary><div class="position-relative color-bg-default rounded p-3 mt-2" style="z-index: 112;">Hidden text</div></details>
Use .details-reset
to remove the default caret (that little triangle on the left). You then can add the .dropdown-caret
on the right of the text.
<details class="details-reset"><summary class="btn">More <span class="dropdown-caret"></summary><div class="border p-3 mt-2">Hidden text</div></details>
You can add .btn
and .btn-*
classes to any
<summary>
element so that it gains the appearance of a button, and
selected/active styles when the parent
<details>
element is open.
<details><summary class="btn btn-primary">More</summary><div class="border p-3 mt-2">Hidden text</div></details><details class="details-reset mt-3"><summary class="btn-link">More <span class="dropdown-caret"></summary><div class="border p-3 mt-2">Hidden text</div></details>