From 8a7a16869143250ce0219e13c401ff2540405b39 Mon Sep 17 00:00:00 2001 From: "lina.wolf" Date: Sun, 21 Apr 2024 10:43:59 +0200 Subject: [PATCH] [FEATURE] Explain how to use card directives Make using container for the task deprecated --- .../WritingReST/Reference/Content/Cards.rst | 122 ++++++++++++++++-- 1 file changed, 114 insertions(+), 8 deletions(-) diff --git a/Documentation/WritingReST/Reference/Content/Cards.rst b/Documentation/WritingReST/Reference/Content/Cards.rst index 53c04355..03572c14 100644 --- a/Documentation/WritingReST/Reference/Content/Cards.rst +++ b/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 ` @@ -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 ` + .. 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 ` - .. card:: :ref:`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 ` + + 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 ` @@ -102,6 +113,57 @@ Cards with buttons in the footer .. card-footer:: :ref:`Read more ` :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 ` + + 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 + + .. card:: :ref:`Content ` + + The Content Creation Guide shows how page content is created in the form of Content Elements. + + .. card-footer:: `12-dev `__ `11.5 `__ `10.4 `__ + :button-style: btn btn-secondary + + .. card:: :ref:`Pages ` + + 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-link + + .. card:: :ref:`Content ` + + 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 `__ + * `11.5 `__ + * `10.4 `__ + + + .. card:: Stretched link + + The complete card can be linked if you use exactly one stretched link. + + .. card-footer:: :ref:`Read more ` + :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 ` @@ -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 ` + + .. card-image:: /Images/cards.png + :alt: Cards, example output + + Cards can be used to shortly introduce topics and generate + overview pages. + + .. card:: :ref:`Tabs ` + + .. card-image:: /Images/tabs.png + :alt: Tabs, example output + + Tabs can be used to present a topic from different perspectives. + + .. card:: :ref:`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 ` + + .. card-image:: /Images/tabs.png + :alt: Tabs, example output + :position: bottom + + This card has the image at the bottom