..  include:: /Includes.rst.txt
..  index:: ! card
..  _cards:

=====
Cards
=====

..  contents:: This page
    :local:

Responsive cards
================

..  card-grid::
    :columns: 1
    :columns-md: 3
    :gap: 4
    :card-height: 100

    ..  card::

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_dddddd.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_eeeeee.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_f8f8f8.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

Cards with complex content, very responsive
===========================================

..  card-grid::
    :columns: 1
    :columns-sm: 2
    :columns-md: 3
    :columns-lg: 4
    :card-height: 100
    :class: pt-4

    ..  card:: Card Header

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem ipsum dolor sit amet.

    ..  card:: :ref:`Linked Card Header <cards>` text-center

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

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

    ..  card::

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`


    ..  card::
        :name: some-card

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

            ..  rubric:: Overlay
                :class: h3

            **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
            sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card:: :ref:`Linked Card Header <cards>`
        :name: another-card

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration
            :position: bottom

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

Cards with complex footer
=========================

..  card-grid::
    :columns: 1
    :columns-md: 3
    :gap: 4
    :card-height: 100

    ..  card:: `Minor upgrades <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__


        Minor updates (for example 12.4.1 to 12.4.2)
        contain bugfixes and/or security updates.
        This chapter details how updates are installed and highlights what tasks need to
        be carried out before and after the core is updated.

        ..  card-footer:: `13-dev <https://docs.typo3.org/m/typo3/guide-installation/main/en-us/Minor/Index.html>`__ `12.4 <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__ `11.5 <https://docs.typo3.org/m/typo3/guide-installation/11.5/en-us/Minor/Index.html>`__
            :button-style: btn btn-secondary

    ..  card:: `Minor upgrades <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__

        Minor updates (for example 12.4.1 to 12.4.2)
        contain bugfixes and/or security updates.
        This chapter details how updates are installed and highlights what tasks need to
        be carried out before and after the core is updated.

        ..  card-footer::
            :button-styles: secondary

            `13-dev <https://docs.typo3.org/m/typo3/guide-installation/main/en-us/Minor/Index.html>`__
            `12.4 <https://docs.typo3.org/m/typo3/guide-installation/12.4/en-us/Minor/Index.html>`__
            `11.5 <https://docs.typo3.org/m/typo3/guide-installation/11.5/en-us/Minor/Index.html>`__


Card group
==========


..  card-group::

    ..  card::

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`

    ..  card::

        ..  card-image:: /images/q150_cccccc.png
            :alt: Hero Illustration

        ..  card-header:: :ref:`Linked Card Header <cards>`

        **Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.

        ..  card-footer:: :ref:`Read more <cards>`


Cards with directive
====================

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

    ..  card:: :ref:`Migration <cards>`

        Migrate your documentation to the new, PHP-based reST rendering.


    ..  card:: `Extension Documentation <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/Index.html>`__

        This chapter explains how to write documentation for a new extension.


    ..  card:: `TYPO3 Documentation <https://docs.typo3.org/>`__

        Explains how you can contribute and help improve TYPO3's documentation.

    ..  card:: `System Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToSystemExtension.html>`__

        The chapter contains information on how you can make changes to system extension documentation.

    ..  card:: `Third-party Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToThirdPartyExtension.html>`__

        This chapter explains how you can about making changes to third-party extension documentation.


Cards with containers (deprecated)
==================================

..  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:`Migration <cards>`

            ..  container:: card-body

                Migrate your documentation to the new, PHP-based reST rendering.

..  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:: `Extension Documentation <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/Index.html>`__

            ..  container:: card-body

                This chapter explains how to write documentation for a new extension.

    ..  container:: col-md-6 pl-0 pr-3 py-3 m-0

        ..  container:: card px-0 h-100

            ..  rst-class:: card-header h3

                ..  rubric:: `TYPO3 Documentation <https://docs.typo3.org/>`__

            ..  container:: card-body

                Explains how you can contribute and help improve TYPO3's documentation.

    ..  container:: col-md-6 pl-0 pr-3 py-3 m-0

        ..  container:: card px-0 h-100

            ..  rst-class:: card-header h3

                ..  rubric:: `System Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToSystemExtension.html>`__

            ..  container:: card-body

                The chapter contains information on how you can make changes to system extension documentation.

    ..  container:: col-md-6 pl-0 pr-3 py-3 m-0

        ..  container:: card px-0 h-100

            ..  rst-class:: card-header h3

                ..  rubric:: `Third-party Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToThirdPartyExtension.html>`__

            ..  container:: card-body

                This chapter explains how you can about making changes to third-party extension documentation.