From b28f3b766605067b568535db8df1fd79504d7a75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Tue, 19 Dec 2023 13:14:45 +0100
Subject: [PATCH] MDL-80397 theme: Refactor card-deck class dropped in BS5

- Refactor recentlyaccessedcourses, starredcourses and myovervew blocks
  removing card-deck helper class occurrences
- Refactor card-deck helper class occurrences with utility classes
---
 .../themeselector/theme_card.mustache         |   4 +-
 .../themeselector/theme_selector.mustache     |   6 +-
 .../site/layouts/shortcodes/moodleicons.html  |   4 +-
 .../placeholder-course-list-item.mustache     |   2 +-
 .../templates/placeholders.mustache           |  13 +-
 .../myoverview/templates/view-cards.mustache  |   4 +-
 .../myoverview/templates/view-list.mustache   |   2 +-
 .../templates/view-summary.mustache           |   2 +-
 .../behat/block_myoverview_dashboard.feature  |  24 +--
 .../behat/block_myoverview_favourite.feature  |  20 +--
 .../behat/block_myoverview_hidden.feature     |  54 +++---
 .../recentlyaccessedcourses-view.mustache     |  17 +-
 .../templates/placeholder-item.mustache       |   2 +-
 .../recentlyaccesseditems-view.mustache       |  12 +-
 .../templates/view-cards.mustache             |   4 +-
 blocks/starredcourses/templates/view.mustache |   8 +-
 course/templates/coursecard.mustache          |   4 +-
 course/templates/coursecards.mustache         |   6 +-
 course/templates/placeholder-course.mustache  |   2 +-
 course/templates/view-cards.mustache          |   4 +-
 grade/templates/category_settings.mustache    |   2 +-
 .../imagegallery/listtemplateheader.html      |   2 +-
 theme/boost/scss/moodle/blocks.scss           | 159 ++++++++---------
 theme/boost/style/moodle.css                  | 114 +++++-------
 theme/boost/upgrade.txt                       |   2 +
 theme/classic/scss/classic/post.scss          |  68 +-------
 theme/classic/style/moodle.css                | 164 +++++-------------
 27 files changed, 267 insertions(+), 438 deletions(-)

diff --git a/admin/templates/themeselector/theme_card.mustache b/admin/templates/themeselector/theme_card.mustache
index 6d7fc0b409c..82d9cc52657 100644
--- a/admin/templates/themeselector/theme_card.mustache
+++ b/admin/templates/themeselector/theme_card.mustache
@@ -31,8 +31,8 @@
         "reporturl": "http://moodlesite/report/themeusage/index.php?themechoice=boost"
     }
 }}
-<div class="card dashboard-card" role="listitem" id="theme-card-{{choose}}" aria-labelledby="theme-name-{{choose}} {{#current}}current-theme-{{choose}}{{/current}}">
-    <div class="card-img dashboard-card-img" style='background-image: url("{{image}}");'></div>
+<div class="card theme-card" role="listitem" id="theme-card-{{choose}}" aria-labelledby="theme-name-{{choose}} {{#current}}current-theme-{{choose}}{{/current}}">
+    <div class="card-img card-img-top" style='background-image: url("{{image}}");'></div>
     <div class="card-body p-3">
         <div class="d-flex">
             <div class="flex-grow-1">
diff --git a/admin/templates/themeselector/theme_selector.mustache b/admin/templates/themeselector/theme_selector.mustache
index 6970b829008..84696b226a2 100644
--- a/admin/templates/themeselector/theme_selector.mustache
+++ b/admin/templates/themeselector/theme_selector.mustache
@@ -62,9 +62,11 @@
         {{>core/single_button}}
     </div>
 {{/resetbutton}}
-<div class="card-deck dashboard-card-deck" id="themelist" data-region="card-deck" role="list" data-definedinconfig="{{definedinconfig}}">
+<div class="card-grid row row-cols-1 row-cols-md-3 mx-0" id="themelist" data-region="card-deck" role="list" data-definedinconfig="{{definedinconfig}}">
     {{#themes}}
-        {{>core_admin/themeselector/theme_card}}
+        <div class="col d-flex px-1 mb-2">
+            {{>core_admin/themeselector/theme_card}}
+        </div>
     {{/themes}}
 </div>
 
diff --git a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
index 93558185429..6f89fb4dbbc 100644
--- a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
+++ b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
@@ -2,9 +2,9 @@
   Usage: `moodleicons`
 */ -}}
 
-<div class="card-deck">
+<div class="d-sm-flex flex-wrap">
   {{ range $.Site.Data.fontawesomeicons }}
-  <div class="card mb-2 p-1 d-flex flex-column justify-content-around text-center" style="flex: 0 0 20%; height: 150px">
+  <div class="card mb-2 mx-1 p-1 d-flex flex-column justify-content-around text-center" style="flex: 0 0 20%; height: 150px">
     <div class="small text-truncate" data-toggle="tooltip" data-placement="bottom" title="{{ .name }}">{{ .name }}</div>
     <div class="row no-gutters">
       <div class="col-sm-6 d-flex align-items-center justify-content-center">
diff --git a/blocks/myoverview/templates/placeholder-course-list-item.mustache b/blocks/myoverview/templates/placeholder-course-list-item.mustache
index 4454498833a..409955e9106 100644
--- a/blocks/myoverview/templates/placeholder-course-list-item.mustache
+++ b/blocks/myoverview/templates/placeholder-course-list-item.mustache
@@ -25,7 +25,7 @@
 <li class="list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0">
     <div class="row">
         <div class="col-md-2 d-flex align-items-center">
