Example: New e-shop example

build/.pa11yci.json

@@ -15,7 +15,7 @@
       "axe"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, fieldset.star-rating[disabled]",
+    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, #filterOffcanvas, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, fieldset.star-rating[disabled]",
     "ignore": [
       "color-contrast"
     ]

site/content/docs/5.3/examples/e-shop/e-shop.css

@@ -0,0 +1,30 @@
+@media screen and (min-width: 768px) {
+  .card .col-7 p:first-child {
+    min-height: 2.8125rem;
+  }
+}
+
+.custom-triangle {
+  border-style: solid;
+  border-width: 0 19px 41px 0;
+  border-right-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.custom-counter {
+  padding: 1px 2px;
+  border-radius: 5px;
+}
+
+.ratio-3x4 {
+  --bs-aspect-ratio: 133%;
+}
+
+.border-subtle {
+  --bs-border-color: var(--bs-border-color-subtle);
+  border-color: var(--bs-border-color-subtle);
+}
+
+.border-supporting-orange {
+  --bs-border-color: #ff7900;
+  border-color: #ff7900;
+}

site/content/docs/5.3/migration.md

@@ -920,6 +920,11 @@ Color mode mechanism coming from Bootstrap is available from Boosted v5.3.0. How
 
 - <span class="badge text-bg-success">New</span> A download app page is now available.
 
+### Examples
+
+- **Pages**
+  - <span class="badge bg-success">New</span> An e-shop page example is now available.
+
 ### CSS and Sass variables
 
 - Adds additional variables for alerts, `.btn-close`, and `.offcanvas`.

site/data/examples.yml

@@ -76,6 +76,8 @@
   examples:
     - name: Download app
       description: "How to build a download app page (redirect on iOS and Android)."
+    - name: E-shop
+      description: "How to build an e-shop page with Boosted."
     - name: Form
       description: "How to build a form with Boosted."