diff --git a/course/classes/output/cm_format.php b/course/classes/output/cm_format.php
index 1ae369554b4..1cd35a7f1ef 100644
--- a/course/classes/output/cm_format.php
+++ b/course/classes/output/cm_format.php
@@ -24,13 +24,14 @@
 
 namespace core_course\output;
 
-use core_course\course_format;
-use section_info;
-use completion_info;
-use renderable;
-use templatable;
 use cm_info;
+use core\activity_dates;
+use core_completion\cm_completion_details;
+use core_course\course_format;
+use renderable;
+use section_info;
 use stdClass;
+use templatable;
 
 /**
  * Base class to render a course module inside a course format.
@@ -82,20 +83,26 @@ class cm_format implements renderable, templatable {
      * @return stdClass data context for a mustache template
      */
     public function export_for_template(\renderer_base $output): stdClass {
+        global $USER;
+
         $format = $this->format;
-        $course = $format->get_course();
         $mod = $this->mod;
         $displayoptions = $this->displayoptions;
+        $course = $mod->get_course();
 
+        $completiondetails = cm_completion_details::get_instance($mod, $USER->id, $course->showcompletionconditions);
+        $activitydates = [];
+        if ($course->showactivitydates) {
+            $activitydates = activity_dates::get_dates_for_module($mod, $USER->id);
+        }
+        $activityinfo = new activity_information($mod, $completiondetails, $activitydates);
         $data = (object)[
             'cmname' => $output->course_section_cm_name($mod, $displayoptions),
             'afterlink' => $mod->afterlink,
             'altcontent' => $output->course_section_cm_text($mod, $displayoptions),
             'availability' => $output->course_section_cm_availability($mod, $displayoptions),
             'url' => $mod->url,
-            'completion' => $output->course_section_cm_completion(
-                $course, $this->completioninfo, $mod, $displayoptions
-            ),
+            'activityinfo' => $activityinfo->export_for_template($output),
         ];
 
         if (!empty($mod->indent)) {
@@ -125,7 +132,7 @@ class cm_format implements renderable, templatable {
             $data->moveicon = course_get_cm_move($mod, $returnsection);
         }
 
-        if (!empty($data->completion) || !empty($data->extras)) {
+        if (!empty($data->extras)) {
             $data->hasextras = true;
         }
 
diff --git a/course/classes/output/section_format/cmitem.php b/course/classes/output/section_format/cmitem.php
index 6a6bc5eb3a7..07b43152984 100644
--- a/course/classes/output/section_format/cmitem.php
+++ b/course/classes/output/section_format/cmitem.php
@@ -89,12 +89,19 @@ class cmitem implements renderable, templatable {
         $data = new stdClass();
         $data->cms = [];
 
+        $showactivityconditions = $course->showcompletionconditions == COMPLETION_SHOW_CONDITIONS;
+        $showactivitydates = !empty($course->showactivitydates);
+
+        // This will apply styles to the course homepage when the activity information output component is displayed.
+        $hasinfo = $showactivityconditions || $showactivitydates;
+
         $item = new $this->cmclass($format, $this->section, $completioninfo, $mod, $this->displayoptions);
         return (object)[
             'id' => $mod->id,
             'module' => $mod->modname,
             'extraclasses' => $mod->extraclasses,
             'cmformat' => $item->export_for_template($output),
+            'hasinfo' => $hasinfo,
         ];
     }
 }
diff --git a/course/renderer.php b/course/renderer.php
index fce2e5ff714..e40d95d8698 100644
--- a/course/renderer.php
+++ b/course/renderer.php
@@ -848,14 +848,6 @@ class core_course_renderer extends plugin_renderer_base {
      *
      * @deprecated since 4.0 - use core_course output components instead.
      *
-     * This function calls:
-     * {@link core_course_renderer::course_section_cm_name()}
-     * {@link core_course_renderer::course_section_cm_text()}
-     * {@link core_course_renderer::course_section_cm_availability()}
-     * {@link core_course_renderer::course_section_cm_completion()}
-     * {@link course_get_cm_edit_actions()}
-     * {@link core_course_renderer::course_section_cm_edit_actions()}
-     *
      * @param stdClass $course
      * @param completion_info $completioninfo
      * @param cm_info $mod
diff --git a/course/templates/local/cm_format.mustache b/course/templates/local/cm_format.mustache
index 0e905d36d55..78fa35ad901 100644
--- a/course/templates/local/cm_format.mustache
+++ b/course/templates/local/cm_format.mustache
@@ -28,9 +28,17 @@
         "afterlink": "<span class=\"badge badge-primary\">30 unread messages</span>",
         "hasextras": true,
         "extras": ["<span class=\"badge badge-secondary\">[extras]</span>"],
-        "completion": "<span class=\"badge badge-success\">Completed!</span>",
+        "activityinfo": {
+            "activityname": "Activity example",
+            "hascompletion": true,
+            "uservisible": true,
+            "hasdates": true,
+            "isautomatic": true,
+            "istrackeduser": true,
+            "activitydates": [{ "label": "Opens:", "timestamp": 1293876000 }],
+            "completiondetails": [{ "statusincomplete": 1, "description": "Receive a grade" }]
+        },
         "availability": "<div><span class=\"badge badge-info\">Restricted</span> Available from <strong>3 Dec 2029</strong></div>"
-
     }
 }}
 <div>