-            <div class="bg-pulse-grey card-img dashboard-list-img w-100" style="height: 1rem; width: 1rem;"></div>
+            <div class="bg-pulse-grey card-img w-100" style="height: 1rem; width: 1rem;"></div>
         </div>
         <div class="col-md-10 d-flex flex-column">
             <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
diff --git a/blocks/myoverview/templates/placeholders.mustache b/blocks/myoverview/templates/placeholders.mustache
index 7d7df694ac1..45ceda55f24 100644
--- a/blocks/myoverview/templates/placeholders.mustache
+++ b/blocks/myoverview/templates/placeholders.mustache
@@ -23,14 +23,13 @@
     {}
 }}
 <div data-region="loading-placeholder-content" aria-hidden="true">
-    {{#cards}}
-        <div class="card-deck dashboard-card-deck one-row" style="height: 13rem">
-            {{> core_course/placeholder-course }}
-            {{> core_course/placeholder-course }}
-            {{> core_course/placeholder-course }}
-            {{> core_course/placeholder-course }}
+    {{#card}}
+        <div class="card-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 mx-0 flex-nowrap overflow-hidden" style="height: 13rem">
+            <div class="col d-flex px-1">{{> core_course/placeholder-course }}</div>
+            <div class="col d-flex px-1">{{> core_course/placeholder-course }}</div>
+            <div class="col d-flex px-1">{{> core_course/placeholder-course }}</div>
         </div>
-    {{/cards}}
+    {{/card}}
     {{#list}}
         <ul class="list-group">
             {{> block_myoverview/placeholder-course-list-item }}
diff --git a/blocks/myoverview/templates/view-cards.mustache b/blocks/myoverview/templates/view-cards.mustache
index 7c46df6f04d..530011c856d 100644
--- a/blocks/myoverview/templates/view-cards.mustache
+++ b/blocks/myoverview/templates/view-cards.mustache
@@ -38,13 +38,13 @@
 
 {{< core_course/coursecards }}
     {{$menu}}
-        <div class="card-footer dashboard-card-footer menu border-0 bg-white ml-auto">
+        <div class="card-footer menu border-0 bg-white ml-auto">
             {{> block_myoverview/course-action-menu }}
         </div>
     {{/menu}}
     {{$progress}}
         {{#hasprogress}}
-            <div class="card-footer dashboard-card-footer border-0 bg-white w-100">
+            <div class="card-footer border-0 bg-white w-100">
                 {{> block_myoverview/progress-bar}}
             </div>
         {{/hasprogress}}
diff --git a/blocks/myoverview/templates/view-list.mustache b/blocks/myoverview/templates/view-list.mustache
index 68511467b55..8a9e9ea5e86 100644
--- a/blocks/myoverview/templates/view-list.mustache
+++ b/blocks/myoverview/templates/view-list.mustache
@@ -44,7 +44,7 @@
             <div class="row">
                 <div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0">
                     <a href="{{viewurl}}" tabindex="-1"  class="mw-100 w-100">
-                        <div class="card-img dashboard-list-img mw-100" style='background-image: url("{{{courseimage}}}");'>
+                        <div class="rounded list-image mw-100" style='background-image: url("{{{courseimage}}}");'>
                             <span class="sr-only">{{fullname}}</span>
                         </div>
                     </a>
diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache
index 367d6c60cea..a1a1619901e 100644
--- a/blocks/myoverview/templates/view-summary.mustache
+++ b/blocks/myoverview/templates/view-summary.mustache
@@ -44,7 +44,7 @@
         <div class="row">
             <div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0">
                 <a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100">
-                    <div class="summaryimage card-img dashboard-list-img mw-100" style='background-image: url("{{{courseimage}}}");'>
+                    <div class="summary-image rounded mw-100" style='background-image: url("{{{courseimage}}}");'>
                         <span class="sr-only">{{fullname}}</span>
                     </div>
                 </a>
diff --git a/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature b/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature
index 11a13950cd2..b983ce742ec 100644
--- a/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature
+++ b/blocks/myoverview/tests/behat/block_myoverview_dashboard.feature
@@ -130,8 +130,8 @@ Feature: The my overview block allows users to easily access their courses
 
   Scenario: View favourite courses - w/ persistence
     Given I am on the "My courses" page logged in as "student1"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "Starred" "link" in the "Course overview" "block"
     And I reload the page
@@ -200,8 +200,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "In progress" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
     Then I should see "Course 3" in the "Course overview" "block"
     Then I should see "Course 4" in the "Course overview" "block"
@@ -213,8 +213,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "Past" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 1')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 1')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 1" in the "Course overview" "block"
     And I should not see "Course 2" in the "Course overview" "block"
@@ -226,8 +226,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "Future" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 5" in the "Course overview" "block"
     And I should not see "Course 1" in the "Course overview" "block"
@@ -239,8 +239,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "All" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 5" in the "Course overview" "block"
     And I should see "Course 1" in the "Course overview" "block"
@@ -256,8 +256,8 @@ Feature: The my overview block allows users to easily access their courses
     And I click on "All" "button" in the "Course overview" "block"
     # We have to click on the data attribute instead of the button element text as we might risk to click on the false positive "All (including removed from view)" element instead
     When I click on "[data-value='allincludinghidden']" "css_element" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
     And I reload the page
     Then I should see "Course 5" in the "Course overview" "block"
     And I should see "Course 1" in the "Course overview" "block"
diff --git a/blocks/myoverview/tests/behat/block_myoverview_favourite.feature b/blocks/myoverview/tests/behat/block_myoverview_favourite.feature
index 0d318f2e773..c1e46257109 100644
--- a/blocks/myoverview/tests/behat/block_myoverview_favourite.feature
+++ b/blocks/myoverview/tests/behat/block_myoverview_favourite.feature
@@ -25,18 +25,18 @@ Feature: The my overview block allows users to favourite their courses
 
   Scenario: Favourite a course on a course card
     Given I am on the "My courses" page logged in as "student1"
-    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    When I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
-    Then "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
-    And "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
-    And "//div[@class='card dashboard-card' and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
-    And "//div[@class='card dashboard-card' and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
+    Then "//div[contains(@class, 'course-card') and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
+    And "//div[contains(@class, 'course-card') and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
+    And "//div[contains(@class, 'course-card') and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
+    And "//div[contains(@class, 'course-card') and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
 
   Scenario: Star a course and switch display to list
     Given I am on the "My courses" page logged in as "student1"
-    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
+    When I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
     And I click on "Display drop-down menu" "button" in the "Course overview" "block"
     And I click on "List" "link" in the "Course overview" "block"
     Then "//li[contains(concat(' ', normalize-space(@class), ' '), 'list-group-item') and contains(.,'Course 5')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
@@ -46,8 +46,8 @@ Feature: The my overview block allows users to favourite their courses
 
   Scenario: Star a course and switch display to summary
     Given I am on the "My courses" page logged in as "student1"
-    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
+    When I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 5')]" "xpath_element"
     And I click on "Display drop-down menu" "button" in the "Course overview" "block"
     And I click on "Summary" "link" in the "Course overview" "block"
     Then "//div[contains(concat(' ', normalize-space(@class), ' '), 'course-summaryitem') and contains(.,'Course 5')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
diff --git a/blocks/myoverview/tests/behat/block_myoverview_hidden.feature b/blocks/myoverview/tests/behat/block_myoverview_hidden.feature
index d6a84932002..2bb64fa3873 100644
--- a/blocks/myoverview/tests/behat/block_myoverview_hidden.feature
+++ b/blocks/myoverview/tests/behat/block_myoverview_hidden.feature
@@ -27,8 +27,8 @@ Feature: The my overview block allows users to hide their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "All" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 2" in the "Course overview" "block"
 
@@ -36,10 +36,10 @@ Feature: The my overview block allows users to hide their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     And I click on "All" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     When I reload the page
     And I should not see "Course 2" in the "Course overview" "block"
     And I click on "All" "button" in the "Course overview" "block"
@@ -53,12 +53,12 @@ Feature: The my overview block allows users to hide their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     And I click on "All" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I click on "All" "button" in the "Course overview" "block"
     And I click on "Removed from view" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Restore to view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Restore to view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
     And I should not see "Course 2" in the "Course overview" "block"
     And I click on "Removed from view" "button" in the "Course overview" "block"
@@ -70,15 +70,15 @@ Feature: The my overview block allows users to hide their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     And I click on "All" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I click on "All" "button" in the "Course overview" "block"
     And I click on "Removed from view" "link" in the "Course overview" "block"
     And I should see "Course 2" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Restore to view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Restore to view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     When I reload the page
     Then I should not see "Course 2" in the "Course overview" "block"
     And I click on "Removed from view" "button" in the "Course overview" "block"
@@ -92,8 +92,8 @@ Feature: The my overview block allows users to hide their courses
     Given I am on the "My courses" page logged in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "All" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     Then I should not see "Course 2" in the "Course overview" "block"
 
   Scenario: Test a course is never hidden with "All (including removed from view)" courses
@@ -104,14 +104,14 @@ Feature: The my overview block allows users to hide their courses
     And I click on "All" "button" in the "Course overview" "block"
     # We have to click on the data attribute instead of the button element text as we might risk to click on the false positive "All (except hidden)" element instead
     When I click on "[data-value='allincludinghidden']" "css_element" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Remove from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Remove from view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     Then I should see "Course 2" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I should not see "Remove from view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I should see "Restore to view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Restore to view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I should not see "Remove from view" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I should see "Restore to view" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Restore to view" "link" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
     And I should see "Course 2" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I should see "Remove from view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
-    And I should not see "Restore to view" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I should see "Remove from view" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
+    And I should not see "Restore to view" in the "//div[contains(@class, 'course-card') and contains(.,'Course 2')]" "xpath_element"
diff --git a/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache b/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
index 0b2ef5d4eaf..74f22d6c42e 100644
--- a/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
+++ b/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
@@ -25,11 +25,10 @@
 }}
 <div id="recentlyaccessedcourses-view-{{uniqid}}" data-region="recentlyaccessedcourses-view">
     <div data-region="loading-placeholder">
-        <div class="card-deck dashboard-card-deck one-row overflow-hidden" style="height: 13.05rem">
-            {{> core_course/placeholder-course }}
-            {{> core_course/placeholder-course }}
-            {{> core_course/placeholder-course }}
-            {{> core_course/placeholder-course }}
+        <div class="card-grid mx-0 mt-5 row row-cols-1 row-cols-sm-2 row-cols-md-3 flex-nowrap overflow-hidden" style="height: 13.05rem">
+            <div class="col p-0">{{> core_course/placeholder-course }}</div>
+            <div class="col p-0">{{> core_course/placeholder-course }}</div>
+            <div class="col p-0">{{> core_course/placeholder-course }}</div>
         </div>
     </div>
     <div class="hidden" data-region="view-content">
@@ -38,9 +37,11 @@
                 {{> core/paged_content_paging_bar }}
             </div>
         {{/pagingbar}}
-        {{< core_course/coursecards }}
-            {{$classes}}one-row fixed-width-cards justify-content-center overflow-hidden{{/classes}}
-        {{/ core_course/coursecards }}
+        <div class="card-carousel mx-0 justify-content-center flex-nowrap overflow-hidden" data-region="card-deck" role="list">
+            {{#courses}}
+                {{> core_course/coursecard }}
+            {{/courses}}
+        </div>
     </div>
     <div class="hidden text-xs-center text-center mt-3" data-region="empty-message">
         <img class="empty-placeholder-image-lg mt-1"
diff --git a/blocks/recentlyaccesseditems/templates/placeholder-item.mustache b/blocks/recentlyaccesseditems/templates/placeholder-item.mustache
index 653bce07a53..5dcbc95ed58 100644
--- a/blocks/recentlyaccesseditems/templates/placeholder-item.mustache
+++ b/blocks/recentlyaccesseditems/templates/placeholder-item.mustache
@@ -22,7 +22,7 @@
     Example context (json):
     {}
 }}
-<div class="card dashboard-card mb-1">
+<div class="card mb-1">
     <div class="card-body p-2 m-1">
         <div class="d-flex flex-row mw-100 align-items-center">
             <div class="bg-pulse-grey rounded-circle" style="height: 40px; width: 40px;"></div>
diff --git a/blocks/recentlyaccesseditems/templates/recentlyaccesseditems-view.mustache b/blocks/recentlyaccesseditems/templates/recentlyaccesseditems-view.mustache
index c198dd0065c..a8266abe775 100644
--- a/blocks/recentlyaccesseditems/templates/recentlyaccesseditems-view.mustache
+++ b/blocks/recentlyaccesseditems/templates/recentlyaccesseditems-view.mustache
@@ -29,13 +29,11 @@
      data-noitemsimgurl="{{noitemsimgurl}}">
     <div data-region="recentlyaccesseditems-view-content">
         <div data-region="recentlyaccesseditems-loading-placeholder">
-            <div class="card-deck dashboard-card-deck one-row">
-                {{> block_recentlyaccesseditems/placeholder-item }}
-                {{> block_recentlyaccesseditems/placeholder-item }}
-                {{> block_recentlyaccesseditems/placeholder-item }}
-                {{> block_recentlyaccesseditems/placeholder-item }}
-                {{> block_recentlyaccesseditems/placeholder-item }}
-            </div>
+            {{> block_recentlyaccesseditems/placeholder-item }}
+            {{> block_recentlyaccesseditems/placeholder-item }}
+            {{> block_recentlyaccesseditems/placeholder-item }}
+            {{> block_recentlyaccesseditems/placeholder-item }}
+            {{> block_recentlyaccesseditems/placeholder-item }}
         </div>
     </div>
 </div>
diff --git a/blocks/recentlyaccesseditems/templates/view-cards.mustache b/blocks/recentlyaccesseditems/templates/view-cards.mustache
index eddf48bac7d..8c7395ff5fd 100644
--- a/blocks/recentlyaccesseditems/templates/view-cards.mustache
+++ b/blocks/recentlyaccesseditems/templates/view-cards.mustache
@@ -41,9 +41,9 @@
     }
 }}
 
-<div class="card-deck dashboard-card-deck one-row" data-region="items-list" role="list">
+<div data-region="items-list" role="list">
     {{#items}}
-        <a class="card dashboard-card mb-1" href="{{{viewurl}}}" title="{{{name}}}" role="listitem">
+        <a class="card mb-1" href="{{{viewurl}}}" title="{{{name}}}" role="listitem">
             <div class="card-body p-2 m-1">
                 <div class="d-flex text-truncate">
                     <div class="d-flex align-self-center activityiconcontainer">
diff --git a/blocks/starredcourses/templates/view.mustache b/blocks/starredcourses/templates/view.mustache
index fd2f548fa6a..a41688ec391 100644
--- a/blocks/starredcourses/templates/view.mustache
+++ b/blocks/starredcourses/templates/view.mustache
@@ -29,10 +29,10 @@
      data-nocoursesimg="{{nocoursesimg}}">
     <div data-region="starred-courses-view-content">
         <div data-region="starred-courses-loading-placeholder">
-            <div class="card-deck dashboard-card-deck one-row" style="height: 11.1rem">
-                {{> core_course/placeholder-course }}
-                {{> core_course/placeholder-course }}
-                {{> core_course/placeholder-course }}
+            <div class="card-grid mx-0 row row-cols-1 row-cols-sm-2 row-cols-md-3 flex-nowrap overflow-hidden" style="height: 11.1rem">
+                <div class="col p-0">{{> core_course/placeholder-course }}</div>
+                <div class="col p-0">{{> core_course/placeholder-course }}</div>
+                <div class="col p-0">{{> core_course/placeholder-course }}</div>
             </div>
         </div>
     </div>
diff --git a/course/templates/coursecard.mustache b/course/templates/coursecard.mustache
index a33b0b32f5f..48668e5b437 100644
--- a/course/templates/coursecard.mustache
+++ b/course/templates/coursecard.mustache
@@ -34,11 +34,11 @@
         ]
     }
 }}
