feat: create sass-utilities-api-section shortcode

- use it in the Overflow doc as example
twbs · Mar 7, 2024 · 7640243 · 7640243
1 parent 3915914
commit 7640243
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md
@@ -92,8 +92,6 @@ Using Sass variables, you may customize the overflow utilities by changing the `
 
 ## CSS
 
-### Sass utilities API
-
-Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
-
-{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
+{{< sass-utilities-api-section title="Overflow" name="utils-overflow" file="scss/_utilities.scss" >}}
+  {{% docsref urlPath="/utilities/api#using-the-api/" %}}
+{{< /sass-utilities-api-section >}}
diff --git a/site/layouts/shortcodes/sass-utilities-api-section.html b/site/layouts/shortcodes/sass-utilities-api-section.html
@@ -0,0 +1,7 @@
+<h3>Sass utilities API</h3>
+
+<p>
+  {{ index .Params.title }} utilities are declared in our utilities API in <code>scss/_utilities.scss</code>. <a href="{{ replaceRE "(\\s)" "" .Inner }}">Learn how to use the utilities API.</a>
+</p>
+
+{{- partial "scss-docs" . -}}