@@ -57,10 +65,12 @@
             {{#hasextras}}
             <div class="actions">
                 {{#extras}} {{{.}}} {{/extras}}
-                {{{completion}}}
             </div>
             {{/hasextras}}
 
+            {{#activityinfo}}
+                {{> core_course/activity_info}}
+            {{/activityinfo}}
             {{{availability}}}
 
             {{#hasurl}} {{{altcontent}}} {{/hasurl}}
diff --git a/course/templates/local/section_format/cmitem.mustache b/course/templates/local/section_format/cmitem.mustache
index de9ec02cc19..72bbb6752ee 100644
--- a/course/templates/local/section_format/cmitem.mustache
+++ b/course/templates/local/section_format/cmitem.mustache
@@ -36,7 +36,7 @@
         "extraclasses": "newmessages"
     }
 }}
-<li class="activity {{module}} modtype_{{module}} {{extraclasses}}" id="module-{{id}}">
+<li class="activity {{module}} modtype_{{module}} {{extraclasses}} {{#hasinfo}}hasinfo{{/hasinfo}}" id="module-{{id}}">
 {{#cmformat}}
     {{> core_course/local/cm_format}}
 {{/cmformat}}
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 5e62eced2e4..c0fe3754188 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -205,8 +205,19 @@ body:not(.editing)  .sitetopic ul.section {
 }
 
 .section li.activity {
-    padding: .2em;
+    padding: 0.2em;
     clear: both;
+
+    &.hasinfo {
+        border-bottom: $border-width solid $table-border-color;
+        padding-top: map-get($spacers, 3);
+        padding-bottom: map-get($spacers, 3);
+
+        &:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+        }
+    }
 }
 
 .section .activity .activityinstance .groupinglabel {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index bed1b9a9f15..722612c67cd 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -13375,8 +13375,15 @@ body:not(.editing) .sitetopic ul.section {
   padding: .2em; }
 
 .section li.activity {
-  padding: .2em;
+  padding: 0.2em;
   clear: both; }
+  .section li.activity.hasinfo {
+    border-bottom: 1px solid #dee2e6;
+    padding-top: 1rem;
+    padding-bottom: 1rem; }
+    .section li.activity.hasinfo:last-child {
+      border-bottom: 0;
+      padding-bottom: 0; }
 
 .section .activity .activityinstance .groupinglabel {
   padding-left: 30px; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index ca8e0538a35..2829786fc38 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -13589,8 +13589,15 @@ body:not(.editing) .sitetopic ul.section {
   padding: .2em; }
 
 .section li.activity {
-  padding: .2em;
+  padding: 0.2em;
   clear: both; }
+  .section li.activity.hasinfo {
+    border-bottom: 1px solid #dee2e6;
+    padding-top: 1rem;
+    padding-bottom: 1rem; }
+    .section li.activity.hasinfo:last-child {
+      border-bottom: 0;
+      padding-bottom: 0; }
 
 .section .activity .activityinstance .groupinglabel {
   padding-left: 30px; }