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