Skip to content

Commit

Permalink
[FEATURE] Explain how to use card directives
Browse files Browse the repository at this point in the history 
Make using container for the task deprecated
  • Loading branch information
@linawolf
linawolf committed Apr 21, 2024
1 parent 0b81fba commit 357524f
Showing 1 changed file with 78 additions and 172 deletions.
250 changes: 78 additions & 172 deletions Documentation/WritingReST/Reference/Content/Cards.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,231 +9,137 @@ 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
.. deprecated:: 0.2.40

System requirements for the host operation system, including
its web server and database and how they should be configured
prior to installation.
Cards where previously created by using nested :rst:`.. container::`
directives with manually applied classes. The largest disadvantages were
a large number of nested blocks and having to apply many classes.

.. code-block:: rst
We discourage using containers for cards and suggest to switch to the
cards directive.

.. container:: row m-0 p-0
.. container:: col-md-6 pl-0 pr-3 py-3 m-0
.. container:: card px-0 h-100
Simple cards
============

.. rst-class:: card-header h3
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:card-height: 100

.. rubric:: :ref:`Concepts <t3start:Concepts>`
.. card:: :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.

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

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
System requirements for the host operation system, including
its web server and database and how they should be configured
prior to installation.

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

.. rst-class:: card-header h3
.. card:: :ref:`Concepts <t3start:Concepts>`

.. rubric:: :ref:`System Requirements <t3start:System-Requirements>`
Written for new users, this chapter introduces some of TYPO3s
core concepts including the backend, TYPO3s administration
interface.

.. container:: card-body
.. card:: :ref:`System Requirements <t3start:System-Requirements>`

System requirements for the host operation system, including
its web server and database and how they should be configured
prior to installation.
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
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:card-height: 100

.. rubric:: :ref:`Pages <t3editors:pages>`
.. card:: :ref:`Pages <t3editors:pages>`

.. container:: card-body
The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.

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

.. container:: card-footer pb-0
.. card:: :ref:`Content <t3editors:content-elements>`

.. rst-class:: horizbuttons-striking-m
The Content Creation Guide shows how page content is created in the form of Content Elements.

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

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
.. card:: :ref:`Pages <t3editors:pages>`

.. container:: card px-0 h-100
The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.

.. rst-class:: card-header h3
.. 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

.. rubric:: :ref:`Content <t3editors:content-elements>`
.. card:: :ref:`Content <t3editors:content-elements>`

.. container:: card-body
The Content Creation Guide shows how page content is created in the form of Content Elements.

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

.. container:: card-footer pb-0

.. rst-class:: horizbuttons-striking-m
.. 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
.. card:: Stretched link

The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.
The complete card can be linked if you use exactly one stretched link.

.. container:: card-footer pb-0
.. card-footer:: :ref:`Read more <t3editors:content-elements>`
:button-style: btn btn-secondary stretched-link

.. 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
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:card-height: 100

.. container:: card px-0 h-100
.. card:: :ref:`Cards <rest-cards>`

.. rst-class:: card-header h3
.. card-image:: /Images/cards.png
:alt: Cards, example output

.. rubric:: :ref:`Cards <rest-cards>`
Cards can be used to shortly introduce topics and generate
overview pages.

.. container:: card-body
.. card:: :ref:`Tabs <rest-tabs>`

.. image:: /Images/cards.png
:alt: Cards, example output
:class: with-shadow mb-2
.. card-image:: /Images/tabs.png
:alt: Tabs, example output

Cards can be used to shortly introduce topics and generate
overview pages.
Tabs can be used to present a topic from different perspectives.

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
.. card:: :ref:`Cards <rest-cards>`

.. container:: card px-0 h-100
.. card-image:: /Images/cards.png
:alt: Cards, example output

.. rst-class:: card-header h3
Cards can be used to shortly introduce topics and generate
overview pages.

.. rubric:: :ref:`Tabs <rest-tabs>`

.. container:: card-body
.. card:: :ref:`Tabs <rest-tabs>`

.. image:: /Images/tabs.png
:alt: Tabs, example output
:class: with-shadow mb-2
.. card-image:: /Images/tabs.png
:alt: Tabs, example output
:position: bottom

Tabs can be used to present a topic from different perspectives.
This card has the image at the bottom

0 comments on commit 357524f

Please sign in to comment.