-<div class="card dashboard-card" role="listitem"
+<div class="card course-card mx-1" role="listitem"
     data-region="course-content"
     data-course-id="{{{id}}}">
     <a href="{{viewurl}}" tabindex="-1">
-        <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
+        <div class="card-img-top" style='background-image: url("{{{courseimage}}}");'>
             <span class="sr-only">{{fullname}}</span>
         </div>
     </a>
diff --git a/course/templates/coursecards.mustache b/course/templates/coursecards.mustache
index 21a8610b7db..42153cc2a7b 100644
--- a/course/templates/coursecards.mustache
+++ b/course/templates/coursecards.mustache
@@ -35,8 +35,10 @@
     }
 }}
 
-<div class="card-deck dashboard-card-deck {{$classes}}{{/classes}}" data-region="card-deck" role="list">
+<div class="card-grid mx-0 row row-cols-1 row-cols-sm-2 row-cols-md-3 {{$classes}}{{/classes}}" data-region="card-deck" role="list">
 {{#courses}}
-    {{> core_course/coursecard }}
+    <div class="col d-flex px-0 mb-2">
+        {{> core_course/coursecard }}
+    </div>
 {{/courses}}
 </div>
diff --git a/course/templates/placeholder-course.mustache b/course/templates/placeholder-course.mustache
index ce1549a8768..7d6d57959ae 100644
--- a/course/templates/placeholder-course.mustache
+++ b/course/templates/placeholder-course.mustache
@@ -22,7 +22,7 @@
     Example context (json):
     {}
 }}
