..  include:: /Includes.rst.txt
..  highlight:: rst
..  index:: reST; Cards
..  _rest-cards:

=====
Cards
=====

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

Simple cards
============

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

..  code-block:: rst

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

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

..  code-block:: rst

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

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

..  code-block:: rst

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