[TASK] Migrate deprecated card container

releases: main, 13.4, 12.4
TYPO3-Documentation · Jan 1, 2025 · d4063b3 · d4063b3
1 parent e7bd60e
commit d4063b3
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 386 deletions.
diff --git a/Documentation/AccessControl/Index.rst b/Documentation/AccessControl/Index.rst
@@ -1,7 +1,7 @@
-.. include:: /Includes.rst.txt
+..  include:: /Includes.rst.txt
 
 
-.. _access-control:
+..  _access-control:
 
 ==============
 Access Control
@@ -12,38 +12,27 @@ and other information in your TYPO3 CMS installation. Options can range from
 hiding pages in menus, to limiting visibility of content for a set time
 period, all the way through to requiring visitors to log in to view content.
 
-.. container:: row m-0 p-0
+..  card-grid::
+    :columns: 1
+    :columns-md: 2
+    :gap: 4
+    :class: pb-4
+    :card-height: 100
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Visibility<visibility>`
 
-      .. container:: card px-0 h-100
+        When an element is hidden, be it a page, a content element or a news item,
+        it will not display in the frontend. You can, however, preview it in the backend.
 
-         .. rst-class:: card-header h3
+    ..  card:: :ref:`Frontend Login<frontend-login>`
 
-            .. rubric:: :ref:`Visibility<visibility>`
+        Find out how to configure content and pages to only be visible
+        to frontend users who have logged in to a restricted area.
 
-         .. container:: card-body
+..  toctree::
+    :maxdepth: 2
+    :titlesonly:
+    :hidden:
 
-            When an element is hidden, be it a page, a content element or a news item,
-            it will not display in the frontend. You can, however, preview it in the backend.
-
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Frontend Login<frontend-login>`
-
-         .. container:: card-body
-
-            Find out how to configure content and pages to only be visible
-            to frontend users who have logged in to a restricted area.
-
-.. toctree::
-   :maxdepth: 2
-   :titlesonly:
-   :hidden:
-
-   Visibility/Index
-   Login/Index
+    Visibility/Index
+    Login/Index
diff --git a/Documentation/Concepts/Index.rst b/Documentation/Concepts/Index.rst
@@ -1,70 +1,47 @@
-.. include:: /Includes.rst.txt
+..  include:: /Includes.rst.txt
 
-.. _concepts:
+..  _concepts:
 
 ========
 Concepts
 ========
 
 The following concepts are of interest:
 
-.. container:: row m-0 p-0
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
+..  card-grid::
+    :columns: 1
+    :columns-md: 2
+    :gap: 4
+    :class: pb-4
+    :card-height: 100
 
-      .. container:: card px-0 h-100
+    ..  card:: :ref:`Cache<cache>`
 
-         .. rst-class:: card-header h3
+        A beginners guide to browser caching and managing TYPO3's cache.
 
-            .. rubric:: :ref:`Cache<cache>`
 
-         .. container:: card-body
+    ..  card:: :ref:`File Abstraction Layer<fal>`
 
-            A beginners guide to browser caching and managing TYPO3's cache.
+        Information about TYPO3's File Abstraction Layer (FAL) and how editors can modify meta data for individual files.
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
 
-      .. container:: card px-0 h-100
+    ..  card:: :ref:`Accessibility<accessibility>`
 
-         .. rst-class:: card-header h3
+        An introduction to writing accessible content with links to third party resources.
 
-            .. rubric:: :ref:`File Abstraction Layer<fal>`
 
-         .. container:: card-body
+    ..  card:: :ref:`Copyright<copyright>`
 
-            Information about TYPO3's File Abstraction Layer (FAL) and how editors can modify meta data for individual files.
+        Information on copyright and data privacy.
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
 