-<div class="card dashboard-card border-0">
+<div class="card border-0 px-1">
     <div class="card-img-top bg-pulse-grey w-100" style="height: 7rem">
     </div>
     <div class="card-body pr-1 course-info-container">
diff --git a/course/templates/view-cards.mustache b/course/templates/view-cards.mustache
index 60563b3640d..69ebbd2fed5 100644
--- a/course/templates/view-cards.mustache
+++ b/course/templates/view-cards.mustache
@@ -17,7 +17,7 @@
 {{!
     @template core_course/view-cards
 
-    This template renders the carousel for the recentlyaccessedcourses & starredcourses blocks.
+    This template renders the carousel for the starredcourses block.
 
     Example context (json):
     {
@@ -36,7 +36,7 @@
 
 
 {{< core_course/coursecards }}
-    {{$classes}}one-row{{/classes}}
+    {{$classes}}flex-nowrap overflow-auto{{/classes}}
     {{$coursename}} {{fullname}} {{/coursename}}
     {{$coursecategory}}
         {{#showcoursecategory}}
diff --git a/grade/templates/category_settings.mustache b/grade/templates/category_settings.mustache
index f54fec38984..8324675c35d 100644
--- a/grade/templates/category_settings.mustache
+++ b/grade/templates/category_settings.mustache
@@ -28,7 +28,7 @@
         "calculatedgrade": "calculated grade"
     }
 }}
-<div class="card-deck" role="list">
+<div class="d-flex flex-wrap" role="list">
     {{#calculatedgrade}}
         <span class="badge rounded-pill bg-light text-dark" role="listitem">
             <strong>{{calculatedgrade}}</strong>
diff --git a/mod/data/preset/imagegallery/listtemplateheader.html b/mod/data/preset/imagegallery/listtemplateheader.html
index 27de1da672c..edf33792849 100644
--- a/mod/data/preset/imagegallery/listtemplateheader.html
+++ b/mod/data/preset/imagegallery/listtemplateheader.html
@@ -1 +1 @@
-<div id="imagegallery-list" class="card-deck row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" role="list">
+<div id="imagegallery-list" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" role="list">
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 6925ab47f48..47f825822b9 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -1,3 +1,7 @@
+/**
+ Blocks
+ */
+
 .blockmovetarget .accesshide {
     position: relative;
     left: initial;
@@ -98,8 +102,6 @@ $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width * 0.5 );
     }
 }
 
-$card-gutter : $card-deck-margin * 2;
-
 .block .empty-placeholder-image-lg {
     height: 5rem;
 }
@@ -112,6 +114,10 @@ $card-gutter : $card-deck-margin * 2;
     }
 }
 
