Note

This version of the guide covers the new PHP-based rendering of Documentation with the TYPO3 Documentation theme.

If the project you are looking at has a file Documentation/guides.xml it is using the new rendering.

Otherwise, consider to migrate the Documentation or head over to the legacy version of this guide: How to document, Sphinx based.

Cards

Cards are used to group content together and provide a brief introduction on a given subject.

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

Written for new users, this chapter introduces some of TYPO3s core concepts including the backend, TYPO3s administration interface.

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

..  card-grid::
    :columns: 1
    :columns-md: 2
    :gap: 4
    :class: pb-4
    :card-height: 100

    ..  card:: :ref:`Concepts <t3start:Concepts>`

        Written for new users, this chapter introduces some of TYPO3s
        core concepts including the backend, TYPO3s administration
        interface.

    ..  card:: :ref:`System Requirements <t3start: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.

Stretched link

The complete card can be linked if you use exactly one stretched link.

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

..  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

Cards

Simple cards

Cards with buttons in the footer

Stretched link

Cards with images