-      .. container:: card px-0 h-100
+..  toctree::
+    :maxdepth: 2
+    :titlesonly:
+    :hidden:
 
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Accessibility<accessibility>`
-
-         .. container:: card-body
-
-            An introduction to writing accessible content with links to third party resources.
-
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Copyright<copyright>`
-
-         .. container:: card-body
-
-            Information on copyright and data privacy.
-
-
-.. toctree::
-   :maxdepth: 2
-   :titlesonly:
-   :hidden:
-
-   Cache
-   FileAbstractionLayer
-   Accessibility
-   Copyright
+    Cache
+    FileAbstractionLayer
+    Accessibility
+    Copyright
diff --git a/Documentation/ContentElements/Index.rst b/Documentation/ContentElements/Index.rst
@@ -7,106 +7,61 @@
 Content Elements
 ================
 
-.. container:: row m-0 p-0
+..  card-grid::
+    :columns: 1
+    :columns-md: 2
+    :gap: 4
+    :class: pb-4
+    :card-height: 100
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Creating Content<content-creating>`
 
-      .. container:: card px-0 h-100
+        It's easy to add content to a page in TYPO3. This chapter contains all
+        the information you need to start adding content to your TYPO3 website.
 
-         .. rst-class:: card-header h3
 
-            .. rubric:: :ref:`Creating Content<content-creating>`
+    ..  card:: :ref:`Editing Content<content-editing>`
 
-         .. container:: card-body
+        Want to change a content element's type? This chapter contains information on
+        how you can change a content element's type while preserving its content.
 
-            It's easy to add content to a page in TYPO3. This chapter contains all
-            the information you need to start adding content to your TYPO3 website.
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Managing Content<content-working>`
 
-      .. container:: card px-0 h-100
+        This chapter contains information on how you can move, copy and cut content. It also has information
+        on the different ways you can view content in the backend.
 
-         .. rst-class:: card-header h3
 
-            .. rubric:: :ref:`Editing Content<content-editing>`
+    ..  card:: :ref:`Rich Text Editor<rte>`
 
-         .. container:: card-body
+        We use the rich text editor to add written content. Find out how you can use it to format
+        text and add both internal and external links.
 
-            Want to change a content element's type? This chapter contains information on
-            how you can change a content element's type while preserving its content.
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Working With Images<images-new>`
 
-      .. container:: card px-0 h-100
+        Find out how to upload images, resize and add images to a page.
 
-         .. rst-class:: card-header h3
 
-            .. rubric:: :ref:`Managing Content<content-working>`
+    ..  card:: :ref:`Embedding Video And Audio<media>`
 
-         .. container:: card-body
+        This chapter contains information on how to embed video and audio files to a page.
+        Including content from YouTube and Vimeo.
 
-            This chapter contains information on how you can move, copy and cut content. It also has information
-            on the different ways you can view content in the backend.
 
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
+    ..  card:: :ref:`Creating A Contact Form<mail-form>`
 
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Rich Text Editor<rte>`
-
-         .. container:: card-body
-
-            We use the rich text editor to add written content. Find out how you can use it to format
-            text and add both internal and external links.
-
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Working With Images<images-new>`
-
-         .. container:: card-body
-
-            Find out how to upload images, resize and add images to a page.
-
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Embedding Video And Audio<media>`
-
-         .. container:: card-body
-
-            This chapter contains information on how to embed video and audio files to a page.
-            Including content from YouTube and Vimeo.
-
-   .. container:: col-md-6 pl-0 pr-3 py-3 m-0
-
-      .. container:: card px-0 h-100
-
-         .. rst-class:: card-header h3
-
-            .. rubric:: :ref:`Creating A Contact Form<mail-form>`
-
-         .. container:: card-body
-
-            Find out how to create a contact form using the step-by-step guide.
+        Find out how to create a contact form using the step-by-step guide.
 
 .. toctree::
-   :maxdepth: 2
-   :titlesonly:
-   :hidden:
-
-   CreatingContent/Index
-   EditingContent/Index
-   Content/Index
-   RichTextEditor/Index
-   Images/Index
-   Media/Index
-   ContactForm/Index
+    :maxdepth: 2
+    :titlesonly:
+    :hidden:
+
+    CreatingContent/Index
+    EditingContent/Index
+    Content/Index
+    RichTextEditor/Index
+    Images/Index
+    Media/Index
+    ContactForm/Index