diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
index 8975f857..b3e5432e 100644
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@@ -207,21 +207,3 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
 ```
 
 You can also make the expander appear inline by adding `.inline`.
-
-## Using button styles with the details summary element
-
-You can add `.btn` and `.btn-*` classes to any
-[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
-element so that it gains the appearance of a button, and
-selected/active styles when the parent
-[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
-element is open.
-
-```html live
-<details>
-  <summary class="btn btn-block btn-primary">Toggle the content</summary>
-  <p class="mt-2">
-    This content will be toggled.
-  </p>
-</details>
-```
diff --git a/docs/content/utilities/details.md b/docs/content/utilities/details.md
index 0fb139cf..300b944b 100644
--- a/docs/content/utilities/details.md
+++ b/docs/content/utilities/details.md
@@ -8,8 +8,6 @@ bundle: utilities
 
 Details classes are created to enhance the native behaviors of `<details>`.
 
- 
-
 ## Fullscreen click area
 
 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>`.
@@ -17,7 +15,7 @@ Use `.details-overlay` to expand the click area of `<summary>` to cover the full
 ```html live
 <details class="details-overlay">
   <summary class="btn">More</summary>
-  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
+  <div class="border p-3 mt-2">Hidden text</div>
 </details>
 ```
 
@@ -28,6 +26,38 @@ Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
 ```html live
 <details class="details-overlay details-overlay-dark">
   <summary class="btn">More</summary>
-  <div class="position-relative bg-white p-3 border" style="z-index: 100">Hidden text</div>
+  <div class="border p-3 mt-2">Hidden text</div>
+</details>
+```
+
+## Custom caret
+
+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.
+
+```html live
+<details class="details-reset">
+  <summary class="btn">More <span class="dropdown-caret"></summary>
+  <div class="border p-3 mt-2">Hidden text</div>
+</details>
+```
+
+## Using button styles with the details summary element
+
+You can add `.btn` and `.btn-*` classes to any
+[`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
+element so that it gains the appearance of a button, and
+selected/active styles when the parent
+[`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
+element is open.
+
+```html live
+<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>
 ```
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index d572b29a..5b6e8af7 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -200,12 +200,3 @@
     }
   }
 }
-
-.details-reset {
-  // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
-  // Remove marker added by details polyfill
-  > summary::before { display: none; }
-  // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
-}
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index b94cb813..bb3a617a 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -17,3 +17,12 @@
   z-index: 99;
   background: $black-fade-50;
 }
+
+.details-reset {
+  // Remove marker added by the display: list-item browser default
+  > summary { list-style: none; }
+  // Remove marker added by details polyfill
+  > summary::before { display: none; }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker { display: none; }
+}