From 9ebd9f1d24f02bd5a3c5a1d5a0740f48d0a238db Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 19 Apr 2025 13:11:11 +0200
Subject: [PATCH] feat: update border utility examples and enhance card styling
 for improved layout

---
 docs/content/ui/utilities/borders.md | 63 ++++++++++++++--------------
 shared/includes/docs/docs-card.html  |  4 +-
 shared/includes/docs/menu.html       |  2 +-
 shared/includes/docs/navbar.html     |  2 +-
 4 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/docs/content/ui/utilities/borders.md b/docs/content/ui/utilities/borders.md
index 564a1d12f..5ad8efdbd 100644
--- a/docs/content/ui/utilities/borders.md
+++ b/docs/content/ui/utilities/borders.md
@@ -20,42 +20,42 @@ Borders can be applied to specific sides of an element using utility classes. Th
 
 {% capture html -%}
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border"
 >
   1
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-top"
 >
   2
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-end"
 >
   3
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-bottom"
 >
   4
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-start"
 >
   5
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-x"
 >
   6
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-y"
 >
   7
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered hide-code %}
 
 
 ## Border size
@@ -70,22 +70,22 @@ Border size utilities allow you to control the thickness of borders, providing f
 
 {% capture html -%}
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-0"
 >
   1
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border"
 >
   2
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-wide"
 >
   3
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered hide-code %}
 
 ## Remove border
 
@@ -102,37 +102,37 @@ If you want to selectively remove borders from specific sides of an element, you
 
 {% capture html -%}
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-top-0"
 >
   1
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-end-0"
 >
   2
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-bottom-0"
 >
   3
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-start-0"
 >
   4
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-x-0"
 >
   5
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-y-0"
 >
   6
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered hide-code %}
 
 
 ## Border color
@@ -152,47 +152,47 @@ Customizing the border color helps to enhance the visual appeal and consistency
 
 {% capture html -%}
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-primary"
 >
   1
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-secondary"
 >
   2
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-success"
 >
   3
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-warning"
 >
   4
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-danger"
 >
   5
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-info"
 >
   6
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-dark"
 >
   7
 </div>
 <div
-  class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light"
+  class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-light"
 >
   8
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered hide-code %}
 
 ## Border radius
 
@@ -239,7 +239,7 @@ Adding border radius gives elements smooth, rounded edges, which can make design
   6
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered hide-code %}
 
 
 ## Border opacity
@@ -250,7 +250,7 @@ You can adjust the opacity of borders to create subtle visual effects or to blen
 <div class="border border-success border-opacity-50">This is 50% opacity success border</div>
 ```
 
-```html example 
+{% capture html -%}
 <div class="border border-success p-2 mb-2">This is default success border</div>
 <div class="border border-success p-2 mb-2 border-opacity-75">
   This is 75% opacity success border
@@ -262,4 +262,5 @@ You can adjust the opacity of borders to create subtle visual effects or to blen
   This is 25% opacity success border
 </div>
 <div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
-```
\ No newline at end of file
+{%- endcapture %}
+{% include "docs/example.html" html=html hide-code %}
\ No newline at end of file
diff --git a/shared/includes/docs/docs-card.html b/shared/includes/docs/docs-card.html
index 2bb8b3b24..3156d420f 100644
--- a/shared/includes/docs/docs-card.html
+++ b/shared/includes/docs/docs-card.html
@@ -1,4 +1,4 @@
-<div class="col-6">
+<div class="col-md-6">
 	<a href="{{ include.href }}" class="card">
 		<div class="card-body">
 			<div class="row">
@@ -9,7 +9,7 @@
 				{%- endif -%}
 				<div class="col">
 					<h3>{{ include.title }}</h3>
-					<p class="text-secondary m-0">{{ include.description }}</p>
+					<p class="text-secondary m-0 fs-4 lh-base">{{ include.description }}</p>
 				</div>
 			</div>
 		</div>
diff --git a/shared/includes/docs/menu.html b/shared/includes/docs/menu.html
index 224390060..60c961fef 100644
--- a/shared/includes/docs/menu.html
+++ b/shared/includes/docs/menu.html
@@ -3,7 +3,7 @@
 <nav class="space-y" id="menu">
 	{% for level1 in menu %}
 	<div>
-		<div class="subheader">
+		<div class="subheader mb-2">
 			{{ level1.data.title }}
 		</div>
 		{% if level1.children %}
diff --git a/shared/includes/docs/navbar.html b/shared/includes/docs/navbar.html
index aed1f8ee7..6c7424ae1 100644
--- a/shared/includes/docs/navbar.html
+++ b/shared/includes/docs/navbar.html
@@ -1,4 +1,4 @@
-<div class="navbar navbar-expand-md sticky-top">
+<div class="navbar navbar-expand-md navbar-fixed">
 	<div class="container">
 		<div class="row flex-fill align-items-center">
 			<div class="col">