From 357524fd2fcea679e8fb0b2369090192faf38b7d Mon Sep 17 00:00:00 2001 From: "lina.wolf" Date: Sun, 21 Apr 2024 10:37:23 +0200 Subject: [PATCH] [FEATURE] Explain how to use card directives Make using container for the task deprecated --- .../WritingReST/Reference/Content/Cards.rst | 250 ++++++------------ 1 file changed, 78 insertions(+), 172 deletions(-) diff --git a/Documentation/WritingReST/Reference/Content/Cards.rst b/Documentation/WritingReST/Reference/Content/Cards.rst index 820389b7..53c04355 100644 --- a/Documentation/WritingReST/Reference/Content/Cards.rst +++ b/Documentation/WritingReST/Reference/Content/Cards.rst @@ -9,231 +9,137 @@ Cards Cards are used to group content together and provide a brief introduction on a given subject. -Simple cards -============ - -.. container:: row m-0 p-0 - - .. 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:`Concepts ` - - .. container:: card-body - - Written for new users, this chapter introduces some of TYPO3s - core concepts including the backend, TYPO3s administration - interface. - - .. 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:`System Requirements ` - - .. container:: card-body +.. deprecated:: 0.2.40 - System requirements for the host operation system, including - its web server and database and how they should be configured - prior to installation. + Cards where previously created by using nested :rst:`.. container::` + directives with manually applied classes. The largest disadvantages were + a large number of nested blocks and having to apply many classes. -.. code-block:: rst + We discourage using containers for cards and suggest to switch to the + cards directive. - .. container:: row m-0 p-0 - - .. container:: col-md-6 pl-0 pr-3 py-3 m-0 - - .. container:: card px-0 h-100 +Simple cards +============ - .. rst-class:: card-header h3 +.. card-grid:: + :columns: 1 + :columns-md: 2 + :gap: 4 + :card-height: 100 - .. rubric:: :ref:`Concepts ` + .. card:: :ref:`Concepts ` - .. container:: card-body + Written for new users, this chapter introduces some of TYPO3s + core concepts including the backend, TYPO3s administration + interface. - Written for new users, this chapter introduces some of TYPO3s - core concepts including the backend, TYPO3s administration - interface. + .. card:: :ref:`System Requirements ` - .. container:: col-md-6 pl-0 pr-3 py-3 m-0 + System requirements for the host operation system, including + its web server and database and how they should be configured + prior to installation. - .. container:: card px-0 h-100 - .. rst-class:: card-header h3 + .. card:: :ref:`Concepts ` - .. rubric:: :ref:`System Requirements ` + Written for new users, this chapter introduces some of TYPO3s + core concepts including the backend, TYPO3s administration + interface. - .. container:: card-body + .. card:: :ref:`System Requirements ` - System requirements for the host operation system, including - its web server and database and how they should be configured - prior to installation. + 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 ================================ -.. container:: row m-0 p-0 - - .. container:: col-md-6 pl-0 pr-3 py-3 m-0 - - .. container:: card px-0 h-100 - - .. rst-class:: card-header h3 +.. card-grid:: + :columns: 1 + :columns-md: 2 + :gap: 4 + :card-height: 100 - .. rubric:: :ref:`Pages ` + .. card:: :ref:`Pages ` - .. container:: card-body + The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed. - The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed. + .. card-footer:: `12-dev `__ `11.5 `__ `10.4 `__ + :button-style: btn btn-primary - .. container:: card-footer pb-0 + .. card:: :ref:`Content ` - .. rst-class:: horizbuttons-striking-m + The Content Creation Guide shows how page content is created in the form of Content Elements. - * `12-dev `__ - * `11.5 `__ - * `10.4 `__ + .. card-footer:: `12-dev `__ `11.5 `__ `10.4 `__ + :button-style: btn btn-secondary - .. container:: col-md-6 pl-0 pr-3 py-3 m-0 + .. card:: :ref:`Pages ` - .. container:: card px-0 h-100 + The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed. - .. rst-class:: card-header h3 + .. card-footer:: `12-dev `__ `11.5 `__ `10.4 `__ + :button-style: btn btn-link - .. rubric:: :ref:`Content ` + .. card:: :ref:`Content ` - .. container:: card-body + The Content Creation Guide shows how page content is created in the form of Content Elements. - The Content Creation Guide shows how page content is created in the form of Content Elements. + .. card-footer:: - .. container:: card-footer pb-0 - - .. rst-class:: horizbuttons-striking-m + .. rst-class:: horizbuttons-striking-m * `12-dev `__ * `11.5 `__ * `10.4 `__ -.. code-block:: rst - - .. container:: row m-0 p-0 - - .. 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:`Pages ` - .. container:: card-body + .. card:: Stretched link - The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed. + The complete card can be linked if you use exactly one stretched link. - .. container:: card-footer pb-0 + .. card-footer:: :ref:`Read more ` + :button-style: btn btn-secondary stretched-link - .. rst-class:: horizbuttons-striking-m - - * `12-dev `__ - * `11.5 `__ - * `10.4 `__ - - .. 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:`Content ` - - .. container:: card-body - - The Content Creation Guide shows how page content is created in the form of Content Elements. - - .. container:: card-footer pb-0 - - .. rst-class:: horizbuttons-striking-m - - * `12-dev `__ - * `11.5 `__ - * `10.4 `__ Cards with images ================= -.. container:: row m-0 p-0 - - .. 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:`Cards ` - - .. container:: card-body - - .. image:: /Images/cards.png - :alt: Cards, example output - :class: with-shadow mb-2 - - Cards can be used to shortly introduce topics and generate - overview pages. - - .. 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:`Tabs ` - - .. container:: card-body - - .. image:: /Images/tabs.png - :alt: Tabs, example output - :class: with-shadow mb-2 - - Tabs can be used to present a topic from different perspectives. - -.. code-block:: rst - - .. 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 + :card-height: 100 - .. container:: card px-0 h-100 + .. card:: :ref:`Cards ` - .. rst-class:: card-header h3 + .. card-image:: /Images/cards.png + :alt: Cards, example output - .. rubric:: :ref:`Cards ` + Cards can be used to shortly introduce topics and generate + overview pages. - .. container:: card-body + .. card:: :ref:`Tabs ` - .. image:: /Images/cards.png - :alt: Cards, example output - :class: with-shadow mb-2 + .. card-image:: /Images/tabs.png + :alt: Tabs, example output - Cards can be used to shortly introduce topics and generate - overview pages. + Tabs can be used to present a topic from different perspectives. - .. container:: col-md-6 pl-0 pr-3 py-3 m-0 + .. card:: :ref:`Cards ` - .. container:: card px-0 h-100 + .. card-image:: /Images/cards.png + :alt: Cards, example output - .. rst-class:: card-header h3 + Cards can be used to shortly introduce topics and generate + overview pages. - .. rubric:: :ref:`Tabs ` - .. container:: card-body + .. card:: :ref:`Tabs ` - .. image:: /Images/tabs.png - :alt: Tabs, example output - :class: with-shadow mb-2 + .. card-image:: /Images/tabs.png + :alt: Tabs, example output + :position: bottom - Tabs can be used to present a topic from different perspectives. + This card has the image at the bottom