feat(examples): add footers example while waiting for Orange footer c…

…omponent (#922)

site/content/docs/5.1/components/orange-footer.md

@@ -0,0 +1,37 @@
+---
+layout: docs
+title: Orange footer
+description: Documentation and examples for Boosted's powerful, responsive footer. Includes support for branding, navigation and more.
+group: components
+aliases: "/docs/5.1/components/orange-footer/"
+toc: true
+---
+
+## Overview
+
+{{< callout warning >}}
+### Orange footer is not a component yet
+
+The feature will be delivered with [#892]({{< param repo >}}/issues/892).
+
+In the meantime, some examples have been developed in the [footers examples section]({{< docsref "/examples/footers" >}}) by using mostly Boosted utilities and our Collapse JavaScript plugin.
+
+Total responsiveness is not implemented and design guidelines are not perfectly respected but it can help you while waiting for the component's delivery.
+{{< /callout >}}
+
+{{< callout info >}}
+### Active colors
+
+In order to have correct active colors in "Mailing list" and "Follow us" bars, some extra classes and CSS are required:
+
+```css
+.example-footer-custom-form .btn:active {
+  border-color: var(--bs-orange) !important;
+}
+
+.example-footer-custom-social .btn:active {
+  color: var(--bs-dark) !important;
+  background-color: var(--bs-white) !important;
+  border-color: var(--bs-white) !important;
+}
+{{< /callout >}}

site/content/docs/5.1/examples/footers/footers.css

@@ -10,3 +10,13 @@
   vertical-align: -.125em;
   fill: currentColor;
 }
+
+.example-footer-custom-form .btn:active {
+  border-color: var(--bs-orange) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.example-footer-custom-social .btn:active {
+  color: var(--bs-dark) !important; /* stylelint-disable-line declaration-no-important */
+  background-color: var(--bs-white) !important; /* stylelint-disable-line declaration-no-important */
+  border-color: var(--bs-white) !important; /* stylelint-disable-line declaration-no-important */
+}

site/data/examples.yml

@@ -1,6 +1,6 @@
-# - category: Snippets
-#   description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
-#   examples:
+- category: Snippets
+  description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more."
+  examples:
 #     - name: Headers
 #       description: "Display your branding, navigation, search, and more with these header components"
 #     - name: Heroes
@@ -9,8 +9,8 @@
 #       description: "Explain the features, benefits, or other details in your marketing content."
 #     - name: Sidebars
 #       description: "Common navigation patterns ideal for offcanvas or multi-column layouts."
-#     - name: Footers
-#       description: "Finish every page strong with an awesome footer, big or small."
+    - name: Footers
+      description: "Finish every page strong with an awesome footer, big or small."
 #     - name: Dropdowns
 #       description: "Enhance your dropdowns with filters, icons, custom styles, and more."
 #     - name: List groups

site/data/sidebar.yml

@@ -74,6 +74,7 @@
     - title: Navs & tabs
     - title: Navbar
     - title: Offcanvas
+    - title: Orange footer
     - title: Orange navbar
     - title: Pagination
     - title: Placeholders