.. include:: /Includes.rst.txt
.. index:: reST; Buttons
.. _list-items-as-buttons:
=====================
List items as buttons
=====================
.. attention::
**Pitfall!**
With pure Docutils the directive for specifying CSS classes is `class`.
With Sphinx you have to use `.. rst-class:: ...` instead because `class`
is already used in the Sphinx-Python-domain.
How does it work?
=================
The *t3SphinxThemeRtd* theme for TYPO3 comes along with style that make
the items of an unordered list appear as "buttons". To put this into
action the `
` tag needs to have one of the following (css-) classes.
To assign a class place a `.. rst-class:: THENAME` right in front of
the list like so:
.. code-block:: rst
.. rst-class:: horizbuttons-attention-m
* horizbuttons-attention-m
* two
* three `with link <#>`__
.. index:: reST classes; horizbuttons
Available styles
================
horizbuttons-attention-m
------------------------
Like admonition *attention* (blue)
.. rst-class:: horizbuttons-attention-m
* horizbuttons-attention-m
* two
* three `with link <#>`__
horizbuttons-important-m
------------------------
Like admonitions *error*, *important* (yellow)
.. rst-class:: horizbuttons-important-m
* horizbuttons-important-m
* two
* three `with link <#>`__
horizbuttons-note-m
-------------------
Like admonitions *generic*, *note*, *see also* (neutral, grey)
.. rst-class:: horizbuttons-note-m
* horizbuttons-note-m
* two
* three `with link <#>`__
horizbuttons-primary-m
-----------------------
Use the primary = key color (TYPO3 orange)
.. rst-class:: horizbuttons-primary-m
* horizbuttons-primary-m
* two
* three `with link <#>`__
horizbuttons-striking-m
-----------------------
Shall be very striking and unusual, something to not be be overseen.
.. rst-class:: horizbuttons-striking-m
* horizbuttons-striking-m
* two
* three `with link <#>`__
horizbuttons-tip-m
------------------
Like admonitions *hint*, *tip* (green)
.. rst-class:: horizbuttons-tip-m
* horizbuttons-tip-m
* two
* three `with link <#>`__
horizbuttons-warning-m
----------------------
Like admonitions *caution*, *danger*, *warning* (red)
.. rst-class:: horizbuttons-warning-m
* horizbuttons-danger-m
* two
* three `with link <#>`__
horizbuttons-attention-xxl
--------------------------
Like admonition *attention* (blue)
.. rst-class:: horizbuttons-attention-xxl
* horizbuttons-attention-xxl
* two
* three `with link <#>`__
horizbuttons-important-xxl
--------------------------
Like admonitions *error*, *important* (yellow)
.. rst-class:: horizbuttons-important-xxl
* horizbuttons-important-xxl
* two
* three `with link <#>`__
horizbuttons-note-xxl
---------------------
Like admonitions *generic*, *note*, *see also* (neutral, grey)
.. rst-class:: horizbuttons-note-xxl
* horizbuttons-note-xxl
* two
* three `with link <#>`__
horizbuttons-primary-xxl
------------------------
Use the primary = key color (TYPO3 orange)
.. rst-class:: horizbuttons-primary-xxl
* horizbuttons-primary-xxl
* two
* three `with link <#>`__
horizbuttons-striking-xxl
-------------------------
Shall be very striking and unusual, something to not be be overseen.
.. rst-class:: horizbuttons-striking-xxl
* horizbuttons-striking-xxl
* two
* three `with link <#>`__
horizbuttons-tip-xxl
--------------------
Like admonitions *hint*, *tip* (green)
.. rst-class:: horizbuttons-tip-xxl
* horizbuttons-tip-xxl
* two
* three `with link <#>`__
horizbuttons-warning-xxl
------------------------
Like admonitions *caution*, *danger*, *warning* (red)
.. rst-class:: horizbuttons-warning-xxl
* horizbuttons-danger-xxl
* two
* three `with link <#>`__
horizbuttons-attention-xxxl
---------------------------
Like admonition *attention* (blue)
.. rst-class:: horizbuttons-attention-xxxl
* horizbuttons-attention-xxxl
* two
* three `with link <#>`__
horizbuttons-important-xxxl
---------------------------
Like admonitions *error*, *important* (yellow)
.. rst-class:: horizbuttons-important-xxxl
* horizbuttons-important-xxxl
* two
* three `with link <#>`__
horizbuttons-note-xxxl
----------------------
Like admonitions *generic*, *note*, *see also* (neutral, grey)
.. rst-class:: horizbuttons-note-xxxl
* horizbuttons-note-xxxl
* two
* three `with link <#>`__
horizbuttons-primary-xxxl
-------------------------
Use the primary = key color (TYPO3 orange)
.. rst-class:: horizbuttons-primary-xxxl
* horizbuttons-primary-xxxl
* two
* three `with link <#>`__
horizbuttons-striking-xxxl
--------------------------
Shall be very striking and unusual, something to not be be overseen.
.. rst-class:: horizbuttons-striking-xxxl
* horizbuttons-striking-xxxl
* two
* three `with link <#>`__
horizbuttons-tip-xxxl
---------------------
Like admonitions *hint*, *tip* (green)
.. rst-class:: horizbuttons-tip-xxxl
* horizbuttons-tip-xxxl
* two
* three `with link <#>`__
horizbuttons-warning-xxxl
-------------------------
Like admonitions *caution*, *danger*, *warning* (red)
.. rst-class:: horizbuttons-warning-xxxl
* horizbuttons-danger-xxxl
* two
* three `with link <#>`__