+//
+// Cards.
+//
+
 .block .block-cards {
     .course-info-container {
         padding: 0.8rem;
@@ -146,81 +152,40 @@ $card-gutter : $card-deck-margin * 2;
         border-radius: 50%;
     }
 }
-
-.dashboard-card-deck.one-row {
-    flex-flow: nowrap;
-    overflow-x: scroll;
+.card-grid {
+    display: flex;
+    .card {
+        flex: 1;
+    }
+    .drawercontent & .col,
+    .blockcolumn & .col {
+        flex: 0 0 auto;
+        max-width: 100%;
+    }
 }
-
-.summaryimage {
-    height: 5rem;
-    width: 5rem;
-    background-position: center;
-    background-size: cover;
+.card-carousel {
+    display: flex;
+    .card {
+        flex: 1;
+        @include media-breakpoint-up(sm) {
+            flex: 0 1 auto;
+            width: 240px;
+            max-width: 100%;
+        }
+    }
 }
-.dashboard-list-img {
-    height: 5rem;
-    width: 20rem;
-    background-position: center;
-    background-size: cover;
-    @include media-breakpoint-down(lg) {
-        width: 100%;
+.course-card,
+.theme-card {
+    .card-img-top {
+        height: 7rem;
+        background-position: center;
+        background-size: cover;
     }
 }
 
-.dashboard-card-deck {
-    .dashboard-card {
-        margin-bottom: $card-gutter;
-        flex-basis: auto;
-        width: 100%;
-        flex-grow: 0;
-        flex-shrink: 0;
-        .dashboard-card-img {
-            height: 7rem;
-            background-position: center;
-            background-size: cover;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        .dashboard-card-footer {
-            padding: 0.8rem;
-        }
-    }
-    @include media-breakpoint-up(sm) {
-        &.fixed-width-cards {
-            .dashboard-card {
-                width: 300px;
-                max-width: 100%;
-            }
-        }
-    }
-}
-
-.dashboard-card-deck:not(.fixed-width-cards) {
-    @media (min-width: 576px) {
-        .dashboard-card {
-            width: calc(50% - #{$card-gutter});
-        }
-    }
-    @media (min-width: 840px) {
-        .dashboard-card {
-            width: calc(33.33% - #{$card-gutter});
-        }
-    }
-}
-
-#block-region-side-pre {
-    .dashboard-card-deck:not(.fixed-width-cards) {
-        margin-left: 0;
-        margin-right: 0;
-        .dashboard-card {
-            width: calc(100% - #{$card-gutter}) !important;
-            @include media-breakpoint-down(xs) {
-                width: 100% !important;
-            }
-        }
-    }
-}
+//
+// Block block_recentlyaccessedcourses
+//
 
 .block_recentlyaccessedcourses {
     .paging-bar-container {
@@ -228,14 +193,12 @@ $card-gutter : $card-deck-margin * 2;
         padding-right: 0.5rem;
         justify-content: flex-end;
     }
-
     @include media-breakpoint-down(xs) {
         .paging-bar-container {
             margin-top: 0;
         }
     }
 }
-
 #block-region-side-pre {
     .block_recentlyaccessedcourses {
         .paging-bar-container {
@@ -244,26 +207,22 @@ $card-gutter : $card-deck-margin * 2;
     }
 }
 
+//
+// Block block_recentlyaccesseditems
+//
+
 .block_recentlyaccesseditems {
     .activityiconcontainer {
         width: 40px;
         height: 40px;
     }
-
-    aside[id^="block-region-side-"] & .dashboard-card-deck.one-row {
-        flex-flow: wrap;
-        overflow-x: hidden;
-    }
-
-    aside[id^="block-region-side-"] & .dashboard-card-deck .card:nth-of-type(n+4) {
+    aside[id^="block-region-side-"] & .card:nth-of-type(n+4) {
         display: none;
     }
-
     #block-region-content & [data-region="more-items-button-container"] {
         display: none;
     }
-
-    a.dashboard-card {
+    a.card {
         &:hover,
         &:focus {
             text-decoration: none;
@@ -277,6 +236,10 @@ $card-gutter : $card-deck-margin * 2;
     }
 }
 
+//
+// Block block_myoverview
+//
+
 .block_myoverview {
     .content {
         min-height: 19.35rem;
@@ -284,20 +247,42 @@ $card-gutter : $card-deck-margin * 2;
     .paged-content-page-container {
         min-height: 13rem;
     }
+    .summary-image {
+        height: 5rem;
+        width: 5rem;
+        background-position: center;
+        background-size: cover;
+    }
+    .list-image {
+        height: 5rem;
+        width: 20rem;
+        background-position: center;
+        background-size: cover;
+        @include media-breakpoint-down(lg) {
+            width: 100%;
+        }
+    }
 }
 
+//
+// Block block_timeline
+//
+
 .block_timeline {
     .paged-content-page-container {
         background-color: $list-group-bg;
     }
 }
-
 .block_timeline {
     .event-action {
         padding-left: 5.55em;
     }
 }
 
+//
+// Blocks block_settings and block_navigation
+//
+
 // Show expand collapse with font-awesome.
 .block_settings .block_tree [aria-expanded="true"],
 .block_settings .block_tree [aria-expanded="true"].emptybranch,
@@ -354,6 +339,10 @@ $card-gutter : $card-deck-margin * 2;
     margin: 4px 0;
 }
 
+//
+// Fake blocks
+//
+
 .pagelayout-embedded {
     .has-fake-blocks {
         padding: 1rem;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 9a190efab09..b8701629ba2 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -26961,6 +26961,9 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   background-color: #d7e4d6;
 }
 
+/**
+ Blocks
+ */
 .blockmovetarget .accesshide {
   position: relative;
   left: initial;
@@ -27090,76 +27093,36 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   border-radius: 50%;
 }
 
-.dashboard-card-deck.one-row {
-  flex-flow: nowrap;
-  overflow-x: scroll;
+.card-grid {
+  display: flex;
+}
+.card-grid .card {
+  flex: 1;
+}
+.drawercontent .card-grid .col, .blockcolumn .card-grid .col {
+  flex: 0 0 auto;
+  max-width: 100%;
 }
 
-.summaryimage {
-  height: 5rem;
-  width: 5rem;
-  background-position: center;
-  background-size: cover;
+.card-carousel {
+  display: flex;
 }
-
-.dashboard-list-img {
-  height: 5rem;
-  width: 20rem;
-  background-position: center;
-  background-size: cover;
-}
-@media (max-width: 1199.98px) {
-  .dashboard-list-img {
-    width: 100%;
-  }
-}
-
-.dashboard-card-deck .dashboard-card {
-  margin-bottom: 0.5rem;
-  flex-basis: auto;
-  width: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.dashboard-card-deck .dashboard-card .dashboard-card-img {
-  height: 7rem;
-  background-position: center;
-  background-size: cover;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.dashboard-card-deck .dashboard-card .dashboard-card-footer {
-  padding: 0.8rem;
+.card-carousel .card {
+  flex: 1;
 }
 @media (min-width: 576px) {
-  .dashboard-card-deck.fixed-width-cards .dashboard-card {
-    width: 300px;
+  .card-carousel .card {
+    flex: 0 1 auto;
+    width: 240px;
     max-width: 100%;
   }
 }
 
-@media (min-width: 576px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(50% - 0.5rem);
-  }
-}
-@media (min-width: 840px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(33.33% - 0.5rem);
-  }
-}
-
-#block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) {
-  margin-left: 0;
-  margin-right: 0;
-}
-#block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-  width: calc(100% - 0.5rem) !important;
-}
-@media (max-width: 575.98px) {
-  #block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: 100% !important;
-  }
+.course-card .card-img-top,
+.theme-card .card-img-top {
+  height: 7rem;
+  background-position: center;
+  background-size: cover;
 }
 
 .block_recentlyaccessedcourses .paging-bar-container {
@@ -27181,23 +27144,19 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   width: 40px;
   height: 40px;
 }
-aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck.one-row {
-  flex-flow: wrap;
-  overflow-x: hidden;
-}
-aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck .card:nth-of-type(n+4) {
+aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4) {
   display: none;
 }
 #block-region-content .block_recentlyaccesseditems [data-region=more-items-button-container] {
   display: none;
 }
-.block_recentlyaccesseditems a.dashboard-card:hover, .block_recentlyaccesseditems a.dashboard-card:focus {
+.block_recentlyaccesseditems a.card:hover, .block_recentlyaccesseditems a.card:focus {
   text-decoration: none;
 }
-.block_recentlyaccesseditems a.dashboard-card:hover h6, .block_recentlyaccesseditems a.dashboard-card:focus h6 {
+.block_recentlyaccesseditems a.card:hover h6, .block_recentlyaccesseditems a.card:focus h6 {
   text-decoration: underline;
 }
-.block_recentlyaccesseditems a.dashboard-card small {
+.block_recentlyaccesseditems a.card small {
   color: #1d2125;
 }
 
@@ -27207,6 +27166,23 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck
 .block_myoverview .paged-content-page-container {
   min-height: 13rem;
 }
+.block_myoverview .summary-image {
+  height: 5rem;
+  width: 5rem;
+  background-position: center;
+  background-size: cover;
+}
+.block_myoverview .list-image {
+  height: 5rem;
+  width: 20rem;
+  background-position: center;
+  background-size: cover;
+}
+@media (max-width: 1199.98px) {
+  .block_myoverview .list-image {
+    width: 100%;
+  }
+}
 
 .block_timeline .paged-content-page-container {
   background-color: #fff;
diff --git a/theme/boost/upgrade.txt b/theme/boost/upgrade.txt
index 56523f61c1a..23c4150e582 100644
--- a/theme/boost/upgrade.txt
+++ b/theme/boost/upgrade.txt
@@ -19,6 +19,8 @@ information provided here is intended especially for theme designers.
   - g-variant and bg-gradient-variant
 * Bootstrap `.form-group` helper class is no longer used, use margin utilities instead (´mb-3´, ...).
 * Bootstrap `.form-inline` helper class is no longer used, use display utilities instead (`.d-flex.flex-wrap.align-items-center`).
+* The `.dashboard-card` class has been removed in favour of `.course-card` and `theme-card`.
+* Bootstrap `.card-deck` helper class is no longer used, use grid utility classes (row, row-cols, ...) instead.
 
 === 4.3 ===
 * The $activity-iconcontainer-height and $activity-iconcontainer-width variables have been changed from 50px to 52px.
diff --git a/theme/classic/scss/classic/post.scss b/theme/classic/scss/classic/post.scss
index c341750a601..644fd31e3b8 100644
--- a/theme/classic/scss/classic/post.scss
+++ b/theme/classic/scss/classic/post.scss
@@ -151,79 +151,13 @@
 }
 
 @media print {
-    #page-content .region-main, {
+    #page-content .region-main {
         max-width: 100% !important; /* stylelint-disable-line declaration-no-important */
         flex: 0 0 100% !important; /* stylelint-disable-line declaration-no-important */
         padding: 0 1rem 0 !important; /* stylelint-disable-line declaration-no-important */
     }
 }
 
-@include media-breakpoint-up(sm) {
-    .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-        width: calc(50% - #{$card-gutter});
-    }
-}
-
-@include media-breakpoint-up(md) {
-    .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-        width: calc(50% - #{$card-gutter});
-    }
-    .blocks-post,
-    .blocks-pre {
-        .dashboard-card-deck .dashboard-card {
-            width: calc(100% - #{$card-gutter});
-        }
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-        width: calc(33.33% - #{$card-gutter});
-    }
-    .blocks-post,
-    .blocks-pre {
-        .dashboard-card-deck .dashboard-card {
-            width: calc(50% - #{$card-gutter});
-        }
-    }
-}
-
-@include media-breakpoint-up(xl) {
-    .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-        width: calc(25% - #{$card-gutter});
-    }
-    .blocks-post,
-    .blocks-pre {
-        .dashboard-card-deck .dashboard-card {
-            width: calc(33.33% - #{$card-gutter});
-        }
-    }
-}
-
-@media (min-width: 1360px) {
-    .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-        width: calc(20% - #{$card-gutter});
-    }
-    .blocks-post,
-    .blocks-pre {
-        .dashboard-card-deck .dashboard-card {
-            width: calc(25% - #{$card-gutter});
-        }
-    }
-}
-
-@include media-breakpoint-up(md) {
-    .blockcolumn {
-        .dashboard-card-deck {
-            margin-left: 0;
-            margin-right: 0;
-            .dashboard-card {
-                width: calc(100% - #{$card-gutter}) !important; /* stylelint-disable-line declaration-no-important */
-            }
-        }
-    }
-}
-
 // Settings and Navigation blocks don't render well from default boost.
 .block_navigation,
 .block_settings {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 2ce2cd99c84..d6ffea95b01 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -26961,6 +26961,9 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   background-color: #d7e4d6;
 }
 
+/**
+ Blocks
+ */
 .blockmovetarget .accesshide {
   position: relative;
   left: initial;
@@ -27090,76 +27093,36 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   border-radius: 50%;
 }
 
-.dashboard-card-deck.one-row {
-  flex-flow: nowrap;
-  overflow-x: scroll;
+.card-grid {
+  display: flex;
+}
+.card-grid .card {
+  flex: 1;
+}
+.drawercontent .card-grid .col, .blockcolumn .card-grid .col {
+  flex: 0 0 auto;
+  max-width: 100%;
 }
 
-.summaryimage {
-  height: 5rem;
-  width: 5rem;
-  background-position: center;
-  background-size: cover;
+.card-carousel {
+  display: flex;
 }
-
-.dashboard-list-img {
-  height: 5rem;
-  width: 20rem;
-  background-position: center;
-  background-size: cover;
-}
-@media (max-width: 1199.98px) {
-  .dashboard-list-img {
-    width: 100%;
-  }
-}
-
-.dashboard-card-deck .dashboard-card {
-  margin-bottom: 0.5rem;
-  flex-basis: auto;
-  width: 100%;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.dashboard-card-deck .dashboard-card .dashboard-card-img {
-  height: 7rem;
-  background-position: center;
-  background-size: cover;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.dashboard-card-deck .dashboard-card .dashboard-card-footer {
-  padding: 0.8rem;
+.card-carousel .card {
+  flex: 1;
 }
 @media (min-width: 576px) {
-  .dashboard-card-deck.fixed-width-cards .dashboard-card {
-    width: 300px;
+  .card-carousel .card {
+    flex: 0 1 auto;
+    width: 240px;
     max-width: 100%;
   }
 }
 
-@media (min-width: 576px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(50% - 0.5rem);
-  }
-}
-@media (min-width: 840px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(33.33% - 0.5rem);
-  }
-}
-
-#block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) {
-  margin-left: 0;
-  margin-right: 0;
-}
-#block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-  width: calc(100% - 0.5rem) !important;
-}
-@media (max-width: 575.98px) {
-  #block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: 100% !important;
-  }
+.course-card .card-img-top,
+.theme-card .card-img-top {
+  height: 7rem;
+  background-position: center;
+  background-size: cover;
 }
 
 .block_recentlyaccessedcourses .paging-bar-container {
@@ -27181,23 +27144,19 @@ body.behat-site .action-menu .dropdown-subpanel-content.show {
   width: 40px;
   height: 40px;
 }
-aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck.one-row {
-  flex-flow: wrap;
-  overflow-x: hidden;
-}
-aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck .card:nth-of-type(n+4) {
+aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4) {
   display: none;
 }
 #block-region-content .block_recentlyaccesseditems [data-region=more-items-button-container] {
   display: none;
 }
-.block_recentlyaccesseditems a.dashboard-card:hover, .block_recentlyaccesseditems a.dashboard-card:focus {
+.block_recentlyaccesseditems a.card:hover, .block_recentlyaccesseditems a.card:focus {
   text-decoration: none;
 }
-.block_recentlyaccesseditems a.dashboard-card:hover h6, .block_recentlyaccesseditems a.dashboard-card:focus h6 {
+.block_recentlyaccesseditems a.card:hover h6, .block_recentlyaccesseditems a.card:focus h6 {
   text-decoration: underline;
 }
-.block_recentlyaccesseditems a.dashboard-card small {
+.block_recentlyaccesseditems a.card small {
   color: #1d2125;
 }
 
@@ -27207,6 +27166,23 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .dashboard-card-deck
 .block_myoverview .paged-content-page-container {
   min-height: 13rem;
 }
+.block_myoverview .summary-image {
+  height: 5rem;
+  width: 5rem;
+  background-position: center;
+  background-size: cover;
+}
+.block_myoverview .list-image {
+  height: 5rem;
+  width: 20rem;
+  background-position: center;
+  background-size: cover;
+}
+@media (max-width: 1199.98px) {
+  .block_myoverview .list-image {
+    width: 100%;
+  }
+}
 
 .block_timeline .paged-content-page-container {
   background-color: #fff;
@@ -39096,56 +39072,6 @@ body {
     padding: 0 1rem 0 !important; /* stylelint-disable-line declaration-no-important */
   }
 }
-@media (min-width: 576px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(50% - 0.5rem);
-  }
-}
-@media (min-width: 768px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(50% - 0.5rem);
-  }
-  .blocks-post .dashboard-card-deck .dashboard-card,
-  .blocks-pre .dashboard-card-deck .dashboard-card {
-    width: calc(100% - 0.5rem);
-  }
-}
-@media (min-width: 992px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(33.33% - 0.5rem);
-  }
-  .blocks-post .dashboard-card-deck .dashboard-card,
-  .blocks-pre .dashboard-card-deck .dashboard-card {
-    width: calc(50% - 0.5rem);
-  }
-}
-@media (min-width: 1200px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(25% - 0.5rem);
-  }
-  .blocks-post .dashboard-card-deck .dashboard-card,
-  .blocks-pre .dashboard-card-deck .dashboard-card {
-    width: calc(33.33% - 0.5rem);
-  }
-}
-@media (min-width: 1360px) {
-  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
-    width: calc(20% - 0.5rem);
-  }
-  .blocks-post .dashboard-card-deck .dashboard-card,
-  .blocks-pre .dashboard-card-deck .dashboard-card {
-    width: calc(25% - 0.5rem);
-  }
-}
-@media (min-width: 768px) {
-  .blockcolumn .dashboard-card-deck {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .blockcolumn .dashboard-card-deck .dashboard-card {
-    width: calc(100% - 0.5rem) !important; /* stylelint-disable-line declaration-no-important */
-  }
-}
 .block_navigation .block_tree.list > li > ul,
 .block_settings .block_tree.list > li > ul {
   padding-left: 0;