Cards¶

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

Simple cards¶

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.

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

            ..  container:: card-body

                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¶

Pages

The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.

Content

The Content Creation Guide shows how page content is created in the form of Content Elements.

..  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 <t3editors:pages>`

            ..  container:: card-body

                The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.

            ..  container:: card-footer pb-0

                ..  rst-class:: horizbuttons-striking-m

                *   `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>`__

    ..  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 <t3editors:content-elements>`

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

Cards with images¶

Cards

Cards can be used to shortly introduce topics and generate overview pages.

Tabs

Tabs can be used to present a topic from different perspectives.

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