Use example shortcode for basic examples layout similar to back-quote…

…s (show just markup with clipboard button)

site/assets/scss/_clipboard-js.scss

@@ -42,3 +42,7 @@
   margin-top: 1.25rem;
   margin-right: .75rem;
 }
+
+.btn-example {
+  margin-top: .6rem;
+}

site/content/docs/5.3/docsref.md

@@ -45,6 +45,20 @@ sitemap:
 <div class="test">This is a test.</div>
 {{< /example >}}
 
+{{< example lang="scss" show_preview="false" >}}
+.test {
+  --color: blue;
+  show_preview="false"
+}
+{{< /example >}}
+
+{{< example lang="scss" basic="true" >}}
+.test {
+  --color: blue;
+  basic
+}
+{{< /example >}}
+
 {{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}
 
 {{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}

site/layouts/shortcodes/example.html

@@ -8,6 +8,7 @@
     * show_markup: if the markup should be output in the HTML - default: `true`
     * show_preview: if the preview should be output in the HTML - default: `true`
     * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false`
+    * basic: todo - default: `false`
 */ -}}
 
 {{- $id := .Get "id" -}}
@@ -16,18 +17,19 @@
 {{- $show_markup := .Get "show_markup" | default true -}}
 {{- $show_preview := .Get "show_preview" | default true -}}
 {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}}
+{{- $basic := .Get "basic" | default "false" -}}
 
 {{- $content := .Inner -}}
 
 <div class="bd-example-snippet bd-code-snippet">
-  {{- if eq $show_preview true }}
+  {{- if and (eq $show_preview true) (eq $basic true) }}
   <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{ $content }}
   </div>
-  {{- end }}
+  {{- end -}}
 
-  {{- if eq $show_markup true -}}
-    {{- if eq $show_preview true -}}
+  {{- if (eq $show_markup true) }}
+    {{- if and (eq $show_preview true) (eq $basic "false") -}}
       <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
         <small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
         <div class="d-flex ms-auto">
@@ -41,9 +43,19 @@
       </div>
     {{- end -}}
 
+    {{- if eq $basic "true" }}
+      <div class="bd-clipboard">
+        <button type="button" class="btn-clipboard btn-example">
+          <svg class="bi" role="img" aria-label="Copy to clipboard">
+            <use xlink:href="#clipboard"></use>
+          </svg>
+        </button>
+      </div>
+    {{- end }}
+
     {{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
     {{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
     {{- $content = replaceRE ` (class=" *?")` "" $content -}}
     {{- highlight (trim $content "\n") $lang "" -}}
-  {{- end }}
+  {{- end -}}
 </div>