[FEATURE] Explain how to use card directives

Make using container for the task deprecated

Documentation/WritingReST/Reference/Content/Cards.rst

@@ -25,6 +25,7 @@ Simple cards
     :columns: 1
     :columns-md: 2
     :gap: 4
+    :class: pb-4
     :card-height: 100
 
     ..  card:: :ref:`Concepts <t3start:Concepts>`
@@ -39,18 +40,27 @@ Simple cards
         its web server and database and how they should be configured
         prior to installation.
 
+..  code-block:: rst
+    :caption: EXT:my_extension/Documentation/SomeChapter.rst
 
-    ..  card:: :ref:`Concepts <t3start:Concepts>`
+    ..  card-grid::
+        :columns: 1
+        :columns-md: 2
+        :gap: 4
+        :class: pb-4
+        :card-height: 100
 
-        Written for new users, this chapter introduces some of TYPO3s
-        core concepts including the backend, TYPO3s administration
-        interface.
+        ..  card:: :ref:`Concepts <t3start:Concepts>`
 
-    ..  card:: :ref:`System Requirements <t3start:System-Requirements>`
+            Written for new users, this chapter introduces some of TYPO3s
+            core concepts including the backend, TYPO3s administration
+            interface.
 
-        System requirements for the host operation system, including
-        its web server and database and how they should be configured
-        prior to installation.
+        ..  card:: :ref:`System Requirements <t3start:System-Requirements>`
+
+            System requirements for the host operation system, including
+            its web server and database and how they should be configured
+            prior to installation.
 
 Cards with buttons in the footer
 ================================
@@ -59,6 +69,7 @@ Cards with buttons in the footer
     :columns: 1
     :columns-md: 2
     :gap: 4
+    :class: pb-4
     :card-height: 100
 
     ..  card:: :ref:`Pages <t3editors:pages>`
@@ -102,6 +113,57 @@ Cards with buttons in the footer
         ..  card-footer:: :ref:`Read more <t3editors:content-elements>`
             :button-style: btn btn-secondary stretched-link
 
+..  code-block:: rst
+    :caption: EXT:my_extension/Documentation/SomeChapter.rst
+
+    ..  card-grid::
+        :columns: 1
+        :columns-md: 2
+        :gap: 4
+        :class: pb-4
+        :card-height: 100
+
+        ..  card:: :ref:`Pages <t3editors:pages>`
+
+            The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.
+
+            ..  card-footer:: `12-dev <https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html>`__ `11.5 <https://docs.typo3.org/m/typo3/tutorial-editors/11.5/en-us/ContentElements/Index.html>`__ `10.4 <https://docs.typo3.org/m/typo3/tutorial-editors/10.4/en-us/ContentElements/Index.html>`__
+                :button-style: btn btn-primary
+
+        ..  card:: :ref:`Content <t3editors:content-elements>`
+
+            The Content Creation Guide shows how page content is created in the form of Content Elements.
+
+            ..  card-footer:: `12-dev <https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/ContentElements/Index.html>`__ `11.5 <https://docs.typo3.org/m/typo3/tutorial-editors/11.5/en-us/ContentElements/Index.html>`__ `10.4 <https://docs.typo3.org/m/typo3/tutorial-editors/10.4/en-us/ContentElements/Index.html>`__
+                :button-style: btn btn-secondary
+
+        ..  card:: :ref:`Pages <t3editors:pages>`
+
+            The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.
+
+            ..  card-footer:: `12-dev <https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html>`__ `11.5 <https://docs.typo3.org/m/typo3/tutorial-editors/11.5/en-us/Pages/Index.html>`__  `10.4 <https://docs.typo3.org/m/typo3/tutorial-editors/10.4/en-us/Pages/Index.html>`__
+                :button-style: btn btn-link
+
+        ..  card:: :ref:`Content <t3editors:content-elements>`
+
+            The Content Creation Guide shows how page content is created in the form of Content Elements.
+
+            ..  card-footer::
+
+                ..  rst-class:: horizbuttons-striking-m
+
+                    *   `12-dev <https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/ContentElements/Index.html>`__
+                    *   `11.5 <https://docs.typo3.org/m/typo3/tutorial-editors/11.5/en-us/ContentElements/Index.html>`__
+                    *   `10.4 <https://docs.typo3.org/m/typo3/tutorial-editors/10.4/en-us/ContentElements/Index.html>`__
+
+
+        ..  card:: Stretched link
+
+            The complete card can be linked if you use exactly one stretched link.
+
+            ..  card-footer:: :ref:`Read more <t3editors:content-elements>`
+                :button-style: btn btn-secondary stretched-link
+
 
 Cards with images
 =================
@@ -110,6 +172,7 @@ Cards with images
     :columns: 1
     :columns-md: 2
     :gap: 4
+    :class: pb-4
     :card-height: 100
 
     ..  card:: :ref:`Cards <rest-cards>`
@@ -143,3 +206,46 @@ Cards with images
             :position: bottom
 
         This card has the image at the bottom
+
+
+..  code-block:: rst
+    :caption: EXT:my_extension/Documentation/SomeChapter.rst
+
+    ..  card-grid::
+        :columns: 1
+        :columns-md: 2
+        :gap: 4
+        :class: pb-4
+        :card-height: 100
+
+        ..  card:: :ref:`Cards <rest-cards>`
+
+            ..  card-image:: /Images/cards.png
+                :alt: Cards, example output
+
+            Cards can be used to shortly introduce topics and generate
+            overview pages.
+
+        ..  card:: :ref:`Tabs <rest-tabs>`
+
+            ..  card-image:: /Images/tabs.png
+                :alt: Tabs, example output
+
+            Tabs can be used to present a topic from different perspectives.
+
+        ..  card:: :ref:`Cards <rest-cards>`
+
+            ..  card-image:: /Images/cards.png
+                :alt: Cards, example output
+
+            Cards can be used to shortly introduce topics and generate
+            overview pages.
+
+
+        ..  card:: :ref:`Tabs <rest-tabs>`
+
+            ..  card-image:: /Images/tabs.png
+                :alt: Tabs, example output
+                :position: bottom
+
+            This card has the image at the bottom