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¶
System Requirements¶
System requirements for the host operation system, including its web server and database and how they should be configured prior to installation.
.. 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.
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