Skip to content

Commit 4560aa8

Browse files
committed
[TASK] Add render test for Bootstrap cards
There are some style issues to be resolved in another PR, see #514
1 parent 178cfe2 commit 4560aa8

File tree

1 file changed

+316
-0
lines changed

1 file changed

+316
-0
lines changed
Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
.. include:: /Includes.rst.txt
2+
.. index:: ! card
3+
.. _cards:
4+
5+
=====
6+
Cards
7+
=====
8+
9+
.. contents:: This page
10+
:local:
11+
12+
Responsive cards
13+
================
14+
15+
.. card-grid::
16+
:columns: 1
17+
:columns-md: 3
18+
:gap: 4
19+
:card-height: 100
20+
21+
.. card::
22+
23+
.. card-image:: /images/q150_cccccc.png
24+
:alt: Hero Illustration
25+
26+
.. card-header:: :ref:`Linked Card Header <cards>`
27+
28+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
29+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
30+
sed diam voluptua.
31+
32+
.. card-footer:: :ref:`Read more <cards>`
33+
34+
.. card::
35+
36+
.. card-image:: /images/q150_dddddd.png
37+
:alt: Hero Illustration
38+
39+
.. card-header:: :ref:`Linked Card Header <cards>`
40+
41+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
42+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
43+
sed diam voluptua.
44+
45+
.. card-footer:: :ref:`Read more <cards>`
46+
47+
.. card::
48+
49+
.. card-image:: /images/q150_eeeeee.png
50+
:alt: Hero Illustration
51+
52+
.. card-header:: :ref:`Linked Card Header <cards>`
53+
54+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
55+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
56+
sed diam voluptua.
57+
58+
.. card-footer:: :ref:`Read more <cards>`
59+
60+
.. card::
61+
62+
.. card-image:: /images/q150_f8f8f8.png
63+
:alt: Hero Illustration
64+
65+
.. card-header:: :ref:`Linked Card Header <cards>`
66+
67+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
68+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
69+
sed diam voluptua.
70+
71+
.. card-footer:: :ref:`Read more <cards>`
72+
73+
Cards with complex content, very responsive
74+
===========================================
75+
76+
.. card-grid::
77+
:columns: 1
78+
:columns-sm: 2
79+
:columns-md: 3
80+
:columns-lg: 4
81+
:card-height: 100
82+
:class: pt-4
83+
84+
.. card:: Card Header
85+
86+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
87+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
88+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
89+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
90+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
91+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
92+
sed diam voluptua. At vero eos et accusam et justo duo dolores et
93+
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
94+
Lorem ipsum dolor sit amet.
95+
96+
.. card:: :ref:`Linked Card Header <cards>` text-center
97+
98+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
99+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
100+
sed diam voluptua.
101+
102+
.. card-footer::
103+
104+
* `12-dev <https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html>`__
105+
* `11.5 <https://docs.typo3.org/m/typo3/tutorial-editors/11.5/en-us/Pages/Index.html>`__
106+
* `10.4 <https://docs.typo3.org/m/typo3/tutorial-editors/10.4/en-us/Pages/Index.html>`__
107+
108+
.. card::
109+
110+
.. card-header:: :ref:`Linked Card Header <cards>`
111+
112+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
113+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
114+
sed diam voluptua.
115+
116+
.. card-footer:: :ref:`Read more <cards>`
117+
118+
.. card::
119+
120+
.. card-image:: /images/q150_cccccc.png
121+
:alt: Hero Illustration
122+
123+
.. card-header:: :ref:`Linked Card Header <cards>`
124+
125+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
126+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
127+
sed diam voluptua.
128+
129+
.. card-footer:: :ref:`Read more <cards>`
130+
131+
132+
.. card::
133+
:name: some-card
134+
135+
.. card-image:: /images/q150_cccccc.png
136+
:alt: Hero Illustration
137+
138+
.. rubric:: Overlay
139+
:class: h3
140+
141+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
142+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
143+
sed diam voluptua.
144+
145+
.. card-footer:: :ref:`Read more <cards>`
146+
147+
.. card:: :ref:`Linked Card Header <cards>`
148+
:name: another-card
149+
150+
.. card-image:: /images/q150_cccccc.png
151+
:alt: Hero Illustration
152+
:position: bottom
153+
154+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
155+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
156+
sed diam voluptua.
157+
158+
.. card-footer:: :ref:`Read more <cards>`
159+
160+
Card group
161+
==========
162+
163+
164+
.. card-group::
165+
166+
.. card::
167+
168+
.. card-image:: /images/q150_cccccc.png
169+
:alt: Hero Illustration
170+
171+
.. card-header:: :ref:`Linked Card Header <cards>`
172+
173+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
174+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
175+
sed diam voluptua.
176+
177+
.. card-footer:: :ref:`Read more <cards>`
178+
179+
.. card::
180+
181+
.. card-image:: /images/q150_cccccc.png
182+
:alt: Hero Illustration
183+
184+
.. card-header:: :ref:`Linked Card Header <cards>`
185+
186+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
187+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
188+
sed diam voluptua.
189+
190+
.. card-footer:: :ref:`Read more <cards>`
191+
192+
.. card::
193+
194+
.. card-image:: /images/q150_cccccc.png
195+
:alt: Hero Illustration
196+
197+
.. card-header:: :ref:`Linked Card Header <cards>`
198+
199+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
200+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
201+
sed diam voluptua.
202+
203+
.. card-footer:: :ref:`Read more <cards>`
204+
205+
.. card::
206+
207+
.. card-image:: /images/q150_cccccc.png
208+
:alt: Hero Illustration
209+
210+
.. card-header:: :ref:`Linked Card Header <cards>`
211+
212+
**Lorem ipsum dolor sit amet,** consetetur sadipscing elitr, sed diam nonumy
213+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
214+
sed diam voluptua.
215+
216+
.. card-footer:: :ref:`Read more <cards>`
217+
218+
219+
Cards with directive
220+
====================
221+
222+
.. card-grid::
223+
:columns: 1
224+
:columns-md: 2
225+
:gap: 4
226+
:card-height: 100
227+
228+
.. card:: :ref:`Migration <cards>`
229+
230+
Migrate your documentation to the new, PHP-based reST rendering.
231+
232+
233+
.. card:: `Extension Documentation <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/Index.html>`__
234+
235+
This chapter explains how to write documentation for a new extension.
236+
237+
238+
.. card:: `TYPO3 Documentation <https://docs.typo3.org/>`__
239+
240+
Explains how you can contribute and help improve TYPO3's documentation.
241+
242+
.. card:: `System Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToSystemExtension.html>`__
243+
244+
The chapter contains information on how you can make changes to system extension documentation.
245+
246+
.. card:: `Third-party Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToThirdPartyExtension.html>`__
247+
248+
This chapter explains how you can about making changes to third-party extension documentation.
249+
250+
251+
Cards with containers (deprecated)
252+
==================================
253+
254+
.. container:: row m-0 p-0
255+
256+
.. container:: col-md-6 pl-0 pr-3 py-3 m-0
257+
258+
.. container:: card px-0 h-100
259+
260+
.. rst-class:: card-header h3
261+
262+
.. rubric:: :ref:`Migration <cards>`
263+
264+
.. container:: card-body
265+
266+
Migrate your documentation to the new, PHP-based reST rendering.
267+
268+
.. container:: row m-0 p-0
269+
270+
.. container:: col-md-6 pl-0 pr-3 py-3 m-0
271+
272+
.. container:: card px-0 h-100
273+
274+
.. rst-class:: card-header h3
275+
276+
.. rubric:: `Extension Documentation <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/Index.html>`__
277+
278+
.. container:: card-body
279+
280+
This chapter explains how to write documentation for a new extension.
281+
282+
.. container:: col-md-6 pl-0 pr-3 py-3 m-0
283+
284+
.. container:: card px-0 h-100
285+
286+
.. rst-class:: card-header h3
287+
288+
.. rubric:: `TYPO3 Documentation <https://docs.typo3.org/>`__
289+
290+
.. container:: card-body
291+
292+
Explains how you can contribute and help improve TYPO3's documentation.
293+
294+
.. container:: col-md-6 pl-0 pr-3 py-3 m-0
295+
296+
.. container:: card px-0 h-100
297+
298+
.. rst-class:: card-header h3
299+
300+
.. rubric:: `System Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToSystemExtension.html>`__
301+
302+
.. container:: card-body
303+
304+
The chapter contains information on how you can make changes to system extension documentation.
305+
306+
.. container:: col-md-6 pl-0 pr-3 py-3 m-0
307+
308+
.. container:: card px-0 h-100
309+
310+
.. rst-class:: card-header h3
311+
312+
.. rubric:: `Third-party Extensions <https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/WritingDocForExtension/ContributeToThirdPartyExtension.html>`__
313+
314+
.. container:: card-body
315+
316+
This chapter explains how you can about making changes to third-party extension documentation.

0 commit comments

Comments
 (0)