Examples updates (#24898)

* fix cover nav

* Improve signin visuals and alignment with that flexbox love

* rewrite cover example in flexbox

* lighten signin bg

* first pass at pricing example

* redo examples index with data file

* tighten up spacing a bit

* update navbar descriptions

* link pricing

* move that back

* property order

* Fix test errors.

* Compress pricing.png.

* add form validation example

* remove that

* rename that

* restyle and space out

* fix errors

* change order

* cleanup album css and styles

* tweak examples index

* make it a badge

* options

* improve sticky footer alignment

* redesign example index

* brand new blog layout

* start new screenshots

* new product example page a la apple

* add email field

* fix linter, remove unused blog css

* hook up feather icons to start

* redo dashboard

* fix linting

* add floating labels example

* formatting

* formatting

* lint

* fix values on select

* optional input, plus input group

* new dashboard image

* start to reboot the offcanvas example

* updated images

* new offcanvas mostly implemented

* linting

* edit description

* more description changes

* - Add vertical margin to album hero buttons for when they're stacked
- Adjust font-size and padding for pricing header and hero
- Fix checkout's stacked column margins, plus update their check/radio
markup
- Update product's utilities to be responsive
- Made blog cards somewhat responsive (needs a bit more work tbh)

* drop leading zero

* more linting

* swap empty images for holder, fix border

* dist the docs

* navbars have no margin-bottom to begin

* add css var, tweak padding for mobile

* comment headers

* nix commented out code

* nix the navbar structure for a custom one, stack it on mobile

* tweak heading button group for mobile

* Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4

* improve card sizing on pricing

* update and compress

1 files changed, 55 insertions, 0 deletions

diff --git a/_data/examples.yml b/_data/examples.yml
new file mode 100644
index 000000000..673fde40b
--- /dev/null
+++ b/_data/examples.yml
@@ -0,0 +1,55 @@
+- category: Custom components
+  description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
+  examples:
+    - name: Album
+      description: "Simple one-page template for photo galleries, portfolios, and more."
+    - name: Pricing
+      description: "Example pricing page built with Cards and featuring a custom header and footer."
+    - name: Checkout
+      description: "Custom checkout form showing our form components and their validation features."
+    - name: Product
+      description: "Lean product-focused marketing page with extensive grid and image work."
+    - name: Cover
+      description: "A one-page template for building simple and beautiful home pages."
+    - name: Carousel
+      description: "Customize the navbar and carousel, then add some new components."
+    - name: Blog
+      description: "Magazine like blog template with header, navigation, featured content."
+    - name: Dashboard
+      description: "Basic admin dashboard shell with fixed sidebar and navbar."
+    - name: Sign-in
+      description: "Custom form layout and design for a simple sign in form."
+    - name: Sticky footer
+      description: "Attach a footer to the bottom of the viewport when page content is short."
+    - name: Sticky footer navbar
+      description: "Attach a footer to the bottom of the viewport with a fixed top navbar."
+
+- category: Framework
+  description: "Examples that focus on implementing uses of built-in components provided by Bootstrap."
+  examples:
+    - name: "Starter template"
+      description: "Nothing but the basics: compiled CSS and JavaScript."
+    - name: Grid
+      description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
+    - name: Jumbotron
+      description: "Build around the jumbotron with a navbar and some basic grid columns."
+
+- category: Navbars
+  description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
+  examples:
+    - name: Navbars
+      description: "Demonstration of all responsive and container options for the navbar."
+    - name: Navbar static
+      description: "Single navbar example of a static top navbar along with some additional content."
+    - name: Navbar fixed
+      description: "Single navbar example with a fixed top navbar along with some additional content."
+    - name: Navbar bottom
+      description: "Single navbar example with a bottom navbar along with some additional content."
+
+- category: Experiments
+  description: "Examples that focus on future-friendly features or techniques."
+  examples:
+    - name: Floating labels
+      description: "Beautifully simple forms with floating labels over your inputs."
+    - name: Offcanvas
+      description: "Turn your expandable navbar into a sliding offcanvas menu."