diff --git a/docs/src/_static/theme_override.css b/docs/src/_static/theme_override.css
index be9715ff2c..1d4d7bcb79 100644
--- a/docs/src/_static/theme_override.css
+++ b/docs/src/_static/theme_override.css
@@ -27,6 +27,31 @@ ul.squarelist {
   padding-left: 5em;
 }
 
+/* custom css for the cards on the homepage */
+.sd-card-img-top {
+    width: 15% !important;
+    position: absolute !important;
+    padding-left: 10px;
+    min-width: 50px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.sd-card-img {
+    height: auto;
+}
+
+.custom-title {
+    font-weight: bold;
+    color: #1B8FB7 !important;
+    text-align: left;
+}
+
+.custom-body {
+    text-align: left;
+    margin-left: max(45px, 15%);
+}
+
 .center {
     text-align: center;
 }
\ No newline at end of file
diff --git a/docs/src/index.rst b/docs/src/index.rst
index e771239503..2854e2e214 100644
--- a/docs/src/index.rst
+++ b/docs/src/index.rst
@@ -16,114 +16,73 @@ representations become unwieldy and inefficient.
 For more information see :ref:`why_iris`.
 
 
-.. grid:: 3
-
-    .. grid-item-card::
-        :text-align: center
+.. grid:: 1 1 2 2
+    :gutter: 2
+
+    .. grid-item-card:: Getting Started
+        :class-title: custom-title
+        :class-body: custom-body
+        :link: getting_started_index
+        :link-type: ref
         :img-top: _static/icon_shuttle.svg
-        :class-img-top: w-50 m-auto px-1 py-2 dark-light
-        :shadow: lg
-
-        Information on Iris, how to install and a gallery of examples that
-        create plots.
+        :class-img-top: dark-light
+        :class-card: sd-rounded-3
 
-        +++
-        .. button-ref:: getting_started_index
-            :ref-type: ref
-            :color: primary
-            :outline:
-            :expand:
+        Installing and gallery examples.
 
-                Getting Started
-
-    .. grid-item-card::
-        :text-align: center
+    .. grid-item-card:: User Guide
+        :class-title: custom-title
+        :class-body: custom-body
+        :link: getting_started_index
+        :link-type: ref
         :img-top: _static/icon_instructions.svg
-        :class-img-top: w-50 m-auto px-1 py-2 dark-light
-        :shadow: lg
-
-        Learn how to use Iris, including loading, navigating, saving,
-        plotting and more.
+        :class-img-top: dark-light
+        :class-card: sd-rounded-3
 
-        +++
-        .. button-ref:: user_guide_index
-            :ref-type: ref
-            :color: primary
-            :outline:
-            :expand:
+        Learn how to use Iris.
 
-                User Guide
-
-    .. grid-item-card::
-        :text-align: center
+    .. grid-item-card:: Developers Guide
+        :class-title: custom-title
+        :class-body: custom-body
+        :link: development_where_to_start
+        :link-type: ref
         :img-top: _static/icon_development.svg
-        :class-img-top: w-50 m-auto px-1 py-2 dark-light
-        :shadow: lg
-
-        Information on how you can contribute to Iris as a developer.
-
-        +++
-        .. button-ref:: development_where_to_start
-            :ref-type: ref
-            :color: primary
-            :outline:
-            :expand:
-
-                Developers Guide
+        :class-img-top: dark-light
+        :class-card: sd-rounded-3
 
+        Contribute to Iris as a developer.
 
-.. grid:: 3
-
-    .. grid-item-card::
-        :text-align: center
+    .. grid-item-card:: Iris API
+        :class-title: custom-title
+        :class-body: custom-body
+        :link: generated/api/iris.html
         :img-top: _static/icon_api.svg
-        :class-img-top: w-50 m-auto px-1 py-2 dark-light
-        :shadow: lg
-
-        Browse full Iris functionality by module.
+        :class-img-top: dark-light
+        :class-card: sd-rounded-3
 
-        +++
-        .. button-ref:: generated/api/iris
-            :ref-type: doc
-            :color: primary
-            :outline:
-            :expand:
+        Iris functionality by module.
 
-                Iris API
-
-    .. grid-item-card::
-        :text-align: center
+    .. grid-item-card:: What's New
+        :class-title: custom-title
+        :class-body: custom-body
+        :link: iris_whatsnew
+        :link-type: ref
         :img-top: _static/icon_new_product.svg
-        :class-img-top: w-50 m-auto px-1 py-2 dark-light
-        :shadow: lg
-
-        Find out what has recently changed in Iris.
+        :class-img-top: dark-light
+        :class-card: sd-rounded-3
 
-        +++
-        .. button-ref:: iris_whatsnew
-            :ref-type: ref
-            :color: primary
-            :outline:
-            :expand:
+        Recent changes in Iris.
 
-                What's New
-
-    .. grid-item-card::
-        :text-align: center
+    .. grid-item-card:: Voted Issues
+        :class-title: custom-title
+        :class-body: custom-body
+        :link: voted_issues_top
+        :link-type: ref
         :img-top: _static/icon_thumb.png
-        :class-img-top: w-50 m-auto px-1 py-2 dark-light
-        :shadow: lg
-
-        Raise the profile of issues by voting on them.
-
-        +++
-        .. button-ref:: voted_issues_top
-            :ref-type: ref
-            :color: primary
-            :outline:
-            :expand:
+        :class-img-top: dark-light
+        :class-card: sd-rounded-3
 
-                Voted Issues
+        Raise the profile of issues by voting.
 
 
 Icons made by FreePik from `Flaticon <https://www.flaticon.com/>`_
diff --git a/docs/src/whatsnew/latest.rst b/docs/src/whatsnew/latest.rst
index 2ec0088381..730880b368 100644
--- a/docs/src/whatsnew/latest.rst
+++ b/docs/src/whatsnew/latest.rst
@@ -81,6 +81,9 @@ This document explains the changes made to Iris for this release
 📚 Documentation
 ================
 
+#. `@tkknight`_ reduced the space used on the documentation homepage by the quick
+   link cards to allow for easier reading.  (:pull:`6886`)
+
 #. `@tkknight`_ added a gallery carousel to the documentation homepage. (:pull:`6884`)