wip

First steps to have the card header

End of first draft

.

.

Some changes to respect a bit more the design

Some design fixes

.

.

fix(sonarCloud)

fix(pa11yCi)

better a11y

first batch

First release

Adding the necessary files

.

fix(review)

fix(review)

Implementing new version of the counter

Correct a Chrome bug

fix(a11y review)

fix(a11y review) + design changed

.

fix(a11y review)

fix(a11y review)

.

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,29 @@
+@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;
+}
+
+/* For a11y purpose, 200% text was displayed under white bg */
+.card {
+  --bs-card-bg: transparent;
+}

site/content/docs/5.3/migration.md

@@ -457,6 +457,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

@@ -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."