diff --git a/addons/crm/static/src/scss/crm.scss b/addons/crm/static/src/scss/crm.scss
index d8497d06dc6..5aede173ca7 100644
--- a/addons/crm/static/src/scss/crm.scss
+++ b/addons/crm/static/src/scss/crm.scss
@@ -7,27 +7,6 @@
 }
 
 .o_opportunity_kanban .o_kanban_renderer {
-    .ribbon {
-        &::before, &::after {
-            display: none;
-        }
-        span {
-            padding: 5px;
-            font-size: small;
-            z-index: 0;
-        }
-    }
-
-    .ribbon-top-right {
-        margin-top: -9px;
-        span {
-            left: 12px;
-            right: 30px;
-            height: 25px;
-            top: 18px;
-        }
-    }
-
     .oe_kanban_card_ribbon {
         min-height: 105px;
         .o_kanban_record_title {
diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss
index 5fc7356516e..86b383f6312 100644
--- a/addons/event/static/src/scss/event.scss
+++ b/addons/event/static/src/scss/event.scss
@@ -24,26 +24,6 @@
         }
     }
     .oe_kanban_card_ribbon {
-        min-height: 95px;
-        .ribbon {
-            &::before, &::after {
-                display: none;
-            }
-            span {
-                padding: 5px;
-                font-size: small;
-                z-index: 0;
-            }
-        }
-        .ribbon-top-right {
-            margin-top: -1px;
-            span {
-                left: 7px;
-                right: 30px;
-                height: 25px;
-                top: 18px;
-            }
-        }
         // Used for "Group By"
         div.row {
             min-height: 95px;
diff --git a/addons/event/views/event_registration_views.xml b/addons/event/views/event_registration_views.xml
index 9861cb122ca..eecc9f6266e 100644
--- a/addons/event/views/event_registration_views.xml
+++ b/addons/event/views/event_registration_views.xml
@@ -141,14 +141,14 @@
                         </div>
                     </t>
                     <t t-name="kanban-box">
-                        <div t-attf-class="#{!record.active.raw_value ? 'oe_kanban_card_ribbon' : ''} oe_kanban_global_click o_event_registration_kanban container-fluid p-0">
+                        <div t-attf-class="#{!record.active.raw_value ? 'oe_kanban_card_ribbon' : ''} oe_kanban_global_click o_event_registration_kanban container-fluid">
                             <div t-if="!record.active.raw_value" class="ribbon ribbon-top-right">
                                 <span class="text-bg-danger">Archived</span>
                             </div>
-                            <div class="row h-100">
-                                <div class="col-9 pe-0">
+                            <div class="row g-0 h-100">
+                                <div class="col-9">
                                     <div class="oe_kanban_content h-100">
-                                        <div class="o_kanban_record_body pt-1 ps-2 h-100 d-flex flex-column">
+                                        <div class="o_kanban_record_body h-100 d-flex flex-column">
                                             <b class="o_kanban_record_title"><field name="name"/></b>
                                             <field class="o_text_overflow" name="event_id" invisible="context.get('default_event_id')" />
                                             <span class="o_text_overflow" attrs="{'invisible': [('partner_id', '=', False)]}">Booked by <field name="partner_id" /></span>
@@ -162,7 +162,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div id="event_attendees_kanban_icons" class="col-3 ps-0">
+                                <div id="event_attendees_kanban_icons" class="col-3">
                                     <t t-call="event_attendees_kanban_icons_desktop"/>
                                     <t t-call="event_attendees_kanban_icons_mobile"/>
                                 </div>
diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss
index 7b656207d5e..1f0504b07f1 100644
--- a/addons/hr_holidays/static/src/scss/time_off.scss
+++ b/addons/hr_holidays/static/src/scss/time_off.scss
@@ -1,14 +1,8 @@
 .o_hr_leave_form {
     .o_form_sheet {
-        padding: 0!important;
         overflow: hidden;
-        .ribbon-top-right {
-            top: 16px;
-            right: -8px;
-        }
     }
     .o_hr_leave_content {
-        margin: 0;
         .o_group {
             margin: 0;
         }
diff --git a/addons/hr_holidays/views/hr_leave_views.xml b/addons/hr_holidays/views/hr_leave_views.xml
index e7daf15443a..a1e1cc6c4ff 100644
--- a/addons/hr_holidays/views/hr_leave_views.xml
+++ b/addons/hr_holidays/views/hr_leave_views.xml
@@ -241,7 +241,7 @@
                 <field name="tz_mismatch" invisible="1"/>
                 <field name="holiday_type" invisible="1"/>
                 <field name="leave_type_request_unit" invisible="1"/>
-                <div class="o_hr_leave_content row">
+                <div class="o_hr_leave_content row my-n4 me-n4">
                     <div class="o_hr_leave_column col_left col-md-6 col-12">
                         <div name="title" class="o_hr_leave_title" invisible="1">
                             <field name="employee_id" readonly="1" force_save="1" invisible="1"/>
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index a48c06f303d..c3b3a2385ef 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -7,27 +7,6 @@
             }
         }
 
-        .ribbon {
-            &::before, &::after {
-                display: none;
-            }
-
-            span {
-                padding: 5px;
-                font-size: small;
-                z-index: unset;
-                height: auto;
-            }
-        }
-        .ribbon-top-right {
-            margin-top: -$o-kanban-dashboard-vpadding;
-
-            span {
-                left: 0px;
-                right: 30px;
-            }
-        }
-
         .text_top_padding{
             padding-top: 0.375rem;
         }
@@ -62,31 +41,6 @@
     }
 }
 
-.o_kanban_applicant {
-    .o_kanban_renderer {
-        .ribbon {
-            &::before, &::after {
-                display: none;
-            }
-
-            span {
-                padding: 5px;
-                font-size: x-small;
-                z-index: unset;
-                height: auto;
-            }
-        }
-        .ribbon-top-right {
-            margin-top: -$o-kanban-dashboard-vpadding;
-
-            span {
-                top: 10px;
-                left: 20px;
-            }
-        }
-    }
-}
-
 .o_kanban_view {
     .oe_kanban_card {
         .o_kanban_state_with_padding {
diff --git a/addons/hr_recruitment/views/hr_applicant_views.xml b/addons/hr_recruitment/views/hr_applicant_views.xml
index 20c1e66d02f..c161489483d 100644
--- a/addons/hr_recruitment/views/hr_applicant_views.xml
+++ b/addons/hr_recruitment/views/hr_applicant_views.xml
@@ -331,7 +331,7 @@
                     <t t-name="kanban-box">
                         <div t-attf-class="{{!selection_mode ? 'oe_kanban_color_' + kanban_getcolor(record.color.raw_value) : ''}} oe_kanban_card oe_kanban_global_click oe_applicant_kanban oe_semantic_html_override">
                             <field name="date_closed" invisible="1"/>
-                            <div class="ribbon ribbon-top-right pe-none" attrs="{'invisible': [('date_closed', '=', False)]}">
+                            <div class="ribbon ribbon-top-right" attrs="{'invisible': [('date_closed', '=', False)]}">
                                 <span class="text-bg-success">Hired</span>
                             </div>
                             <span class="badge rounded-pill text-bg-danger float-end me-4" attrs="{'invisible': [('application_status', '!=', 'refused')]}">Refused</span>
diff --git a/addons/mail/static/src/scss/kanban_view.scss b/addons/mail/static/src/scss/kanban_view.scss
index 46ea5587104..2df6a5479e6 100644
--- a/addons/mail/static/src/scss/kanban_view.scss
+++ b/addons/mail/static/src/scss/kanban_view.scss
@@ -4,26 +4,6 @@ $o-kanban-attachement-image-size: 80px;
     .o_module_desc_short {
         max-width: 90%;
     }
-    .ribbon {
-        &::before, &::after {
-            display: none;
-        }
-
-        span {
-            padding: 5px;
-            font-size: x-small;
-            z-index: unset;
-            height: auto;
-        }
-    }
-    .ribbon-top-right {
-        margin-top: 54px;
-
-        span {
-            top: 15px;
-            left: 10px;
-        }
-    }
 }
 
 .o_kanban_renderer {
diff --git a/addons/mail/views/discuss_channel_views.xml b/addons/mail/views/discuss_channel_views.xml
index 9aaf53878ed..efb29bd74e5 100644
--- a/addons/mail/views/discuss_channel_views.xml
+++ b/addons/mail/views/discuss_channel_views.xml
@@ -20,18 +20,20 @@
                             </div>
                         </t>
                         <t t-name="kanban-box">
-                            <div class="o_discuss_channel_kanban oe_module_vignette oe_kanban_global_click d-flex align-items-center">
+                            <div class="o_discuss_channel_kanban oe_module_vignette oe_kanban_global_click">
                                 <div class="ribbon ribbon-top-right o_small" attrs="{'invisible': [('active', '=', True)]}">
                                     <span class="text-bg-danger">Archived</span>
                                 </div>
-                                <img t-att-src="kanban_image('discuss.channel', 'avatar_128', record.id.raw_value)" class="oe_module_icon" alt="Channel"/>
-                                <div class="oe_module_desc">
-                                    <h4 class="o_kanban_record_title">#<field name="name"/></h4>
-                                    <p class="oe_module_name" t-att-class="!record.active.raw_value ? 'o_module_desc_short': ''">
-                                        <field name="description"/>
-                                    </p>
-                                    <button type="object" attrs="{'invisible':['|', ('is_member','=',True), ('group_ids', '!=', [])]}" class="btn btn-primary float-end" name="channel_join">Join</button>
-                                    <button type="object" attrs="{'invisible':['|', ('is_member','=',False), ('group_ids', '!=', [])]}" class="btn btn-secondary float-end" name="action_unfollow">Leave</button>
+                                <div class="d-flex align-items-center">
+                                    <img t-att-src="kanban_image('discuss.channel', 'avatar_128', record.id.raw_value)" class="oe_module_icon" alt="Channel"/>
+                                    <div class="oe_module_desc">
+                                        <h4 class="o_kanban_record_title">#<field name="name"/></h4>
+                                        <p class="oe_module_name" t-att-class="!record.active.raw_value ? 'o_module_desc_short': ''">
+                                            <field name="description"/>
+                                        </p>
+                                        <button type="object" attrs="{'invisible':['|', ('is_member','=',True), ('group_ids', '!=', [])]}" class="btn btn-primary float-end" name="channel_join">Join</button>
+                                        <button type="object" attrs="{'invisible':['|', ('is_member','=',False), ('group_ids', '!=', [])]}" class="btn btn-secondary float-end" name="action_unfollow">Leave</button>
+                                    </div>
                                 </div>
                             </div>
                         </t>
diff --git a/addons/sales_team/static/src/scss/crm_team_views.scss b/addons/sales_team/static/src/scss/crm_team_views.scss
index 760712cd31e..73f55c96ba3 100644
--- a/addons/sales_team/static/src/scss/crm_team_views.scss
+++ b/addons/sales_team/static/src/scss/crm_team_views.scss
@@ -14,22 +14,6 @@
         }
     }
     .ribbon {
-        &::before, &::after {
-            display: none;
-        }
-
-        span {
-            padding: 5px;
-            font-size: small;
-            height: auto;
-        }
-    }
-    .ribbon-top-right {
-        margin-top: -$o-kanban-dashboard-vpadding;
-
-        span {
-            left: 0px;
-            right: 30px;
-        }
+        --Ribbon-wrapper-width: 6rem;
     }
 }
diff --git a/addons/survey/static/src/scss/survey_survey_views.scss b/addons/survey/static/src/scss/survey_survey_views.scss
index 69f4ef5f166..3edfe258a75 100644
--- a/addons/survey/static/src/scss/survey_survey_views.scss
+++ b/addons/survey/static/src/scss/survey_survey_views.scss
@@ -31,7 +31,7 @@
             width: 100%;
             margin: 0px;
         }
-        
+
         .o_survey_kanban_card {
             border-top: 0px !important;
         }
@@ -81,54 +81,10 @@
     // Ungrouped specific
     .o_survey_kanban_card_ungrouped {
         .ribbon {
-            // Desktop: finishes on next kanban card line
-            height: 77px;
-            width: 130px;
+            --Ribbon-wrapper-width: 6rem;
 
-            // Mobile: is in a corner, takes more place
             @include media-breakpoint-down(md) {
-                height: 100px;
-                width: 100px;
-            }
-
-            &-top-right {
-                margin-top: -$o-kanban-inside-vgutter;
-                right: 0;
-
-                & span {
-                    left: -8px;
-                    top: 24px;
-                }
-            }
-
-            & span {
-                font-size: 1rem;
-                width: 150px;
-                height: 32px;
-            }
-        }
-    }
-    // Grouped specific
-    .o_survey_kanban_card_grouped {
-        .ribbon {
-            height: 90px;
-            width: 98px;
-
-            &-top-right {
-                margin-top: -$o-kanban-inside-vgutter;
-                right: 0;
-
-                & span {
-                    left: -8px;
-                    top: 16px;
-                }
-            }
-
-            & span {
-                font-size: 1rem;
-                width: 150px;
-                height: 32px;
-                padding: 0 8px;
+                --Ribbon-wrapper-width: 6.5rem;
             }
         }
     }
@@ -140,7 +96,7 @@
     background-color: var(--SurveyForm__section-background-color, #DDD);
     border-top: 1px solid #BBB;
     border-bottom: 1px solid #BBB;
-    
+
     > td {
         background: transparent;
     }
diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml
index 134172a974d..63c172584a5 100644
--- a/addons/survey/views/survey_survey_views.xml
+++ b/addons/survey/views/survey_survey_views.xml
@@ -241,6 +241,9 @@
                                       o_survey_kanban_card #{record.certification.raw_value ? 'o_survey_kanban_card_certification' : ''}">
                         <!-- displayed in ungrouped mode -->
                         <div class="o_survey_kanban_card_ungrouped row mx-0">
+                            <widget name="web_ribbon" title="Archived"
+                                bg_color="text-bg-danger"
+                                attrs="{'invisible': [('active', '=', True)]}"/>
                             <div class="col-lg-2 col-sm-8 py-0 my-2 my-lg-0 col-12">
                                 <div class="d-flex flex-grow-1 flex-column my-0 my-lg-2">
                                     <span class="fw-bold"><field name="title"/></span>
@@ -324,9 +327,6 @@
                                     End Live Session
                                 </button>
                             </div>
-                            <widget name="web_ribbon" title="Archived"
-                                bg_color="text-bg-danger"
-                                attrs="{'invisible': [('active', '=', True)]}"/>
                         </div>
                         <!-- displayed in grouped mode -->
                         <div class="o_survey_kanban_card_grouped">
@@ -356,7 +356,7 @@
                                                 <a name="action_survey_user_input_certified" type="object" class="d-flex flex-column align-items-center">
                                                     <span class="fw-bold"> <t t-esc="Math.round(record.success_ratio.raw_value)"></t> %</span>
                                                     <span class="text-muted" >Success</span>
-                                                </a> 
+                                                </a>
                                             </div>
                                         </div>
                                     </div>
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index c7551a43c59..be79f524f50 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -36,6 +36,17 @@
     --KanbanColumn__highlight-border: #{$o-action};
 
     --o-view-nocontent-zindex: 1;
+
+    // ----------------------------------------------------------------------------
+    // Inner components contextual adaptations
+
+    --Ribbon-font-size: #{$font-size-sm};
+    --Ribbon-gap-top: calc(var(--KanbanRecord-padding-v) * -1 - #{$border-width});
+    --Ribbon-gap-right: 0;
+    --Ribbon-wrapper-width: 6.5rem;
+    --Ribbon-height:  calc(var(--Ribbon-font-size) * 2);
+    --Ribbon-z-index: 0;
+
     // ----------------------------------------------------------------------------
 
     border-top: $border-width solid var(--Kanban-background);
diff --git a/addons/web/static/src/views/widgets/ribbon/ribbon.scss b/addons/web/static/src/views/widgets/ribbon/ribbon.scss
index c231abf7969..9a87bbc3461 100644
--- a/addons/web/static/src/views/widgets/ribbon/ribbon.scss
+++ b/addons/web/static/src/views/widgets/ribbon/ribbon.scss
@@ -1,50 +1,57 @@
 .ribbon {
-    width: 150px;
-    height: 150px;
+    --Ribbon-wrapper-width-default: 10rem;
+    --Ribbon-wrapper-height: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default));
+
+    width: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default));
+    height: var(--Ribbon-wrapper-height);
     overflow: hidden;
     position: absolute;
 
     & span {
-        z-index: 1;
+        --Ribbon-font-size-default: #{$font-size-lg};
+        --Ribbon-height-default: calc(var(--Ribbon-font-size, var(--Ribbon-font-size-default)) * 2.5);
+        --Ribbon-shadow-distance: .25rem;
+        --Ribbon-shadow-blur: .5rem;
+        --Ribbon-z-index: 1;
+
+        z-index: var( --Ribbon-z-index);
         position: absolute;
-        display: grid;
-        align-items: center;
-        width: 225px;
-        height: 48px;
-        padding: 0 44px;
-        box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
-        color: #fff;
-        font: 700 18px/1 'Lato', sans-serif;
+        width: 141.421%; //Square root of 2 to get the diagonal of the parent
+        height: var(--Ribbon-height, var(--Ribbon-height-default));
+        box-shadow: 0 var(--Ribbon-shadow-distance) var(--Ribbon-shadow-blur) rgba(0, 0, 0, .1);
+        color: $white;
+        font-size: var(--Ribbon-font-size, var(--Ribbon-font-size-default));
+        line-height: var(--Ribbon-height, var(--Ribbon-height-default));
+        font-weight: $font-weight-bolder;
+        font-family: 'Lato', sans-serif;
         text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
         text-transform: uppercase;
         text-align: center;
         overflow: hidden;
         user-select: none;
+        transform-origin: left bottom;
+        pointer-events: none;
         &.o_small {
-            font-size: 12px;
+            font-size: $font-size-sm
         }
         &.o_medium {
-            font-size: 15px;
+            font-size: $font-size-base;
         }
     }
 
     &-top-right {
-        margin-top: -$o-sheet-vpadding;
-        right: 0;
+        --Ribbon-gap-top-default: calc(var(--formView-sheet-padding-y, 0) * -1 - #{$border-width});
+        --Ribbon-gap-right-default: -#{$border-width};
 
-        &::before {
-            top: 0;
-            left: 0;
-        }
-
-        &::after {
-            bottom: 0;
-            right: 0;
-        }
+        margin-top: var(--Ribbon-gap-top, var(--Ribbon-gap-top-default));
+        right: var(--Ribbon-gap-right, var(--Ribbon-gap-right-default));
 
         & span {
-            left: -15px;
-            top: 30px;
+            --Ribbon-top-position-default: calc((var(--Ribbon-height-default) * -1));
+            --Ribbon-left-position-default: calc(var(--Ribbon-shadow-distance) + var(--Ribbon-shadow-blur));
+
+            left: var(--Ribbon-left-position, var(--Ribbon-left-position-default));
+            top: var(--Ribbon-top-position, var(--Ribbon-top-position-default));
             transform: rotate(45deg);
         }
     }
diff --git a/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss b/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss
index 16a23a17848..daecd7900a7 100644
--- a/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss
+++ b/addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss
@@ -57,34 +57,6 @@
     margin: 0 -1px -1px 0;
     cursor: pointer;
 
-    .ribbon-wrapper {
-        width: 50px;
-        height: 50px;
-    }
-
-    .ribbon {
-        font: bold 10px Sans-Serif;
-        padding: 2px 0;
-        top: 10px;
-        width: 70px;
-        background-image: none; // not needed if colors for ribbons (Gold,Silver,Bronze) is removed in website_event_track.css
-
-        &.ribbon_Gold {
-            background-color: #e3aa24;
-            color:$white;
-        }
-
-        &.ribbon_Silver {
-            background-color: #adb5bd;
-            color: $white;
-        }
-
-        &.ribbon_Bronze {
-            background-color: #c7632a;
-            color: $white;
-        }
-    }
-
     &:before {
         content: "";
         display: block;
diff --git a/addons/website_slides/static/src/scss/slide_views.scss b/addons/website_slides/static/src/scss/slide_views.scss
index 174f5bc65b7..b75247d0fde 100644
--- a/addons/website_slides/static/src/scss/slide_views.scss
+++ b/addons/website_slides/static/src/scss/slide_views.scss
@@ -17,27 +17,3 @@ table.o_section_list_view tr.o_data_row.o_is_section {
     border-top: 1px solid #BBB;
     border-bottom: 1px solid #BBB;
 }
-
-// Ribbon specific style for channel and attendee kanban
-.o_slide_channel_kanban .o_kanban_renderer {
-    .ribbon {
-        &::before, &::after {
-            display: none;
-        }
-
-        span {
-            padding: 5px;
-            font-size: small;
-            z-index: unset;
-            height: auto;
-        }
-    }
-    .ribbon-top-right {
-        margin-top: -$o-kanban-dashboard-vpadding;
-
-        span {
-            left: 0px;
-            right: 30px;
-        }
-    }
-}
diff --git a/odoo/addons/base/static/src/scss/res_partner.scss b/odoo/addons/base/static/src/scss/res_partner.scss
index 0935e1de1ec..7115b9edcc3 100644
--- a/odoo/addons/base/static/src/scss/res_partner.scss
+++ b/odoo/addons/base/static/src/scss/res_partner.scss
@@ -1,26 +1,4 @@
 .o_kanban_view .o_res_partner_kanban {
-
-    .ribbon {
-        &::before, &::after {
-            display: none;
-        }
-
-        span {
-            padding: 5px;
-            font-size: x-small;
-            z-index: unset;
-            height: auto;
-        }
-    }
-    .ribbon-top-right {
-        margin-top: -$o-kanban-dashboard-vpadding;
-
-        span {
-            top: 15px;
-            left: 10px;
-        }
-    }
-
     .oe_kanban_action_a:hover > .badge {
         background-color: $o-brand-primary;
         color: white;
diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
index 38ec766b6eb..1d76c1ef9bf 100644
--- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
+++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
@@ -873,7 +873,7 @@ stepUtils.mobileModifier(stepUtils.autoExpandMoreButtons('.o_control_panel .brea
 }, {
     edition: "community",
     content: "wait for payment registration to succeed",
-    trigger: "span.bg-success:contains('Paid')",
+    trigger: "span.text-bg-success:contains('Paid')",
     auto: true,
     run() {}
 },{