--- title: "Cards" manual: "How to Document" version: "main" permalink: "https://docs.typo3.org/permalink/h2document:rest-cards" source: "Reference/ReStructuredText/Content/Cards.rst" modified: "2026-09-14T09:38:54+00:00" --- # Cards Cards are used to group content together and provide a brief introduction on a given subject. > [!WARNING] > **Deprecated since version 0.2.40** > > Cards were previously created by using nested `.. container::` > directives with manually applied classes. The largest disadvantages were > a large number of nested blocks and having to apply many classes. > > We discourage using containers for cards and suggest to switch to the > cards directive. ## Simple cards **[Concepts](https://docs.typo3.org/m/typo3/tutorial-getting-started/main/en-us/Concepts/Index.html#concepts)** Written for new users, this chapter introduces some of TYPO3s core concepts including the backend, TYPO3s administration interface. **[System Requirements](https://docs.typo3.org/m/typo3/tutorial-getting-started/main/en-us/Installation/SystemRequirements/Index.html#system-requirements)** System requirements for the host operation system, including its web server and database and how they should be configured prior to installation. **EXT:my_extension/Documentation/SomeChapter.rst** ```rst .. card-grid:: :columns: 1 :columns-md: 2 :gap: 4 :class: pb-4 :card-height: 100 .. card:: :ref:`Concepts ` Written for new users, this chapter introduces some of TYPO3s core concepts including the backend, TYPO3s administration interface. .. card:: :ref:`System Requirements ` System requirements for the host operation system, including it's web server and database and how they should be configured prior to installation. ``` ## Cards with buttons in the footer **[Pages](https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html#pages)** The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed. [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) **[Content](https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/ContentElements/Index.html#content-elements)** The Content Creation Guide shows how page content is created in the form of Content Elements. [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) **[Pages](https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html#pages)** The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed. [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) **[Content](https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/ContentElements/Index.html#content-elements)** The Content Creation Guide shows how page content is created in the form of Content Elements. - [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) **Stretched link** The complete card can be linked if you use exactly one stretched link. [Read more](https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/ContentElements/Index.html#content-elements) **EXT:my_extension/Documentation/SomeChapter.rst** ```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 ![Cards, example output](/_Images/cards.png) **[Cards](https://docs.typo3.org/permalink/h2document:rest-cards)** Cards can be used to shortly introduce topics and generate overview pages. ![Tabs, example output](/_Images/tabs.png) **[Tabs](https://docs.typo3.org/permalink/h2document:rest-tabs)** Tabs can be used to present a topic from different perspectives. ![Cards, example output](/_Images/cards.png) **[Cards](https://docs.typo3.org/permalink/h2document:rest-cards)** Cards can be used to shortly introduce topics and generate overview pages. ![Tabs, example output](/_Images/tabs.png) **[Tabs](https://docs.typo3.org/permalink/h2document:rest-tabs)** This card has the image at the bottom **EXT:my_extension/Documentation/SomeChapter.rst** ```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 ```