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",
+    "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",
     "ignore": [
       "color-contrast"
     ]

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

@@ -0,0 +1,24 @@
+@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%;
+}
+
+.line-height-custom {
+  line-height: 1.5;
+}

site/content/docs/5.3/migration.md

@@ -30,6 +30,10 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
 - <span class="badge bg-success">New</span> In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any.
 - <span class="badge bg-success">New</span> Labels related to mandatory form fields have been improved for better accessibility. A `<span class="visually-hidden"> (required)</span>` element has been added to ensure correct restitution by assistive technologies like screen readers. Please reflect these modifications into your websites.
 
+### Examples
+
+- <span class="badge bg-success">New</span> An e-shop page example is now available.
+
 ### CSS and Sass variables
 
 - <details class="mb-2">

site/data/examples.yml

@@ -74,6 +74,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."