Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Explain how to use card directives #413

Merged
merged 3 commits into from
Apr 24, 2024
Merged

[FEATURE] Explain how to use card directives #413

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
357524f
[FEATURE] Explain how to use card directives
linawolf Apr 21, 2024
8a7a168
[FEATURE] Explain how to use card directives
linawolf Apr 21, 2024
1594f27
Apply suggestions from code review
linawolf Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 147 additions & 135 deletions Documentation/WritingReST/Reference/Content/Cards.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,231 +9,243 @@ 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
.. deprecated:: 0.2.40

.. container:: card px-0 h-100
Cards were 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.

.. rst-class:: card-header h3
We discourage using containers for cards and suggest to switch to the
cards directive.

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

.. container:: card px-0 h-100
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:class: pb-4
:card-height: 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.

.. code-block:: rst
:caption: EXT:my_extension/Documentation/SomeChapter.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
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:class: pb-4
:card-height: 100

.. container:: card px-0 h-100
.. card:: :ref:`Concepts <t3start:Concepts>`

.. rst-class:: card-header h3
Written for new users, this chapter introduces some of TYPO3s
core concepts including the backend, TYPO3s administration
interface.

.. rubric:: :ref:`System Requirements <t3start:System-Requirements>`
.. card:: :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.
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 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
:class: pb-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

* `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>`__
The Content Creation Guide shows how page content is created in the form of Content Elements.

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
.. 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:: card px-0 h-100
.. card:: :ref:`Pages <t3editors:pages>`

.. rst-class:: card-header h3
The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.

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

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

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.

.. container:: card-footer pb-0
.. card-footer::

.. 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
.. card:: Stretched link

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
The complete card can be linked if you use exactly one stretched link.

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

.. rst-class:: card-header h3
.. code-block:: rst
:caption: EXT:my_extension/Documentation/SomeChapter.rst

.. rubric:: :ref:`Pages <t3editors:pages>`
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:class: pb-4
:card-height: 100

.. container:: card-body
.. card:: :ref:`Pages <t3editors:pages>`

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.

.. container:: card-footer pb-0
.. 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

.. rst-class:: horizbuttons-striking-m
.. card:: :ref:`Content <t3editors: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>`__
The Content Creation Guide shows how page content is created in the form of Content Elements.

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
.. 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:: card px-0 h-100
.. card:: :ref:`Pages <t3editors:pages>`

.. rst-class:: card-header h3
The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.

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

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

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.

.. container:: card-footer pb-0
.. card-footer::

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


.. card:: Stretched link

The complete card can be linked if you use exactly one stretched link.

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


Cards with images
=================

.. container:: row m-0 p-0
.. card-grid::
:columns: 1
:columns-md: 2
:gap: 4
:class: pb-4
:card-height: 100

.. 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:`Cards <rest-cards>`
.. card:: :ref:`Tabs <rest-tabs>`

.. container:: card-body
.. card-image:: /Images/tabs.png
:alt: Tabs, example output

.. image:: /Images/cards.png
:alt: Cards, example output
:class: with-shadow mb-2
Tabs can be used to present a topic from different perspectives.

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

.. container:: col-md-6 pl-0 pr-3 py-3 m-0
.. card-image:: /Images/cards.png
:alt: Cards, example output

.. container:: card px-0 h-100
Cards can be used to shortly introduce topics and generate
overview pages.

.. rst-class:: card-header h3

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

.. container:: card-body
.. card-image:: /Images/tabs.png
:alt: Tabs, example output
:position: bottom

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

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

.. code-block:: rst
:caption: EXT:my_extension/Documentation/SomeChapter.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
:class: pb-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