doc: migrate to sphinx-design and update sphinx

sphinx-panels is deprecated, and sphinx-design is the better
replacement.

This patch migrates everything we had in pyside and shiboken,
which was useful to remove many CSS related hacks for things
we were forcing before.

The example gallery was also adapted to generate sphinx-design
valid code. Additional adaptation to some examples and files were
included as well, which improved the overall example experience.

We used this to change to update sphinx as well, which before
was not possible to update due to sphinx-panels.

Fixes: PYSIDE-2244
Change-Id: Ia3f57f536591ea299bf87302e930203b64fafd7e
Reviewed-by: Shyamnath Premnadh <Shyamnath.Premnadh@qt.io>

15 files changed, 636 insertions, 923 deletions

diff --git a/sources/pyside6/doc/_static/css/qt_style.css b/sources/pyside6/doc/_static/css/qt_style.css
index 7a86c0b15..3e98c8ee8 100644
--- a/sources/pyside6/doc/_static/css/qt_style.css
+++ b/sources/pyside6/doc/_static/css/qt_style.css
@@ -1,39 +1,15 @@
-.btn-qt:hover,
-.btn-qt:active,
-.btn-qt:focus,
-.btn-qt.active {
-  background: var(--color-brand-primary);
-  color: #fff !important;
-  border-color: #fff;
+.text-center {
+  text-align: center !important;
 }
 
-.btn-link {
-  color: var(--color-brand-primary) !important;
-}
-
-.btn-link:hover {
-  color: #222840 !important;
-  text-decoration: underline;
-}
-
-/* Using !important is not recommended, but out CSS is being added
- * to the pages before the bootstrap ones, so we cannot override them
- * without using it */
-.btn-qt {
-  color: var(--color-brand-primary) !important;
-  border-color: var(--color-brand-primary) !important;
-  font-weight: bold !important;
-}
-.card-img-top-main {
+.text-center img {
     padding-top: 10px;
     height: 70px !important;
 }
 
-.card-img-top {
-  object-fit: contain;
-  height: 120px;
-  padding-top: 20px;
-  transform: scale(1.3, 1.3);
+.cover-img img {
+  object-fit: cover;
+  height: 50%;
 }
 
 /* Tables */
@@ -80,7 +56,7 @@ table.docutils td ul > li {
 }
 
 /* We cannot put a :download:`....` command inside
- * a sphinx-panels button, so we add some properties from the button
+ * a sphinx-design button, so we add some properties from the button
  * to the download class to mimic it */
 code.download {
   text-align: center;
diff --git a/sources/pyside6/doc/api.rst b/sources/pyside6/doc/api.rst
index 62273c31f..7bbe2ce1c 100644
--- a/sources/pyside6/doc/api.rst
+++ b/sources/pyside6/doc/api.rst
@@ -8,33 +8,23 @@ Basic modules
 
 These are the main modules that help you build a Widget-based UI.
 
-.. panels::
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    :mod:`QtCore <PySide6.QtCore>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtCore <PySide6.QtCore>`
 
-    Provides core non-GUI functionality, like signal and
-    slots, properties, base classes of item models,
-    serialization, and more.
+        Provides core non-GUI functionality, like signal and slots, properties,
+        base classes of item models, serialization, and more.
 
-    ---
+    .. grid-item-card:: :mod:`QtGui <PySide6.QtGui>`
 
-    :mod:`QtGui <PySide6.QtGui>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Extends QtCore with GUI functionality: Events, windows and screens,
+        OpenGL and raster-based 2D painting, as well as images.
 
-    Extends QtCore with GUI functionality: Events, windows
-    and screens, OpenGL and raster-based 2D painting, as
-    well as images.
+    .. grid-item-card:: :mod:`QtWidgets <PySide6.QtWidgets>`
 
-    ---
-
-    :mod:`QtWidgets <PySide6.QtWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides ready to use Widgets for your application,
-    including graphical elements for your UI.
+        Provides ready to use Widgets for your application, including graphical
+        elements for your UI.
 
 QML and Qt Quick
 ----------------
@@ -42,31 +32,21 @@ QML and Qt Quick
 Use these modules to interact with the `QML Language <https://doc.qt.io/qt-5.qmlapplications>`_,
 from Python.
 
-.. panels::
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-
-    :mod:`QtQml <PySide6.QtQml>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    The base Python API to interact with the
-    module.
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    ---
+    .. grid-item-card:: :mod:`QtQml <PySide6.QtQml>`
 
-    :mod:`QtQuick <PySide6.QtQuick>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        The base Python API to interact with the module.
 
-    Provides classes to embed Qt Quick in Qt
-    applications.
+    .. grid-item-card:: :mod:`QtQuick <PySide6.QtQuick>`
 
-    ---
+        Provides classes to embed Qt Quick in Qt applications.
 
-    :mod:`QtQuickWidgets <PySide6.QtQuickWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtQuickWidgets <PySide6.QtQuickWidgets>`
 
-    Provides the QQuickWidget class to embed Qt
-    Quick in widget-based applications.
+        Provides the QQuickWidget class to embed Qt Quick in widget-based
+        applications.
 
 All the modules
 ---------------
diff --git a/sources/pyside6/doc/conf.py.in b/sources/pyside6/doc/conf.py.in
index 441bb87bd..b80746da4 100644
--- a/sources/pyside6/doc/conf.py.in
+++ b/sources/pyside6/doc/conf.py.in
@@ -30,7 +30,7 @@ extensions = ['sphinx.ext.autodoc', 'sphinx.ext.doctest', 'sphinx.ext.ifconfig',
     'sphinx.ext.coverage', 'sphinx.ext.intersphinx', 'sphinx.ext.todo',
     'sphinx.ext.graphviz', 'inheritance_diagram', 'pysideinclude',
     'sphinx.ext.viewcode',
-    'sphinx_panels', 'sphinx_copybutton', 'myst_parser']
+    'sphinx_design', 'sphinx_copybutton', 'myst_parser']
 
 myst_enable_extensions = [
     "amsmath",
@@ -229,8 +229,3 @@ if @SKIP_SPHINX_WARNINGS@:
 
 # -- Options for qthelp output ---------------------------------------------------
 qthelp_theme = 'pysidedocs_qthelp'
-
-# Sphinx Panels color for inactive tab
-panels_css_variables = {
-    "tabs-color-label-inactive": "rgba(116, 116, 116, 1.0)",
-}
diff --git a/sources/pyside6/doc/faq/whyqtforpython.rst b/sources/pyside6/doc/faq/whyqtforpython.rst
index 6046249b9..0f0ab9aaf 100644
--- a/sources/pyside6/doc/faq/whyqtforpython.rst
+++ b/sources/pyside6/doc/faq/whyqtforpython.rst
@@ -10,7 +10,7 @@ Why Qt for Python?
 
     <div style="float: right; padding-left: 20px; max-width: 30%;
     background-color: #e9eff5; padding-top: 5px;">
-      <img src="../../_images/tiobe.png"
+      <img src="../_images/tiobe.png"
           style="width: 90%;"
           alt="TIOBE index for Python" />
       <p style="font-size: 80%;">
@@ -67,13 +67,9 @@ Creating Qt applications in Python requires only a few lines of code,
 and not much configuration is required to execute it. As an /unfair/
 example, let's check the code of a simple hello world application:
 
+.. tab-set::
 
-.. panels::
-   :container: container-lg
-
-   :column: col-lg-6 p-2
-
-   .. tabbed:: C++ Header
+   .. tab-item:: C++ Header
 
        .. code-block:: cpp
 
@@ -96,7 +92,7 @@ example, let's check the code of a simple hello world application:
 
           #endif // MAINWINDOW_H
 
-   .. tabbed:: C++ Implementation
+   .. tab-item::  C++ Implementation
 
        .. code-block:: cpp
 
@@ -115,7 +111,7 @@ example, let's check the code of a simple hello world application:
               m_button->setText("Ready");
           }
 
-   .. tabbed:: C++ Main
+   .. tab-item:: C++ Main
 
        .. code-block:: cpp
 
@@ -130,10 +126,9 @@ example, let's check the code of a simple hello world application:
               return app.exec(d);
           }
 
-   ---
-   :column: col-lg-6 p-2
+.. tab-set::
 
-   .. tabbed:: Python
+   .. tab-item:: Python
 
       .. code-block:: python
 
diff --git a/sources/pyside6/doc/gettingstarted/index.rst b/sources/pyside6/doc/gettingstarted/index.rst
index 8b4c56da0..1cc587be8 100644
--- a/sources/pyside6/doc/gettingstarted/index.rst
+++ b/sources/pyside6/doc/gettingstarted/index.rst
@@ -41,38 +41,44 @@ Guides per platform
 
 You can refer to the following pages for platform specific instructions:
 
-.. panels::
-    :body: align-items-center jutify-content-center text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center img-responsive card-img-top-main
-
-    :img-top: ../images/windows.svg
-
-    +++
-
-    .. link-button:: windows
-        :type: ref
-        :text: Windows
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: ../images/macos.svg
-
-    +++
-
-    .. link-button:: macOS
-        :type: ref
-        :text: macOS
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: ../images/linux.svg
-
-    +++
-
-    .. link-button:: linux
-        :type: ref
-        :text: Linux
-        :classes: btn-qt btn-block stretched-link
+.. grid:: 1 3 3 3
+    :gutter: 2
+
+    .. grid-item-card::
+        :img-top: ../images/windows.svg
+        :class-item: text-center
+
+        +++
+        .. button-ref:: windows
+            :color: primary
+            :outline:
+            :expand:
+
+            Windows
+
+    .. grid-item-card::
+        :img-top: ../images/macos.svg
+        :class-item: text-center
+
+        +++
+        .. button-ref:: macOS
+            :color: primary
+            :outline:
+            :expand:
+
+            macOS
+
+    .. grid-item-card::
+        :img-top: ../images/linux.svg
+        :class-item: text-center
+
+        +++
+        .. button-ref:: linux
+            :color: primary
+            :outline:
+            :expand:
+
+            Linux
 
 .. important:: |project| does not yet support WebAssembly and the mobile operating systems (Android or iOS).
                Most Linux-based embedded OS provide PySide with their official
diff --git a/sources/pyside6/doc/images/macos.svg b/sources/pyside6/doc/images/macos.svg
index bba859b98..01b8cb002 100644
--- a/sources/pyside6/doc/images/macos.svg
+++ b/sources/pyside6/doc/images/macos.svg
@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="842.32007"
-   height="1000.0001"
+   viewBox="0 0 4875 4875"
    version="1.1"
    id="svg4"
-   sodipodi:docname="macos.svg"
+   sodipodi:docname="macOS.svg"
    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -22,18 +21,18 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
-     inkscape:zoom="0.87099989"
-     inkscape:cx="378.30085"
-     inkscape:cy="500.00006"
-     inkscape:window-width="2552"
-     inkscape:window-height="1432"
-     inkscape:window-x="1924"
-     inkscape:window-y="4"
+     inkscape:zoom="0.17866667"
+     inkscape:cx="2056.9029"
+     inkscape:cy="2443.097"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg4" />
   <path
      fill="#666"
-     d="M824.66636 779.30363c-15.12299 34.93724-33.02368 67.09674-53.7638 96.66374-28.27076 40.3074-51.4182 68.2078-69.25717 83.7012-27.65347 25.4313-57.2822 38.4556-89.00964 39.1963-22.77708 0-50.24539-6.4813-82.21973-19.629-32.07926-13.0861-61.55985-19.5673-88.51583-19.5673-28.27075 0-58.59083 6.4812-91.02193 19.5673-32.48053 13.1477-58.64639 19.9994-78.65196 20.6784-30.42501 1.29623-60.75123-12.0985-91.02193-40.2457-19.32039-16.8514-43.48632-45.7394-72.43607-86.6641-31.060778-43.7024-56.597041-94.37983-76.602609-152.15586C10.740416 658.44309 0 598.01283 0 539.50845c0-67.01648 14.481044-124.8172 43.486336-173.25401C66.28194 327.34823 96.60818 296.6578 134.5638 274.1276c37.95566-22.53016 78.96676-34.01129 123.1321-34.74585 24.16591 0 55.85633 7.47508 95.23784 22.166 39.27042 14.74029 64.48571 22.21538 75.54091 22.21538 8.26518 0 36.27668-8.7405 83.7629-26.16587 44.90607-16.16001 82.80614-22.85118 113.85458-20.21546 84.13326 6.78992 147.34122 39.95559 189.37699 99.70686-75.24463 45.59122-112.46573 109.4473-111.72502 191.36456.67899 63.8067 23.82643 116.90384 69.31888 159.06309 20.61664 19.56727 43.64066 34.69027 69.2571 45.4307-5.55531 16.11062-11.41933 31.54225-17.65372 46.35662zM631.70926 20.0057c0 50.01141-18.27108 96.70693-54.6897 139.92782-43.94932 51.38118-97.10817 81.07162-154.75459 76.38659-.73454-5.99983-1.16045-12.31444-1.16045-18.95003 0-48.01091 20.9006-99.39207 58.01678-141.40314 18.53027-21.27094 42.09746-38.95744 70.67685-53.0663C578.3158 9.00229 605.2903 1.31621 630.65988 0c.74076 6.68575 1.04938 13.37191 1.04938 20.00505z"
+     d="m 4217.2809,3659.1573 c -67.1033,155.0227 -146.5318,297.7206 -238.5597,428.9145 -125.4425,178.8514 -228.1514,302.6507 -307.3064,371.3978 -122.7033,112.843 -254.1713,170.6343 -394.952,173.9209 -101.0661,0 -222.9479,-28.7587 -364.8238,-87.0974 -142.3418,-58.0655 -273.1524,-86.8235 -392.7608,-86.8235 -125.4424,0 -259.9782,28.758 -403.8809,86.8235 -144.1218,58.3387 -260.2248,88.7411 -348.9927,91.7538 -135.0014,5.7518 -269.5646,-53.6831 -403.8809,-178.5773 -85.7283,-74.7731 -192.9569,-202.9541 -321.4121,-384.5447 C 902.88949,3881.0097 789.58031,3656.1447 700.81195,3399.782 605.74429,3122.8775 558.08701,2854.7371 558.08701,2595.1424 c 0,-297.3638 64.25482,-553.8363 192.95678,-768.7591 101.14827,-172.6342 235.71135,-308.8131 404.12711,-408.7836 168.4162,-99.9703 350.3899,-150.914 546.3595,-154.1734 107.2285,0 247.8447,33.1682 422.5877,98.3545 174.25,65.4052 286.1345,98.5736 335.1882,98.5736 36.6747,0 160.9663,-38.7834 371.6716,-116.1026 199.256,-71.705 367.4256,-101.3949 505.1932,-89.7 373.3149,30.1284 653.78,177.2902 840.3002,442.4178 -333.8741,202.2962 -499.0309,485.6375 -495.7444,849.1192 3.0132,283.1218 105.7221,518.7232 307.5803,705.7915 91.4803,86.8235 193.6417,153.9273 307.3064,201.5844 -24.6494,71.4857 -50.6695,139.9584 -78.3327,205.6926 z M 3361.0953,290.01478 c 0,221.90982 -81.0722,429.10615 -242.6678,620.88525 -195.0111,227.98777 -430.8867,359.72937 -686.6746,338.94127 -3.2589,-26.6223 -5.1489,-54.6418 -5.1489,-84.085 0,-213.03328 92.7396,-441.02035 257.431,-627.43123 82.222,-94.38292 186.794,-172.86107 313.606,-235.46509 126.5378,-61.66949 246.2285,-95.77377 358.7983,-101.61416 3.2866,29.66615 4.656,59.3338 4.656,88.76593 z"
      id="path2"
-     style="fill:#53586b;fill-opacity:1" />
+     style="fill:#53586b;fill-opacity:1;stroke-width:4.43719" />
 </svg>
diff --git a/sources/pyside6/doc/index.rst b/sources/pyside6/doc/index.rst
index 55dac83f8..e203c8ae9 100644
--- a/sources/pyside6/doc/index.rst
+++ b/sources/pyside6/doc/index.rst
@@ -51,135 +51,151 @@ and to learn what is installed with the ``pyside6``, check the
 Documentation
 =============
 
-.. panels::
-    :body: align-items-center jutify-content-center text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center img-responsive card-img-top-main
-
-    :img-top: images/Desktop.svg
-
-    Write your first Qt application.
-
-    +++
-
-    .. link-button:: quickstart
-        :type: ref
-        :text: Start here!
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/Support.svg
-
-    Modules, docs, and cross compilation.
-
-    +++
-
-    .. link-button:: gettingstarted/index
-        :type: ref
-        :text: Build Instructions
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/Commercial.svg
-
-    Packages, installation, and details.
-
-    +++
-
-    .. link-button:: commercial-page
-        :type: ref
-        :text: Commercial
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/Dev.svg
-
-    PySide API reference.
-
-    +++
-
-    .. link-button:: api
-        :type: ref
-        :text: API Docs
-        :classes: btn-qt btn-block stretched-link
-
-    ---
-    :img-top: images/Tutorials.svg
-
-    Learn with step-by-step guides.
-
-    +++
-
-    .. link-button:: tutorials/index
-        :type: ref
-        :text: Tutorials
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/Examples.svg
-
-    Check all the available examples.
-
-    +++
-
-    .. link-button:: examples/index
-        :type: ref
-        :text: Examples
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/Training.svg
-
-    Watch webinars, talks, and more.
-
-    +++
-
-    .. link-button:: videos
-        :type: ref
-        :text: Videos
-        :classes: btn-qt btn-block stretched-link
-
-    ---
-    :img-top: images/Deployment.svg
-
-    Learn to deploy your applications.
-
-    +++
-
-    .. link-button:: deployment-guides
-        :type: ref
-        :text: Deployment
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/cpp_python.svg
-
-    Generate C++ to Python bindings.
-
-    +++
-
-    .. link-button:: shiboken6/index.html
-        :text: Shiboken
-        :classes: btn-qt btn-block stretched-link
-
-    ---
-    :img-top: images/stopwatch.svg
-
-    API differences and known issues.
-
-    +++
-
-    .. link-button:: considerations
-        :type: ref
-        :text: Considerations
-        :classes: btn-qt btn-block stretched-link
-    ---
-    :img-top: images/Development.svg
-
-    Notes for Developers.
-
-    +++
-
-    .. link-button:: developer-notes
-        :type: ref
-        :text: Developers
-        :classes: btn-qt btn-block stretched-link
-
+.. grid:: 1 3 3 3
+    :gutter: 2
+
+    .. grid-item-card::
+        :img-top: images/Desktop.svg
+        :class-item: text-center
+
+        Write your first Qt application.
+        +++
+        .. button-ref:: quick-start
+            :color: primary
+            :outline:
+            :expand:
+
+            Start here!
+
+    .. grid-item-card::
+        :img-top: images/Support.svg
+        :class-item: text-center
+
+        Modules, docs, and cross compilation.
+        +++
+        .. button-ref:: gettingstarted/index
+            :color: primary
+            :outline:
+            :expand:
+
+            Build Instructions
+
+    .. grid-item-card::
+        :img-top: images/Commercial.svg
+        :class-item: text-center
+
+        Packages, installation, and details.
+        +++
+        .. button-ref:: commercial-page
+            :color: primary
+            :outline:
+            :expand:
+
+            Commercial
+
+    .. grid-item-card::
+        :img-top: images/Dev.svg
+        :class-item: text-center
+
+        PySide API reference.
+        +++
+        .. button-ref:: api
+            :color: primary
+            :outline:
+            :expand:
+
+            API Docs
+
+    .. grid-item-card::
+        :img-top: images/Tutorials.svg
+        :class-item: text-center
+
+        Learn with step-by-step guides.
+        +++
+        .. button-ref:: tutorials/index
+            :color: primary
+            :outline:
+            :expand:
+
+            Tutorials
+
+    .. grid-item-card::
+        :img-top: images/Examples.svg
+        :class-item: text-center
+
+        Check all the available examples.
+        +++
+        .. button-ref:: examples/index
+            :color: primary
+            :outline:
+            :expand:
+
+            Examples
+
+    .. grid-item-card::
+        :img-top: images/Training.svg
+        :class-item: text-center
+
+        Watch webinars, talks, and more.
+        +++
+        .. button-ref:: videos
+            :color: primary
+            :outline:
+            :expand:
+
+            Videos
+
+    .. grid-item-card::
+        :img-top: images/Deployment.svg
+        :class-item: text-center
+
+        Learn to deploy your applications.
+        +++
+        .. button-ref:: deployment-guides
+            :color: primary
+            :outline:
+            :expand:
+
+            Deployment
+
+    .. grid-item-card::
+        :img-top: images/cpp_python.svg
+        :class-item: text-center
+
+        Generate C++ to Python bindings.
+        +++
+        .. button-link:: shiboken6/index.html
+            :color: primary
+            :outline:
+            :expand:
+
+            Shiboken
+
+    .. grid-item-card::
+        :img-top: images/stopwatch.svg
+        :class-item: text-center
+
+        API differences and known issues.
+        +++
+        .. button-ref:: considerations
+            :color: primary
+            :outline:
+            :expand:
+
+            Considerations
+
+    .. grid-item-card::
+        :img-top: images/Development.svg
+        :class-item: text-center
+
+        Notes for Developers.
+        +++
+        .. button-ref:: developer-notes
+            :color: primary
+            :outline:
+            :expand:
+
+            Developers
 
 
 We have also a `wiki page`_ where you can find how to report bugs, contribute or contact the community.
diff --git a/sources/pyside6/doc/modules.rst b/sources/pyside6/doc/modules.rst
index c4c8852bf..5596c37ea 100644
--- a/sources/pyside6/doc/modules.rst
+++ b/sources/pyside6/doc/modules.rst
@@ -7,358 +7,220 @@ Qt Modules Supported by Qt for Python
 
    PySide6/Qt*/index
 
-.. panels::
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    :mod:`QtBluetooth <PySide6.QtBluetooth>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtBluetooth <PySide6.QtBluetooth>`
 
-    The Bluetooth API provides connectivity between Bluetooth enabled devices.
+        The Bluetooth API provides connectivity between Bluetooth enabled
+        devices.
 
-    ---
 
-    :mod:`QtCharts <PySide6.QtCharts>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtCharts <PySide6.QtCharts>`
 
-    Provides a set of easy to use chart components.
+        Provides a set of easy to use chart components.
 
-    ---
+    .. grid-item-card:: :mod:`QtConcurrent <PySide6.QtConcurrent>`
 
-    :mod:`QtConcurrent <PySide6.QtConcurrent>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides high-level APIs that make it possible to write multi-threaded
+        programs without using low-level threading primitives such as mutexes,
+        read-write locks, wait conditions, or semaphores.
 
-    Provides high-level APIs that make it possible
-    to write multi-threaded programs without using low-level threading
-    primitives such as mutexes, read-write locks, wait conditions, or semaphores.
 
-    ---
+    .. grid-item-card:: :mod:`QtCore <PySide6.QtCore>`
 
-    :mod:`QtCore <PySide6.QtCore>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides core non-GUI functionality.
 
-    Provides core non-GUI functionality.
+    .. grid-item-card:: :mod:`QtDataVisualization <PySide6.QtDataVisualization>`
 
-    ---
+        Provides a way to visualize data in 3D as bar, scatter, and surface
+        graphs.
 
-    :mod:`QtDataVisualization <PySide6.QtDataVisualization>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtDBus <PySide6.QtDBus>`
 
-    Provides a way to visualize data in 3D as bar, scatter, and surface graphs.
+        D-Bus is an Inter-Process Communication (IPC) and Remote Procedure
+        Calling (RPC) mechanism originally developed for Linux to replace
+        existing and competing IPC solutions with one unified protocol
 
-    ---
+    .. grid-item-card:: :mod:`QtDesigner <PySide6.QtDesigner>`
 
-    :mod:`QtDBus <PySide6.QtDBus>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides classes to extend Qt Designer.
 
-    D-Bus is an Inter-Process Communication (IPC) and Remote Procedure
-    Calling (RPC) mechanism originally developed for Linux to replace
-    existing and competing IPC solutions with one unified protocol
+    .. grid-item-card:: :mod:`QtGui <PySide6.QtGui>`
 
-    ---
+        Extends QtCore with GUI functionality.
 
-    :mod:`QtDesigner <PySide6.QtDesigner>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtHelp <PySide6.QtHelp>`
 
-    Provides classes to extend Qt Designer.
+        Provides classes for integrating online documentation in applications.
 
-    ---
+    .. grid-item-card:: :mod:`Qt Multimedia <PySide6.QtMultimedia>`
 
-    :mod:`QtGui <PySide6.QtGui>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides API for multimedia-specific use cases.
 
-    Extends QtCore with GUI functionality.
+    .. grid-item-card:: :mod:`Qt Multimedia Widgets <PySide6.QtMultimediaWidgets>`
 
-    ---
+        Provides the widget-based multimedia API.
 
-    :mod:`QtHelp <PySide6.QtHelp>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtNetwork <PySide6.QtNetwork>`
 
-    Provides classes for integrating online documentation in applications.
+        Offers classes that let you to write TCP/IP clients and servers.
 
-    ---
+    .. grid-item-card:: :mod:`Qt Network Authorization <PySide6.QtNetworkAuth>`
 
-    :mod:`Qt Multimedia <PySide6.QtMultimedia>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides a set of APIs that enable Qt applications to obtain limited
+        access to online accounts and HTTP services without exposing users'
+        passwords.
 
-    Provides API for multimedia-specific use cases.
+    .. grid-item-card:: :mod:`QtNfc <PySide6.QtNfc>`
 
-    ---
+        The NFC API provides connectivity between NFC enabled devices.
 
-    :mod:`Qt Multimedia Widgets <PySide6.QtMultimediaWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtOpenGL <PySide6.QtOpenGL>`
 
-    Provides the widget-based multimedia API.
+        Offers classes that make it easy to use OpenGL in Qt applications.
 
-    ---
+    .. grid-item-card:: :mod:`QtOpenGL Widgets <PySide6.QtOpenGLWidgets>`
 
-    :mod:`QtNetwork <PySide6.QtNetwork>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides the  OpenGLWidget class enabling OpenGL rendering for
+        a certain part of the widget tree.
 
-    Offers classes that let you to write TCP/IP clients and servers.
+    .. grid-item-card:: :mod:`Qt Positioning <PySide6.QtPositioning>`
 
-    ---
+        Provides access to position, satellite info and area monitoring
+        classes.
 
-    :mod:`Qt Network Authorization <PySide6.QtNetworkAuth>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`Qt PDF <PySide6.QtPdf>`
 
-    Provides a set of APIs that enable Qt applications to obtain limited
-    access to online accounts and HTTP services without exposing users'
-    passwords.
+        Classes and functions for rendering PDF documents.
 
-    ---
+    .. grid-item-card:: :mod:`Qt PDF Widgets <PySide6.QtPdfWidgets>`
 
-    :mod:`QtNfc <PySide6.QtNfc>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        A PDF viewer widget.
 
-    The NFC API provides connectivity between NFC enabled devices.
+    .. grid-item-card:: :mod:`QtPrintSupport <PySide6.QtPrintSupport>`
 
-    ---
+        Provides extensive cross-platform support for printing.
 
-    :mod:`QtOpenGL <PySide6.QtOpenGL>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtQml <PySide6.QtQml>`
 
-    Offers classes that make it easy to use OpenGL in Qt applications.
+        Python API for Qt QML.
 
-    ---
+    .. grid-item-card:: :mod:`QtQuick <PySide6.QtQuick>`
 
-    :mod:`QtOpenGL Widgets <PySide6.QtOpenGLWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides classes for embedding Qt Quick in Qt applications.
 
-    Provides the  OpenGLWidget class enabling OpenGL rendering for a certain
-    part of the widget tree.
+    .. grid-item-card:: :mod:`QtQuickControls2 <PySide6.QtQuickControls2>`
 
-    ---
+        Provides classes for setting up the controls from C++.
 
-    :mod:`Qt Positioning <PySide6.QtPositioning>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtQuickWidgets <PySide6.QtQuickWidgets>`
 
-    Provides access to position, satellite info and area monitoring classes.
+        Provides the QQuickWidget class for embedding Qt Quick in widget-based applications.
 
-    ---
+    .. grid-item-card:: :mod:`QtRemoteObjects <PySide6.QtRemoteObjects>`
 
-    :mod:`Qt PDF <PySide6.QtPdf>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Inter-Process Communication (IPC) module developed for Qt. This module
+        extends Qt's existing functionalities to enable information exchange
+        between processes or computers, easily.
 
-    Classes and functions for rendering PDF documents.
+    .. grid-item-card:: :mod:`Qt Scxml <PySide6.QtScxml>`
 
-    ---
+        Provides classes to create and use state machines from SCXML files.
 
-    :mod:`Qt PDF Widgets <PySide6.QtPdfWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`Qt Sensors <PySide6.QtSensors>`
 
-    A PDF viewer widget.
+        Provides access to sensor hardware.
 
-    ---
+    .. grid-item-card:: :mod:`Qt Serial Bus <PySide6.QtSerialBus>`
 
-    :mod:`QtPrintSupport <PySide6.QtPrintSupport>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides access to serial industrial bus interfaces. Currently, the
+        module supports the CAN bus and Modbus protocols.
 
-    Provides extensive cross-platform support for printing.
+    .. grid-item-card:: :mod:`Qt Serial Port <PySide6.QtSerialPort>`
 
-    ---
+        Provides classes to interact with hardware and virtual serial ports.
 
-    :mod:`QtQml <PySide6.QtQml>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`Qt Spatial Audio <PySide6.QtSpatialAudio>`
 
-    Python API for Qt QML.
+        Provides APIs for modeling sound source and their surrounds in 3D
+        space.
 
-    ---
+    .. grid-item-card:: :mod:`QtSql <PySide6.QtSql>`
 
-    :mod:`QtQuick <PySide6.QtQuick>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Helps you provide seamless database integration to your Qt
+        applications.
 
-    Provides classes for embedding Qt Quick in Qt applications.
+    .. grid-item-card:: :mod:`QtStateMachine <PySide6.QtStateMachine>`
 
-    ---
+        Provides classes for creating and executing state graphs.
 
-    :mod:`QtQuickControls2 <PySide6.QtQuickControls2>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtSvg <PySide6.QtSvg>`
 
-    Provides classes for setting up the controls from C++.
+        Provides classes for displaying the contents of SVG files.
 
-    ---
+    .. grid-item-card:: :mod:`QtSvgWidgets <PySide6.QtSvgWidgets>`
 
-    :mod:`QtQuickWidgets <PySide6.QtQuickWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides a widget that is used to display the contents of SVG files.
 
-    Provides the QQuickWidget class for embedding Qt Quick in widget-based applications.
+    .. grid-item-card:: :mod:`QtTest <PySide6.QtTest>`
 
-    ---
+        Provides classes for unit testing Qt applications and libraries.
 
-    :mod:`QtRemoteObjects <PySide6.QtRemoteObjects>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtUiTools <PySide6.QtUiTools>`
 
-    Inter-Process Communication (IPC) module developed for Qt. This module
-    extends Qt's existing functionalities to enable information exchange
-    between processes or computers, easily.
+        Provides classes to handle forms created with Qt Designer.
 
-    ---
+    .. grid-item-card:: :mod:`Qt WebChannel <PySide6.QtWebChannel>`
 
-    :mod:`Qt Scxml <PySide6.QtScxml>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides access to QObject or QML objects from HTML clients for
+        seamless integration of Qt applications with HTML/JavaScript clients.
 
-    Provides classes to create and use state machines from SCXML files.
+    .. grid-item-card:: :mod:`QtWebEngine Core C++ Classes <PySide6.QtWebEngineCore>`
 
-    ---
+        Provides public API shared by both QtWebEngine and QtWebEngineWidgets.
 
-    :mod:`Qt Sensors <PySide6.QtSensors>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtWebEngine Widgets C++ Classes <PySide6.QtWebEngineWidgets>`
 
-    Provides access to sensor hardware.
+        Provides C++ classes for rendering web content in a QWidget based
+        application.
 
-    ---
+    .. grid-item-card:: :mod:`QtWebEngine QML Types <PySide6.QtWebEngineQuick>`
 
-    :mod:`Qt Serial Bus <PySide6.QtSerialBus>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides QML types for rendering web content within a QML application.
 
-    Provides access to serial industrial bus interfaces. Currently, the module
-    supports the CAN bus and Modbus protocols.
+    .. grid-item-card:: :mod:`Qt WebSockets <PySide6.QtWebSockets>`
 
-    ---
+        Provides WebSocket communication compliant with RFC 6455.
 
-    :mod:`Qt Serial Port <PySide6.QtSerialPort>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`QtWidgets <PySide6.QtWidgets>`
 
-    Provides classes to interact with hardware and virtual serial ports.
+        Extends Qt GUI with C++ widget functionality.
 
-    ---
+    .. grid-item-card:: :mod:`QtXml <PySide6.QtXml>`
 
-    :mod:`Qt Spatial Audio <PySide6.QtSpatialAudio>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides a C++ implementation of DOM.
 
-    Provides APIs for modeling sound source and their surrounds in 3D space.
+    .. grid-item-card:: :mod:`Qt3DAnimation <PySide6.Qt3DAnimation>`
 
-    ---
+        Provides basic elements required to animate 3D objects.
 
-    :mod:`QtSql <PySide6.QtSql>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`Qt3D Core <PySide6.Qt3DCore>`
 
-    Helps you provide seamless database integration to your Qt applications.
+        Contains functionality to support near-realtime simulation systems.
 
-    ---
+    .. grid-item-card:: :mod:`Qt3D Extras <PySide6.Qt3DExtras>`
 
-    :mod:`QtStateMachine <PySide6.QtStateMachine>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Provides a set of prebuilt elements to help you get started with Qt 3D.
 
-    Provides classes for creating and executing state graphs.
+    .. grid-item-card:: :mod:`Qt3D Input <PySide6.Qt3DInput>`
 
-    ---
+        Provides classes for handling user input in applications using Qt 3D.
 
-    :mod:`QtSvg <PySide6.QtSvg>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: :mod:`Qt3D Logic <PySide6.Qt3DLogic>`
 
-    Provides classes for displaying the contents of SVG files.
+        Enables synchronizing frames with the Qt 3D backend.
 
-    ---
+    .. grid-item-card:: :mod:`Qt3D Render <PySide6.Qt3DRender>`
 
-    :mod:`QtSvgWidgets <PySide6.QtSvgWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides a widget that is used to display the contents of SVG files.
-
-    ---
-
-    :mod:`QtTest <PySide6.QtTest>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides classes for unit testing Qt applications and libraries.
-
-    ---
-
-    :mod:`QtUiTools <PySide6.QtUiTools>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides classes to handle forms created with Qt Designer.
-
-    ---
-
-    :mod:`Qt WebChannel <PySide6.QtWebChannel>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides access to QObject or QML objects from HTML clients for seamless
-    integration of Qt applications with HTML/JavaScript clients.
-
-    ---
-
-    :mod:`QtWebEngine Core C++ Classes <PySide6.QtWebEngineCore>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides public API shared by both QtWebEngine and QtWebEngineWidgets.
-
-    ---
-
-    :mod:`QtWebEngine Widgets C++ Classes <PySide6.QtWebEngineWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides C++ classes for rendering web content in a QWidget based application.
-
-    ---
-
-    :mod:`QtWebEngine QML Types <PySide6.QtWebEngineQuick>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides QML types for rendering web content within a QML application.
-
-    ---
-
-    :mod:`Qt WebSockets <PySide6.QtWebSockets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides WebSocket communication compliant with RFC 6455.
-
-    ---
-
-    :mod:`QtWidgets <PySide6.QtWidgets>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Extends Qt GUI with C++ widget functionality.
-
-    ---
-
-    :mod:`QtXml <PySide6.QtXml>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides a C++ implementation of DOM.
-
-    ---
-
-    :mod:`Qt3DAnimation <PySide6.Qt3DAnimation>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides basic elements required to animate 3D objects.
-
-    ---
-
-    :mod:`Qt3D Core <PySide6.Qt3DCore>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Contains functionality to support near-realtime simulation systems.
-
-    ---
-
-    :mod:`Qt3D Extras <PySide6.Qt3DExtras>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides a set of prebuilt elements to help you get started with Qt 3D.
-
-    ---
-
-    :mod:`Qt3D Input <PySide6.Qt3DInput>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Provides classes for handling user input in applications using Qt 3D.
-
-    ---
-
-    :mod:`Qt3D Logic <PySide6.Qt3DLogic>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Enables synchronizing frames with the Qt 3D backend.
-
-    ---
-
-    :mod:`Qt3D Render <PySide6.Qt3DRender>`
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    Contains functionality to support 2D and 3D rendering using Qt 3D.
+        Contains functionality to support 2D and 3D rendering using Qt 3D.
diff --git a/sources/pyside6/doc/quickstart.rst b/sources/pyside6/doc/quickstart.rst
index ebe8a4f61..83268589c 100644
--- a/sources/pyside6/doc/quickstart.rst
+++ b/sources/pyside6/doc/quickstart.rst
@@ -225,45 +225,38 @@ Frequently Asked Questions
 Here you can find a couple of common questions and situations that will
 clarify questions before you start programming.
 
-.. panels::
-    :container: container-lg pb-1
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-
-    .. link-button:: faq/whatisqt
-        :type: ref
-        :text: Qt, QML, Widgets... What is the difference?
-        :classes: btn-link btn-block stretched-link
-    ---
-
-    .. link-button:: faq/whichide
-        :type: ref
-        :text: Which IDEs are compatible with PySide?
-        :classes: btn-link btn-block stretched-link
-    ---
-
-    .. link-button:: faq/whatisshiboken
-        :type: ref
-        :text: Binding Generation: What is Shiboken?
-        :classes: btn-link btn-block stretched-link
-    ---
-
-    .. link-button:: faq/typesoffiles
-        :type: ref
-        :text: File Types in PySide
-        :classes: btn-link btn-block stretched-link
-    ---
-
-    .. link-button:: faq/distribution
-        :type: ref
-        :text: Distributing your application to other systems and platforms
-        :classes: btn-link btn-block stretched-link
-
-    ---
-
-    .. link-button:: faq/whyqtforpython
-        :type: ref
-        :text: As a Qt/C++ developer, why should I consider Qt for Python?
-        :classes: btn-link btn-block stretched-link
+.. grid:: 1 3 3 3
+    :gutter: 2
+
+    .. grid-item-card:: What is Qt
+        :link: faq/whatisqt.html
+
+        Qt, QML, Widgets... What is the difference?
+
+    .. grid-item-card:: Compatible IDEs
+        :link: faq/whichide.html
+
+        Which IDEs are compatible with PySide?
+
+    .. grid-item-card:: Binding Generation
+        :link: faq/whatisshiboken.html
+
+        What is Shiboken?
+
+    .. grid-item-card:: File types
+        :link: faq/typesoffiles.html
+
+        File Types in PySide
+
+    .. grid-item-card:: App distribution
+        :link: faq/distribution.html
+
+        Distributing your application to other systems and platforms
+
+    .. grid-item-card:: Why Qt for Python?
+        :link: faq/whyqtforpython.html
+
+        As a Qt/C++ developer, why should I consider Qt for Python?
 
 .. toctree::
     :hidden:
diff --git a/sources/pyside6/doc/tutorials/index.rst b/sources/pyside6/doc/tutorials/index.rst
index 4c8b252a5..85466937f 100644
--- a/sources/pyside6/doc/tutorials/index.rst
+++ b/sources/pyside6/doc/tutorials/index.rst
@@ -15,86 +15,78 @@ If you want to see the available widgets in action, you can check the
 `Qt Widget Gallery <https://doc.qt.io/qt-6/gallery.html>`_ to learn their
 names and how they look like.
 
-.. panels::
-    :container: container-lg pb-1
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center
-
-    :img-top: basictutorial/widgets.png
-
-    .. link-button:: basictutorial/widgets
-        :type: ref
-        :text: Your First QtWidgets Application
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: basictutorial/clickablebutton.png
-
-    .. link-button:: basictutorial/clickablebutton
-        :type: ref
-        :text: Using a Simple Button
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: basictutorial/signals_slots.png
-
-    .. link-button:: basictutorial/signals_and_slots
-        :type: ref
-        :text: Signals and Slots
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: basictutorial/dialog.png
-
-    .. link-button:: basictutorial/dialog
-        :type: ref
-        :text: Creating a Dialog Application
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: basictutorial/tablewidget.png
-
-    .. link-button:: basictutorial/tablewidget
-        :type: ref
-        :text: Displaying Data Using a Table Widget
-        :classes: btn-link btn-block stretched-link
-
-    ---
-    :img-top: basictutorial/treewidget.png
-
-    .. link-button:: basictutorial/treewidget
-        :type: ref
-        :text: Displaying Data Using a Tree Widget
-        :classes: btn-link btn-block stretched-link
-
-    ---
-    :img-top: basictutorial/uifiles.png
-
-    .. link-button:: basictutorial/uifiles
-        :type: ref
-        :text: Using .ui files from Designer or QtCreator with QUiLoader and pyside6-uic
-        :classes: btn-link btn-block stretched-link
-
-    ---
-    :img-top: basictutorial/player-new.png
-
-    .. link-button:: basictutorial/qrcfiles
-        :type: ref
-        :text: Using .qrc Files (pyside6-rcc)
-        :classes: btn-link btn-block stretched-link
-
-    ---
-    :img-top: basictutorial/translations.png
-
-    .. link-button:: basictutorial/translations
-        :type: ref
-        :text: Translating Applications
-        :classes: btn-link btn-block stretched-link
-
-    ---
-    :img-top: basictutorial/widgetstyling-yes.png
-
-    .. link-button:: basictutorial/widgetstyling
-        :type: ref
-        :text: Styling the Widgets Application
-        :classes: btn-link btn-block stretched-link
+.. grid:: 1 3 3 3
+    :gutter: 2
 
+    .. grid-item-card:: Basic Widget
+        :class-item: cover-img
+        :link: basictutorial/widgets.html
+        :img-top: basictutorial/widgets.png
+
+        Your first QtWidgets Application
+
+    .. grid-item-card:: Basic Button
+        :class-item: cover-img
+        :link: basictutorial/clickablebutton.html
+        :img-top: basictutorial/clickablebutton.png
+
+        Using a Simple Button
+
+    .. grid-item-card:: Basic Connections
+        :class-item: cover-img
+        :link: basictutorial/signal_and_slots.html
+        :img-top: basictutorial/signals_slots.png
+
+        Signals and Slots
+
+    .. grid-item-card:: Basic Dialog
+        :class-item: cover-img
+        :link: basictutorial/dialog.html
+        :img-top: basictutorial/dialog.png
+
+        Creating a Dialog Application
+
+    .. grid-item-card:: Basic Table
+        :class-item: cover-img
+        :link: basictutorial/tablewidget.html
+        :img-top: basictutorial/tablewidget.png
+
+        Displaying Data Using a Table Widget
+
+    .. grid-item-card:: Basic Tree
+        :class-item: cover-img
+        :link: basictutorial/treewidget.html
+        :img-top: basictutorial/treewidget.png
+
+        Displaying Data Using a Tree Widget
+
+    .. grid-item-card:: Basic ``ui`` files
+        :class-item: cover-img
+        :link: basictutorial/uifiles.html
+        :img-top: basictutorial/uifiles.png
+
+        Using .ui files from Designer or QtCreator with QUiLoader and pyside6-uic
+
+    .. grid-item-card:: Basic ``qrc`` files
+        :class-item: cover-img
+        :link: basictutorial/qrcfiles.html
+        :img-top: basictutorial/player-new.png
+
+        Using .qrc Files (pyside6-rcc)
+
+    .. grid-item-card:: Basic Translations
+        :class-item: cover-img
+        :link: basictutorial/translations.html
+        :img-top: basictutorial/translations.png
+
+        Translating Applications
+
+    .. grid-item-card:: Basic Widget Style
+        :class-item: cover-img
+        :link: basictutorial/widgetstyling.html
+        :img-top: basictutorial/widgetstyling-yes.png
+
+        Styling the Widgets Application
 
 .. toctree::
     :hidden:
@@ -114,38 +106,36 @@ names and how they look like.
 Quick/QML: Basic tutorials
 --------------------------
 
-.. panels::
-    :container: container-lg pb-1
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center
+.. grid:: 1 3 3 3
+    :gutter: 2
+
+    .. grid-item-card:: Basic Quick
+        :class-item: cover-img
+        :link: basictutorial/qml.html
+        :img-top: basictutorial/greenapplication.png
+
+        Your First QtQuick/QML Application
 
-    :img-top: basictutorial/greenapplication.png
+    .. grid-item-card:: Basic QML Integration
+        :class-item: cover-img
+        :link: qmlintegration/qmlintegration.html
+        :img-top: qmlintegration/textproperties_material.png
 
-    .. link-button:: basictutorial/qml
-        :type: ref
-        :text: Your First QtQuick/QML Application
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: qmlintegration/textproperties_material.png
+        Python-QML integration
 
-    .. link-button:: qmlintegration/qmlintegration
-        :type: ref
-        :text: Python-QML integration
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: qmlapp/qmlapplication.png
+    .. grid-item-card:: QML Application
+        :class-item: cover-img
+        :link: qmlapp/qmlapplication.html
+        :img-top: qmlapp/qmlapplication.png
 
-    .. link-button:: qmlapp/qmlapplication
-        :type: ref
-        :text: QML Application Tutorial (QtCreator)
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: qmlsqlintegration/example_list_view.png
+        QML Application Tutorial (QtCreator)
 
-    .. link-button:: qmlsqlintegration/qmlsqlintegration
-        :type: ref
-        :text: QML, SQL and PySide Integration Tutorial
-        :classes: btn-link btn-block stretched-link
+    .. grid-item-card:: Advanced QML Integration
+        :class-item: cover-img
+        :link: qmlsqlintegration/qmlsqlintegration.html
+        :img-top: qmlsqlintegration/example_list_view.png
+
+        QML, SQL and PySide Integration Tutorial
 
 
 .. toctree::
@@ -160,24 +150,22 @@ Quick/QML: Basic tutorials
 General Applications
 --------------------
 
-.. panels::
-    :container: container-lg pb-1
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center
+.. grid:: 1 3 3 3
+    :gutter: 2
+
+    .. grid-item-card:: Data Visualization
+        :class-item: cover-img
+        :link: datavisualize/index.html
+        :img-top: datavisualize/images/datavisualization_app.png
 
-    :img-top: datavisualize/images/datavisualization_app.png
+        Data Visualization Tool
 
-    .. link-button:: datavisualize/index
-        :type: ref
-        :text: Data Visualization Tool
-        :classes: btn-link btn-block stretched-link
-    ---
-    :img-top: expenses/expenses_tool.png
+    .. grid-item-card:: Expenses Application
+        :class-item: cover-img
+        :link: expenses/expenses.html
+        :img-top: expenses/expenses_tool.png
 
-    .. link-button:: expenses/expenses
-        :type: ref
-        :text: Expenses Tool
-        :classes: btn-link btn-block stretched-link
+        Expenses administration tool
 
 .. toctree::
     :hidden:
diff --git a/sources/pyside6/doc/videos.rst b/sources/pyside6/doc/videos.rst
index bd2ee60af..1c182d746 100644
--- a/sources/pyside6/doc/videos.rst
+++ b/sources/pyside6/doc/videos.rst
@@ -6,205 +6,144 @@ Videos
 Tutorials
 ---------
 
-.. panels::
-    :body: align-items-center justify-content-center text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center img-responsive card-img-top-main
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    Resources overview
-    ^^^^^^^^^^^^^^^^^^
-    .. raw:: html
+    .. grid-item-card:: Resources overview
+        :img-top: https://img.youtube.com/vi/sywLvidNkbw/mqdefault.jpg
+        :link: https://www.youtube.com/embed/sywLvidNkbw
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/sywLvidNkbw" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
-    ---
+    .. grid-item-card:: Repository overview
+        :img-top: https://img.youtube.com/vi/RP0K1B7fqMs/mqdefault.jpg
+        :link: https://www.youtube.com/embed/RP0K1B7fqMs
 
-    Repository overview
-    ^^^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: Shiboken overview
+        :img-top: https://img.youtube.com/vi/RUwV_sx_gBM/mqdefault.jpg
+        :link: https://www.youtube.com/embed/RUwV_sx_gBM
 
-    .. raw:: html
+    .. grid-item-card:: Tutorial
+        :img-top: https://img.youtube.com/vi/Cqo0-EQmy1Q/mqdefault.jpg
+        :link: https://www.youtube.com/embed/Cqo0-EQmy1Q
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/RP0K1B7fqMs" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
-    ---
+        How to create a simple Qt Widgets app with PySide6
 
-    Shiboken overview
-    ^^^^^^^^^^^^^^^^^
+    .. grid-item-card:: Tutorial
+        :img-top: https://img.youtube.com/vi/JxfiUx60Mbg/mqdefault.jpg
+        :link: https://www.youtube.com/embed/JxfiUx60Mbg
 
-    .. raw:: html
+        Making a QML Application in Python
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/RUwV_sx_gBM" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+    .. grid-item-card:: Tutorial
+        :img-top: https://img.youtube.com/vi/i-utZN_NP6c/mqdefault.jpg
+        :link: https://www.youtube.com/embed/i-utZN_NP6c
 
-Community events
-----------------
+        How  to install PySide6 on a new virtual environment
 
-.. panels::
-    :body: align-items-center justify-content-center text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center img-responsive card-img-top-main
 
-    Akademy 2021: Qt for Python
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+Community events
+----------------
 
-    .. raw:: html
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/Ftm68AzYvr8" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+    .. grid-item-card:: Akademy 2021
+        :img-top: https://img.youtube.com/vi/Ftm68AzYvr8/mqdefault.jpg
+        :link: https://www.youtube.com/embed/Ftm68AzYvr8
 
+        Qt for Python
 
 Webinars
 --------
 
-.. panels::
-    :body: align-items-center justify-content-center text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center img-responsive card-img-top-main
-
-    How your Python projects can benefit from Qt
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    .. raw:: html
-
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/eqHveQ5JTZU" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
-
-    ---
-
-    Interoperability of Python and C++ using Shiboken
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    .. raw:: html
+    .. grid-item-card:: Online Webinar
+        :img-top: https://img.youtube.com/vi/eqHveQ5JTZU/mqdefault.jpg
+        :link: https://www.youtube.com/embed/eqHveQ5JTZU
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/wOMlDutOWXI" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        How your Python projects can benefit from Qt
 
-    ---
+    .. grid-item-card:: Online Webinar
+        :img-top: https://img.youtube.com/vi/wOMlDutOWXI/mqdefault.jpg
+        :link: https://www.youtube.com/embed/wOMlDutOWXI
 
-    Developing your first Qt for Python application
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Interoperability of Python and C++ using Shiboken
 
-    .. raw:: html
+    .. grid-item-card:: Online Webinar
+        :img-top: https://img.youtube.com/vi/HDBjmSiOBxY/mqdefault.jpg
+        :link: https://www.youtube.com/embed/HDBjmSiOBxY
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/HDBjmSiOBxY" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        Developing your first Qt for Python application
 
-    ---
+    .. grid-item-card:: Online Webinar
+        :img-top: https://img.youtube.com/vi/wKqLaNqxgas/mqdefault.jpg
+        :link: https://www.youtube.com/embed/wKqLaNqxgas
 
-    Creating user interfaces with Qt for Python
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    .. raw:: html
-
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/wKqLaNqxgas" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        Creating user interfaces with Qt for Python
 
 Conferences
 -----------
 
-.. panels::
-    :body: align-items-center justify-content-center text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
-    :img-top-cls: d-flex align-self-center img-responsive card-img-top-main
-
-    Boosting Projects with Python
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    .. raw:: html
-
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/SylgpRc-Lrg" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
-
-    ---
-
-    Prototypes to Hybrid Applications
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-    .. raw:: html
-
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/Vb1dbLQafyM" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    ---
+    .. grid-item-card:: QtWS 2022
+        :img-top: https://img.youtube.com/vi/8wcdN1Iw1Uk/mqdefault.jpg
+        :link: https://www.youtube.com/embed/8wcdN1Iw1Uk
 
-    Using Shiboken to Enhance Application
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        5 Reasons Why You Should Use the Latest Qt for Python
 
-    .. raw:: html
+    .. grid-item-card:: QtDeCon 2022
+        :img-top: https://img.youtube.com/vi/ZUNg19OlDeE/mqdefault.jpg
+        :link: https://www.youtube.com/embed/ZUNg19OlDeE
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/mAfEVPgHRt8" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        Hybrid Qt Development: Boosting Your Projects with Python
 
-    ---
+    .. grid-item-card:: QtWS 2021
+        :img-top: https://img.youtube.com/vi/SylgpRc-Lrg/mqdefault.jpg
+        :link: https://www.youtube.com/embed/SylgpRc-Lrg
 
-    Intro to Qt for Python
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Hybrid Qt Development: boosting Projects with Python
 
-    .. raw:: html
+    .. grid-item-card:: QtWS 2020
+        :img-top: https://img.youtube.com/vi/Vb1dbLQafyM/mqdefault.jpg
+        :link: https://www.youtube.com/embed/Vb1dbLQafyM
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/214TWASZVgA" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        Prototypes to Hybrid Applications
 
-    ---
+    .. grid-item-card:: QtWS 2019
+        :img-top: https://img.youtube.com/vi/mAfEVPgHRt8/mqdefault.jpg
+        :link: https://www.youtube.com/embed/mAfEVPgHRt8
 
-    Using C++ project in Python
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        Using Shiboken to Enhance Application
 
-    .. raw:: html
+    .. grid-item-card:: QtWS 2019
+        :img-top: https://img.youtube.com/vi/214TWASZVgA/mqdefault.jpg
+        :link: https://www.youtube.com/embed/214TWASZVgA
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/XmY-tWTi9gY" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        Intro to Qt for Python
 
-    ---
+    .. grid-item-card:: QtWS 2019
+        :img-top: https://img.youtube.com/vi/XmY-tWTi9gY/mqdefault.jpg
+        :link: https://www.youtube.com/embed/XmY-tWTi9gY
 
-    Qt for Python in 20 min
-    ^^^^^^^^^^^^^^^^^^^^^^^
+        Using C++ project in Python
 
-    .. raw:: html
+    .. grid-item-card:: QtWS 2019
+        :img-top: https://img.youtube.com/vi/rRDoToEOlbY/mqdefault.jpg
+        :link: https://www.youtube.com/embed/rRDoToEOlbY
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/IhxZ99usPqY" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        Using Qt for Python for embedded system development
 
-    ---
+    .. grid-item-card:: QtWS 2018
+        :img-top: https://img.youtube.com/vi/IhxZ99usPqY/mqdefault.jpg
+        :link: https://www.youtube.com/embed/IhxZ99usPqY
 
-    A walk to PySide
-    ^^^^^^^^^^^^^^^^
+        Qt for Python in 20 min
 
-    .. raw:: html
+    .. grid-item-card:: QtWS 2017
+        :img-top: https://img.youtube.com/vi/Sb4FV6SdHHQ/mqdefault.jpg
+        :link: https://www.youtube.com/embed/Sb4FV6SdHHQ
 
-      <div class='embed-container'>
-        <iframe width="175" height="195" src="https://www.youtube.com/embed/Sb4FV6SdHHQ" frameborder="0" allowfullscreen>
-        </iframe>
-      </div>
+        A walk to PySide
diff --git a/sources/shiboken6/doc/_static/css/qt_style.css b/sources/shiboken6/doc/_static/css/qt_style.css
index 4ca598916..f174a6c52 100644
--- a/sources/shiboken6/doc/_static/css/qt_style.css
+++ b/sources/shiboken6/doc/_static/css/qt_style.css
@@ -1,41 +1,3 @@
-.btn-qt:hover,
-.btn-qt:active,
-.btn-qt:focus,
-.btn-qt.active {
-  background: var(--color-brand-primary);
-  color: #fff !important;
-  border-color: #fff;
-}
-
-.btn-link {
-  color: var(--color-brand-primary) !important;
-}
-
-.btn-link:hover {
-  color: #222840 !important;
-  text-decoration: underline;
-}
-
-/* Using !important is not recommended, but out CSS is being added
- * to the pages before the bootstrap ones, so we cannot override them
- * without using it */
-.btn-qt {
-  color: var(--color-brand-primary) !important;
-  border-color: var(--color-brand-primary) !important;
-  font-weight: bold !important;
-}
-.card-img-top-main {
-    padding-top: 10px;
-    height: 70px !important;
-}
-
-.card-img-top {
-  object-fit: contain;
-  height: 120px;
-  padding-top: 20px;
-  transform: scale(1.3, 1.3);
-}
-
 /* Tables */
 .section .docutils.container td {
     float:left;
diff --git a/sources/shiboken6/doc/conf.py.in b/sources/shiboken6/doc/conf.py.in
index a88f6f7b0..eef3d1417 100644
--- a/sources/shiboken6/doc/conf.py.in
+++ b/sources/shiboken6/doc/conf.py.in
@@ -27,7 +27,7 @@ extensions = ['sphinx.ext.autodoc', 'sphinx.ext.doctest', 'sphinx.ext.ifconfig',
     'sphinx.ext.coverage', 'sphinx.ext.intersphinx', 'sphinx.ext.todo',
     'sphinx.ext.graphviz',
     'sphinx.ext.viewcode',
-    'sphinx_panels', 'sphinx_copybutton',
+    'sphinx_design', 'sphinx_copybutton',
     'myst_parser']
 
 myst_enable_extensions = [
@@ -209,8 +209,3 @@ html_show_sourcelink = False
 
 # -- Options for qthelp output --------------------------------------------------
 qthelp_theme = 'pysidedocs_qthelp'
-
-# Sphinx Panels color for inactive tab
-panels_css_variables = {
-    "tabs-color-label-inactive": "rgba(116, 116, 116, 1.0)",
-}
diff --git a/sources/shiboken6/doc/index.rst b/sources/shiboken6/doc/index.rst
index d7cb4c2b1..db842134b 100644
--- a/sources/shiboken6/doc/index.rst
+++ b/sources/shiboken6/doc/index.rst
@@ -25,73 +25,80 @@ Shiboken
 Documentation
 =============
 
-.. panels::
-    :body: text-center
-    :container: container-lg pb-3
-    :column: col-lg-4 col-md-4 col-sm-6 col-xs-12 p-2
+.. grid:: 1 3 3 3
+    :gutter: 2
 
-    Install and build from source.
+    .. grid-item-card::
+        :class-item: text-center
 
-    +++
+        Install and build from source.
+        +++
+        .. button-ref:: gettingstarted
+            :color: primary
+            :outline:
+            :expand:
 
-    .. link-button:: gettingstarted
-        :type: ref
-        :text: Getting Started
-        :classes: btn-qt btn-block stretched-link
-    ---
+            Getting Started
 
-    Binding generator executable.
+    .. grid-item-card::
+        :class-item: text-center
 
-    +++
+        Binding generator executable.
+        +++
+        .. button-ref:: shibokengenerator
+            :color: primary
+            :outline:
+            :expand:
 
-    .. link-button:: shibokengenerator
-        :type: ref
-        :text: Shiboken Generator
-        :classes: btn-qt btn-block stretched-link
-    ---
+            Shiboken Generator
 
-    Python utility module.
+    .. grid-item-card::
+        :class-item: text-center
 
-    +++
+        Python utility module.
+        +++
+        .. button-ref:: shibokenmodule
+            :color: primary
+            :outline:
+            :expand:
 
-    .. link-button:: shibokenmodule
-        :type: ref
-        :text: Shiboken Module
-        :classes: btn-qt btn-block stretched-link
+            Shiboken Module
 
-    ---
+    .. grid-item-card::
+        :class-item: text-center
 
-    Reference and functionallities.
+        Reference and functionallities.
+        +++
+        .. button-ref:: typesystem
+            :color: primary
+            :outline:
+            :expand:
 
-    +++
+            Type System
 
-    .. link-button:: typesystem
-        :type: ref
-        :text: Type System
-        :classes: btn-qt btn-block stretched-link
+    .. grid-item-card::
+        :class-item: text-center
 
-    ---
+        Using Shiboken.
+        +++
+        .. button-ref:: examples/index
+            :color: primary
+            :outline:
+            :expand:
 
-    Using Shiboken.
+            Examples
 
-    +++
+    .. grid-item-card::
+        :class-item: text-center
 
-    .. link-button:: examples/index
-        :type: ref
-        :text: Examples
-        :classes: btn-qt btn-block stretched-link
-
-    ---
-
-    Known issues and FAQ.
-
-    +++
-
-    .. link-button:: considerations
-        :type: ref
-        :text: Considerations
-        :classes: btn-qt btn-block stretched-link
+        Known issues and FAQ.
+        +++
+        .. button-ref:: considerations
+            :color: primary
+            :outline:
+            :expand:
 
+            Considerations
 
 .. toctree::
    :hidden:
diff --git a/sources/shiboken6/doc/shibokenmodule.rst b/sources/shiboken6/doc/shibokenmodule.rst
index 91cb3fa6e..75a97ff2c 100644
--- a/sources/shiboken6/doc/shibokenmodule.rst
+++ b/sources/shiboken6/doc/shibokenmodule.rst
@@ -1,4 +1,4 @@
-. module:: shiboken
+.. module:: shiboken
 
 .. |maya| unicode:: Maya U+2122