List items as buttons

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

..  rst-class:: horizbuttons-attention-m

*   horizbuttons-attention-m
*   two
*   three `with link <#>`__
Copied!

Available styles

horizbuttons-attention-m

Like admonition attention (blue)

  • horizbuttons-attention-m
  • two
  • three with link

horizbuttons-important-m

Like admonitions error, important (yellow)

  • horizbuttons-important-m
  • two
  • three with link

horizbuttons-note-m

Like admonitions generic, note, see also (neutral, grey)

horizbuttons-primary-m

Use the primary = key color (TYPO3 orange)

horizbuttons-striking-m

Shall be very striking and unusual, something to not be be overseen.

  • horizbuttons-striking-m
  • two
  • three with link

horizbuttons-tip-m

Like admonitions hint, tip (green)

horizbuttons-warning-m

Like admonitions caution, danger, warning (red)

horizbuttons-attention-xxl

Like admonition attention (blue)

  • horizbuttons-attention-xxl
  • two
  • three with link

horizbuttons-important-xxl

Like admonitions error, important (yellow)

  • horizbuttons-important-xxl
  • two
  • three with link

horizbuttons-note-xxl

Like admonitions generic, note, see also (neutral, grey)

horizbuttons-primary-xxl

Use the primary = key color (TYPO3 orange)

  • horizbuttons-primary-xxl
  • two
  • three with link

horizbuttons-striking-xxl

Shall be very striking and unusual, something to not be be overseen.

  • horizbuttons-striking-xxl
  • two
  • three with link

horizbuttons-tip-xxl

Like admonitions hint, tip (green)

horizbuttons-warning-xxl

Like admonitions caution, danger, warning (red)

  • horizbuttons-danger-xxl
  • two
  • three with link

horizbuttons-attention-xxxl

Like admonition attention (blue)

  • horizbuttons-attention-xxxl
  • two
  • three with link

horizbuttons-important-xxxl

Like admonitions error, important (yellow)

  • horizbuttons-important-xxxl
  • two
  • three with link

horizbuttons-note-xxxl

Like admonitions generic, note, see also (neutral, grey)

horizbuttons-primary-xxxl

Use the primary = key color (TYPO3 orange)

  • horizbuttons-primary-xxxl
  • two
  • three with link

horizbuttons-striking-xxxl

Shall be very striking and unusual, something to not be be overseen.

  • horizbuttons-striking-xxxl
  • two
  • three with link

horizbuttons-tip-xxxl

Like admonitions hint, tip (green)

horizbuttons-warning-xxxl

Like admonitions caution, danger, warning (red)

  • horizbuttons-danger-xxxl
  • two
  • three with link