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

docs/4.0/examples/album/album.css

@@ -1,17 +1,19 @@
-body {
-  min-height: 75rem; /* Can be removed; just added for demo purposes */
-}
-
-.navbar {
-  margin-bottom: 0;
+:root {
+  --jumbotron-padding-y: 3rem;
 }
 
 .jumbotron {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
+  padding-top: var(--jumbotron-padding-y);
+  padding-bottom: var(--jumbotron-padding-y);
   margin-bottom: 0;
   background-color: #fff;
 }
+@media (min-width: 768px) {
+  .jumbotron {
+    padding-top: calc(var(--jumbotron-padding-y) * 2);
+    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
+  }
+}
 
 .jumbotron p:last-child {
   margin-bottom: 0;
@@ -25,29 +27,6 @@ body {
   max-width: 40rem;
 }
 
-.album {
-  min-height: 50rem; /* Can be removed; just added for demo purposes */
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  background-color: #f7f7f7;
-}
-
-.card {
-  float: left;
-  width: 33.333%;
-  padding: .75rem;
-  margin-bottom: 2rem;
-  border: 0;
-}
-
-.card > img {
-  margin-bottom: .75rem;
-}
-
-.card-text {
-  font-size: 85%;
-}
-
 footer {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -56,3 +35,5 @@ footer {
 footer p {
   margin-bottom: .25rem;
 }
+
+.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }