From c32e7b27fec09dc72e5ae41d37037bf2f173651f Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Tue, 1 Aug 2023 16:29:04 +0200
Subject: [PATCH] [IMP] website, *: prevent abuse of h1 and use font size
 classes

*: website_event, website_forum, website_livechat, website_mass_mailing,
   website_slides

This commit permits to reduce the risk to have a wrong h1 tag or
multiple h1 tags on the same page. This commit replaces some h1 tags
with a h2 in snippets. In addition, this commit removes some font sizes
written in the style attribute and replaces them with a font size class
now that they are possible to use and edit as an user.

task-1958098

Part-of: odoo/odoo#129791
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/website/static/tests/tours/link_tools.js           | 4 ++--
 .../static/tests/tours/snippet_table_of_content.js        | 8 ++++----
 addons/website/static/tests/tours/text_animations.js      | 2 +-
 addons/website/views/new_page_template_templates.xml      | 4 ++--
 addons/website/views/snippets/s_banner.xml                | 2 +-
 addons/website/views/snippets/s_carousel.xml              | 6 +++---
 addons/website/views/snippets/s_cover.xml                 | 2 +-
 .../views/snippets/s_mega_menu_big_icons_subtitles.xml    | 2 +-
 addons/website/views/snippets/s_mega_menu_cards.xml       | 2 +-
 .../views/snippets/s_mega_menu_images_subtitles.xml       | 6 +++---
 .../website/views/snippets/s_mega_menu_little_icons.xml   | 4 ++--
 addons/website/views/snippets/s_mega_menu_thumbnails.xml  | 8 ++++----
 addons/website/views/snippets/s_picture.xml               | 2 +-
 addons/website/views/snippets/s_popup.xml                 | 2 +-
 addons/website/views/snippets/s_table_of_content.xml      | 4 ++--
 addons/website/views/snippets/s_text_cover.xml            | 2 +-
 addons/website/views/snippets/s_title.xml                 | 2 +-
 addons/website_event/views/event_templates_page_misc.xml  | 4 +---
 addons/website_forum/models/forum_forum.py                | 2 +-
 .../views/forum_forum_templates_forum_all.xml             | 2 +-
 addons/website_livechat/views/website_livechat.xml        | 6 +++---
 addons/website_mass_mailing/views/snippets_templates.xml  | 2 +-
 addons/website_slides/data/slide_slide_demo.xml           | 6 +++---
 23 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/addons/website/static/tests/tours/link_tools.js b/addons/website/static/tests/tours/link_tools.js
index 6ad8351152b..1e14c78a18e 100644
--- a/addons/website/static/tests/tours/link_tools.js
+++ b/addons/website/static/tests/tours/link_tools.js
@@ -320,7 +320,7 @@ wTourUtils.registerWebsitePreviewTour('link_tools', {
     wTourUtils.clickOnElement("mega menu", "iframe header .o_mega_menu_toggle"),
     wTourUtils.changeOption("MegaMenuLayout", "we-toggler"),
     wTourUtils.changeOption("MegaMenuLayout", '[data-select-label="Cards"]'),
-    wTourUtils.clickOnElement("card's text", "iframe header .s_mega_menu_cards font"),
+    wTourUtils.clickOnElement("card's text", "iframe header .s_mega_menu_cards p"),
     {
         content: "Enter an URL",
         trigger: "#o_link_dialog_url_input",
@@ -328,7 +328,7 @@ wTourUtils.registerWebsitePreviewTour('link_tools', {
     },
     {
         content: "Check nothing is lost",
-        trigger: "iframe header .s_mega_menu_cards a[href='https://www.odoo.com']:has(img):has(h4):has(p font)",
+        trigger: "iframe header .s_mega_menu_cards a[href='https://www.odoo.com']:has(img):has(h4):has(p)",
         run: () => {}, // This is a check.
     },
     ...wTourUtils.clickOnSave(),
diff --git a/addons/website/static/tests/tours/snippet_table_of_content.js b/addons/website/static/tests/tours/snippet_table_of_content.js
index 0c5c0a2dd03..2f82ebd30a7 100644
--- a/addons/website/static/tests/tours/snippet_table_of_content.js
+++ b/addons/website/static/tests/tours/snippet_table_of_content.js
@@ -4,8 +4,8 @@ import wTourUtils from '@website/js/tours/tour_utils';
 
 const scrollToHeading = function (position) {
     return {
-        content: `Scroll to h1 number ${position}`,
-        trigger: `iframe h1:eq(${position})`,
+        content: `Scroll to h2 number ${position}`,
+        trigger: `iframe h2:eq(${position})`,
         run: function () {
             this.$anchor[0].scrollIntoView(true);
         },
@@ -41,7 +41,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_table_of_content', {
     ...wTourUtils.clickOnEditAndWaitEditMode(),
     {
         content: "Click on the first TOC's title",
-        trigger: 'iframe .s_table_of_content:eq(0) h1',
+        trigger: 'iframe .s_table_of_content:eq(0) h2',
     },
     {
         content: "Hide the first TOC on mobile",
@@ -49,7 +49,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_table_of_content', {
     },
     {
         content: "Click on the second TOC's title",
-        trigger: 'iframe .s_table_of_content:eq(1) h1',
+        trigger: 'iframe .s_table_of_content:eq(1) h2',
     },
     {
         content: "Hide the second TOC on desktop",
diff --git a/addons/website/static/tests/tours/text_animations.js b/addons/website/static/tests/tours/text_animations.js
index 7ca74cc2b56..a88b8a1a3ea 100644
--- a/addons/website/static/tests/tours/text_animations.js
+++ b/addons/website/static/tests/tours/text_animations.js
@@ -13,7 +13,7 @@ wTourUtils.registerWebsitePreviewTour("text_animations", {
     }),
     {
         content: "Click on the snippet title",
-        trigger: "iframe .s_cover h1 > font",
+        trigger: "iframe .s_cover h1",
         run: "dblclick", // Make sure the title is selected.
     },
     {
diff --git a/addons/website/views/new_page_template_templates.xml b/addons/website/views/new_page_template_templates.xml
index e4c6c2762c0..9eed0a79192 100644
--- a/addons/website/views/new_page_template_templates.xml
+++ b/addons/website/views/new_page_template_templates.xml
@@ -1093,10 +1093,10 @@ overridden by modules), because:
         <a href="#table_of_content_heading_1_1" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0 active">Intuitive system</a>
         <a href="#table_of_content_heading_1_2" class="table_of_content_link list-group-item list-group-item-action py-2 border-0 rounded-0">Design features</a>
     </xpath>
-    <xpath expr="//section//section[1]//h1" position="attributes">
+    <xpath expr="//section//section[1]//h2" position="attributes">
         <attribute name="id">table_of_content_heading_1_1</attribute>
     </xpath>
-    <xpath expr="//section//section[2]//h1" position="attributes">
+    <xpath expr="//section//section[2]//h2" position="attributes">
         <attribute name="id">table_of_content_heading_1_2</attribute>
     </xpath>
 </template>
diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
index 9d327879485..f22b1bc3262 100644
--- a/addons/website/views/snippets/s_banner.xml
+++ b/addons/website/views/snippets/s_banner.xml
@@ -6,7 +6,7 @@
         <div class="container">
             <div class="row s_nb_column_fixed o_grid_mode" data-row-count="11">
                 <div class="justify-content-center o_grid_item g-height-8 g-col-lg-5 col-lg-5" data-name="Box" style="z-index: 1; grid-area: 2 / 1 / 10 / 6;">
-                    <h1><font style="font-size: 62px;">Sell Online. <strong>Easily.</strong></font></h1>
+                    <h1 class="display-3">Sell Online. <strong>Easily.</strong></h1>
                     <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                     <div class="s_hr text-start pb32 pt4" data-snippet="s_hr" data-name="Separator">
                         <hr class="w-100 mx-auto"/>
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index e87a6db88a1..937a50c77a3 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -18,7 +18,7 @@
                     <div class="container oe_unremovable">
                         <div class="row">
                             <div class="carousel-content col-lg-6">
-                                 <h2><font style="font-size: 62px;">Slide Title</font></h2>
+                                <h2 class="display-3-fs">Slide Title</h2>
                                 <p class="lead">Use this snippet to presents your content in a slideshow-like format. Don't write about products or services here, write about solutions.</p>
                                 <p>
                                     <a href="/contactus" class="btn btn-primary">Contact us</a>
@@ -32,7 +32,7 @@
                     <div class="container oe_unremovable">
                         <div class="row">
                             <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
-                                <h2 style="font-size: 62px;">Clever Slogan</h2>
+                                <h2 class="display-3-fs">Clever Slogan</h2>
                                 <div class="s_hr pt8 pb24" data-snippet="s_hr" data-name="Separator">
                                     <hr class="w-25 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
                                 </div>
@@ -47,7 +47,7 @@
                     <div class="container oe_unremovable">
                         <div class="row">
                             <div class="carousel-content col-lg-6 offset-lg-6">
-                                <h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
+                                <h2><font class="display-3-fs" style="background-color: rgb(255, 255, 255);">Edit this title</font></h2>
                                 <h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
                                 <p><br/></p>
                                 <p>Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml
index 17f17da2b22..9d279c94d4b 100644
--- a/addons/website/views/snippets/s_cover.xml
+++ b/addons/website/views/snippets/s_cover.xml
@@ -6,7 +6,7 @@
         <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
         <div class="o_we_bg_filter bg-black-50"/>
         <div class="container s_allow_columns">
-            <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
+            <h1 class="display-3" style="text-align: center; font-weight: bold;">Catchy Headline</h1>
             <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
             <p style="text-align: center;">
                 <a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact us</t></a>
diff --git a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
index 2482b0a7c32..68b691bf4f6 100644
--- a/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
+++ b/addons/website/views/snippets/s_mega_menu_big_icons_subtitles.xml
@@ -74,7 +74,7 @@
             <i t-attf-class="fa rounded rounded-circle me-3 #{_icon_classes}"/>
             <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-esc="_title"/>
-                <span><font style="font-size: 14px;" t-esc="_text"/></span>
+                <span class="small"><t t-esc="_text"/></span>
             </div>
         </div>
     </a>
diff --git a/addons/website/views/snippets/s_mega_menu_cards.xml b/addons/website/views/snippets/s_mega_menu_cards.xml
index d55e65dcd87..5f727e84089 100644
--- a/addons/website/views/snippets/s_mega_menu_cards.xml
+++ b/addons/website/views/snippets/s_mega_menu_cards.xml
@@ -58,7 +58,7 @@
         <a href="#" class="nav-link o_default_snippet_text rounded text-wrap text-center p-3">
             <img t-att-src="_img_src" class="mb-3 rounded shadow img-fluid" alt=""/>
             <h4 t-esc="_title"/>
-            <p class="o_default_snippet_text mb-0"><font style="font-size: 14px;" t-esc="_text"/></p>
+            <p class="o_default_snippet_text mb-0 small"><t t-esc="_text"/></p>
         </a>
     </div>
 </template>
diff --git a/addons/website/views/snippets/s_mega_menu_images_subtitles.xml b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
index 65cd6616645..24a157b0f6b 100644
--- a/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
+++ b/addons/website/views/snippets/s_mega_menu_images_subtitles.xml
@@ -46,8 +46,8 @@
                 <div class="col col-md-6 col-lg py-2">
                     <img src="/web/image/website.s_mega_menu_images_subtitles_default_image_7" class="mb-3 rounded shadow img-fluid" alt=""/>
                     <h4 class="o_default_snippet_text">The team</h4>
-                    <p class="text-muted o_default_snippet_text">
-                        <font style="font-size: 14px;">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</font>
+                    <p class="text-muted o_default_snippet_text small">
+                        Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.
                     </p>
                     <a href="#" class="btn btn-primary o_default_snippet_text">Discover our team</a>
                 </div>
@@ -62,7 +62,7 @@
             <img t-att-src="_img_src" class="me-3 rounded shadow" alt=""/>
             <div class="flex-grow-1">
                 <h4 class="mt-0 mb-0" t-esc="_title"/>
-                <span><font style="font-size: 14px;" t-esc="_text"/></span>
+                <span class="small"><t t-esc="_text"/></span>
             </div>
         </div>
     </a>
diff --git a/addons/website/views/snippets/s_mega_menu_little_icons.xml b/addons/website/views/snippets/s_mega_menu_little_icons.xml
index 3f1ba579711..22f87a5329d 100644
--- a/addons/website/views/snippets/s_mega_menu_little_icons.xml
+++ b/addons/website/views/snippets/s_mega_menu_little_icons.xml
@@ -55,8 +55,8 @@
                 </div>
                 <div class="col-lg-4 p-4 s_mega_menu_gray_area">
                     <h4 class="o_default_snippet_text">The team</h4>
-                    <p class="text-muted o_default_snippet_text">
-                        <font style="font-size: 14px;">Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.</font>
+                    <p class="text-muted o_default_snippet_text small">
+                        Created in 2021, the company is young and dynamic. Discover the composition of the team and their skills.
                     </p>
                     <a href="#" class="btn btn-primary o_default_snippet_text">Discover our team</a>
                 </div>
diff --git a/addons/website/views/snippets/s_mega_menu_thumbnails.xml b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
index 722a27e0106..499d8530ccc 100644
--- a/addons/website/views/snippets/s_mega_menu_thumbnails.xml
+++ b/addons/website/views/snippets/s_mega_menu_thumbnails.xml
@@ -57,8 +57,8 @@
                 <div class="col col-sm-6 col-md-4 col-lg-3 text-center py-2">
                     <a href="#" class="nav-link p-0 o_default_snippet_text" data-name="Menu Item">
                         <img class="img-fluid rounded shadow" src="/web/image/website.s_mega_menu_thumbnails_default_image_11" alt=""/>
-                        <span class="d-block p-2">
-                            <b><font style="font-size:14px;">Discover our new products</font></b>
+                        <span class="d-block p-2 small">
+                            <b>Discover our new products</b>
                         </span>
                     </a>
                 </div>
@@ -96,9 +96,9 @@
         <a href="#" class="nav-link o_default_snippet_text p-0" data-name="Menu Item">
             <img class="img-fluid rounded shadow" t-att-src="_img_src" alt=""/>
             <br/>
-            <span class="d-block p-2">
+            <span class="d-block p-2 small">
                 <b>
-                    <font style="font-size:14px;" t-esc="_text"/>
+                    <t t-esc="_text"/>
                 </b>
             </span>
         </a>
diff --git a/addons/website/views/snippets/s_picture.xml b/addons/website/views/snippets/s_picture.xml
index 7c2a87afe2e..d3b1df07958 100644
--- a/addons/website/views/snippets/s_picture.xml
+++ b/addons/website/views/snippets/s_picture.xml
@@ -4,7 +4,7 @@
 <template id="s_picture" name="Picture">
     <section class="s_picture pt48 pb24 o_cc o_cc2">
         <div class="container">
-            <h2 style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
+            <h2 class="display-3-fs" style="text-align: center;">A punchy Headline</h2>
             <p style="text-align: center;">Choose a vibrant image and write an inspiring paragraph about it.<br/> It does not have to be long, but it should reinforce your image.</p>
             <p style="text-align: center;"><br/></p>
             <div class="row s_nb_column_fixed">
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index a786683475d..f4a8c44f6fa 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -15,7 +15,7 @@
                         <div class="container">
                             <div class="row s_nb_column_fixed">
                                 <div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
-                                    <h2><font style="font-size: 62px;">Win $20</font></h2>
+                                    <h2 class="display-3-fs">Win $20</h2>
                                     <p class="lead">Check out now and get $20 off your first order.</p>
                                     <a href="#" class="btn btn-primary">New customer</a>
                                 </div>
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml
index 8a3b207329c..40a4759b50e 100644
--- a/addons/website/views/snippets/s_table_of_content.xml
+++ b/addons/website/views/snippets/s_table_of_content.xml
@@ -10,7 +10,7 @@
                 </div>
                 <div class="col-lg-9 s_table_of_content_main oe_structure oe_empty" data-name="Content">
                     <section class="pb16">
-                        <h1 data-anchor="true">Intuitive system</h1>
+                        <h2 data-anchor="true">Intuitive system</h2>
                         <h4>What you see is what you get</h4>
                         <p>
                             Insert text styles like headers, bold, italic, lists, and fonts with
@@ -28,7 +28,7 @@
                         </p>
                     </section>
                     <section class="pb16">
-                        <h1 data-anchor="true">Design features</h1>
+                        <h2 data-anchor="true">Design features</h2>
                         <h4>Bootstrap-based templates</h4>
                         <p>
                             Easily design your own Odoo templates thanks to clean HTML
diff --git a/addons/website/views/snippets/s_text_cover.xml b/addons/website/views/snippets/s_text_cover.xml
index 0390e713741..a07ea131f4a 100644
--- a/addons/website/views/snippets/s_text_cover.xml
+++ b/addons/website/views/snippets/s_text_cover.xml
@@ -6,7 +6,7 @@
         <div class="container-fluid">
             <div class="row">
                 <div class="o_colored_level o_cc o_cc_1 col-lg-5 pt160 pb160 px-5">
-                    <h1><span style="font-size: 62px;">Sell Online. <br/>Easily.</span></h1>
+                    <h1 class="display-3">Sell Online. <br/>Easily.</h1>
                     <p class="lead">Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
                     <a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact us</t></a>
                 </div>
diff --git a/addons/website/views/snippets/s_title.xml b/addons/website/views/snippets/s_title.xml
index 61eaebab92e..b1668f9c25e 100644
--- a/addons/website/views/snippets/s_title.xml
+++ b/addons/website/views/snippets/s_title.xml
@@ -4,7 +4,7 @@
 <template id="s_title" name="Title">
     <section class="s_title pt40 pb40" data-vcss="001">
         <div class="container s_allow_columns">
-            <h1 style="text-align: center;"><font style="font-size: 62px;">Your Site Title</font></h1>
+            <h2 class="display-3-fs" style="text-align: center;">Your Site Title</h2>
         </div>
     </section>
 </template>
diff --git a/addons/website_event/views/event_templates_page_misc.xml b/addons/website_event/views/event_templates_page_misc.xml
index 50bfc4cb637..d538158bf49 100644
--- a/addons/website_event/views/event_templates_page_misc.xml
+++ b/addons/website_event/views/event_templates_page_misc.xml
@@ -14,9 +14,7 @@
         <div class="oe_structure oe_empty" id="oe_structure_website_event_intro_1"/>
         <section class="s_title pt32 pb32" data-vcss="001" data-snippet="s_title" data-name="Title">
             <div class="container s_allow_columns">
-                <h1 style="text-align: center;">
-                    <font style="font-size: 62px;" class="o_default_snippet_text">Introduction</font>
-                </h1>
+                <h1 class="display-3 o_default_snippet_text" style="text-align: center;">Introduction</h1>
             </div>
         </section>
         <div class="oe_structure oe_empty" id="oe_structure_website_event_intro_2"/>
diff --git a/addons/website_forum/models/forum_forum.py b/addons/website_forum/models/forum_forum.py
index 81a574af4f6..1bc89788b3f 100644
--- a/addons/website_forum/models/forum_forum.py
+++ b/addons/website_forum/models/forum_forum.py
@@ -29,7 +29,7 @@ class Forum(models.Model):
     @api.model
     def _get_default_welcome_message(self):
         return Markup("""
-                <h1 style="text-align: center;clear-both"><font style="font-size: 62px; font-weight: bold;">%(message_intro)s</font></h1>
+                <h2 class="display-3-fs" style="text-align: center;clear-both;font-weight: bold;">%(message_intro)s</h2>
                 <div class="text-white">
                     <p class="lead o_default_snippet_text" style="text-align: center;">%(message_post)s</p>
                     <p style="text-align: center;">
diff --git a/addons/website_forum/views/forum_forum_templates_forum_all.xml b/addons/website_forum/views/forum_forum_templates_forum_all.xml
index 8a58c6a0644..c101d52fa7a 100644
--- a/addons/website_forum/views/forum_forum_templates_forum_all.xml
+++ b/addons/website_forum/views/forum_forum_templates_forum_all.xml
@@ -86,7 +86,7 @@
         <div class="oe_structure oe_empty" id="oe_structure_forum_all_top">
             <section class="s_cover o_colored_level s_parallax_no_overflow_hidden pt96 pb48" data-scroll-background-ratio="0" data-snippet="s_cover" data-name="Cover">
                 <div class="s_allow_columns container">
-                    <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Community Forums</font></h1>
+                    <h1 class="display-3" style="text-align: center; font-weight: bold;">Community Forums</h1>
                     <p class="lead" style="text-align: center;">Tap into the collective knowledge of our community by asking your questions in our forums,<br/> where helpful members are ready to assist you.</p>
                     <p style="text-align: center;">
                         <a class="mb-2" t-attf-href="/profile/users?forum_origin=#{request.httprequest.path}" data-bs-original-title="" title="" target="_blank">Meet our community members</a>
diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml
index 2bb742ac52a..f626086e0ed 100644
--- a/addons/website_livechat/views/website_livechat.xml
+++ b/addons/website_livechat/views/website_livechat.xml
@@ -38,7 +38,7 @@
                                                     </div>
                                                     <div class="card-body text-center">
                                                         <h2 style="margin: 0">
-                                                            <b style="font-size: 30px">
+                                                            <b>
                                                                 <t t-esc="percentage['great']" />
                                                             </b>
                                                             <small>%</small>
@@ -53,7 +53,7 @@
                                                     </div>
                                                     <div class="card-body text-center">
                                                         <h2 style="margin: 0">
-                                                            <b style="font-size: 30px">
+                                                            <b>
                                                                 <t t-esc="percentage['okay']" />
                                                             </b>
                                                             <small>%</small>
@@ -68,7 +68,7 @@
                                                     </div>
                                                     <div class="card-body text-center">
                                                         <h2 style="margin: 0">
-                                                            <b style="font-size: 30px">
+                                                            <b>
                                                                 <t t-esc="percentage['bad']" />
                                                             </b>
                                                             <small>%</small>
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 3f7479fc34e..614eb1be905 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -158,7 +158,7 @@ database, without the s_newsletter_list class. See fixNewsletterListClass.
                     <section class="s_text_block oe_img_bg o_bg_img_center pt88 pb64" data-snippet="s_text_block" data-name="Text"
                              style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 0 100%;">
                         <div class="container s_allow_columns">
-                            <h1 style="text-align: center;">Always <b>First</b>.</h1>
+                            <h2 style="text-align: center;">Always <b>First</b>.</h2>
                             <p style="text-align: center;">Be the first to find out all the latest news,<br/> products, and trends.</p>
                         </div>
                     </section>
diff --git a/addons/website_slides/data/slide_slide_demo.xml b/addons/website_slides/data/slide_slide_demo.xml
index 572f1f9eee5..0e157432159 100644
--- a/addons/website_slides/data/slide_slide_demo.xml
+++ b/addons/website_slides/data/slide_slide_demo.xml
@@ -234,7 +234,7 @@
     <div class="container">
         <div class="row s_nb_column_fixed">
             <div class="col-lg-12">
-                <h1 class="o_default_snippet_text" style="font-size: 62px; text-align: center;">Catchy Headline</h1>
+                <h1 class="o_default_snippet_text display-3" style="text-align: center;">Catchy Headline</h1>
                 <p class="lead o_default_snippet_text" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
                 <p>
                     <a href="/contactus" class="btn btn-primary rounded-circle o_default_snippet_text">Contact us</a>
@@ -471,7 +471,7 @@
     <div class="container">
         <div class="row s_nb_column_fixed">
             <div class="col-lg-12">
-                <h1 class="o_default_snippet_text" style="font-size: 62px; text-align: center;">Catchy Headline</h1>
+                <h1 class="o_default_snippet_text display-3" style="text-align: center;">Catchy Headline</h1>
                 <p class="lead o_default_snippet_text" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
                 <p class="o_default_snippet_text">
                     <a href="/contactus" class="btn btn-primary rounded-circle">Contact us</a>
@@ -614,7 +614,7 @@
     <div class="container">
         <div class="row s_nb_column_fixed">
             <div class="col-lg-12">
-                <h1 class="o_default_snippet_text" style="font-size: 62px; text-align: center;">Foreword</h1>
+                <h1 class="o_default_snippet_text display-3" style="text-align: center;">Foreword</h1>
                 <p class="lead o_default_snippet_text" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
                 <p>
                     <a href="/contactus" class="btn btn-primary rounded-circle o_default_snippet_text">Contact us</a>