Example components - reStructuredText¶

Here is an example page containing the components of designed into this Sphinx theme. This text is part of the first header, but you should only use the first header once per page! All text on this page is written in reStructuredText (ReST).

You should see me in the sidebar in the On this page section.

Heading 2¶

Here is some text under Heading 2. You should see me in the sidebar in the On this page section.

Heading 3¶

Here is some text under Heading 3. You should see me in the sidebar in the On this page section.

Heading 4¶

Here is some text under Heading 4. You should see me in the sidebar in the On this page section.

Heading 5¶

Here is some text under Heading 5. You should see me in the sidebar in the On this page section.

Heading 6¶

Here is some text under Heading 6. You should see me in the sidebar in the On this page section.

Adding mathematics¶

To render mathematics in Sphinx, you need to have the Sphinx MathJax extension enabled. This example is taken directly from the documentation for MyST. If you write the following block of amsmath syntax:

.. math::
    :label: eqn_a

    \begin{gather*}
    a_1=b_1+c_1\\
    a_2=b_2+c_2-d_2+e_2
    \end{gather*}

.. math::
    :label: eqn_b

    \begin{align}
    a_{11}& =b_{11}&
    a_{12}& =b_{12}\\
    a_{21}& =b_{21}&
    a_{22}& =b_{22}+c_{22}
    \end{align}

this will be rendered as:

(1)¶\[\begin{split}\begin{gather*} a_1=b_1+c_1\\ a_2=b_2+c_2-d_2+e_2 \end{gather*}\end{split}\]

(2)¶\[\begin{split}\begin{align} a_{11}& =b_{11}& a_{12}& =b_{12}\\ a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22} \end{align}\end{split}\]

Adding tables¶

Tables are rendered using standard ReST table styles, so this:

+--------------------+-------------------------+
| Column 1           | Column 2                |
+====================+=========================+
| This is some data. | This is some more data. |
+--------------------+-------------------------+

becomes the following rendered output in the Sphinx documentation:

Column 1	Column 2
This is some data.	This is some more data.

Note only left-aligned columns are supported by ReST, without injecting raw HTML.

Including images¶

We have a GOV.UK logo image at ../_static/images/govuk-logo.png that we will use in the following example. To include the image in ReST, add the following text:

.. image:: ../_static/images/govuk-logo.png
    :alt: GOV.UK logo
    :width: 200px

to include the image with the alt text GOV.UK logo at a set width of 200 pixels, like so:

GOV.UK Design System components¶

Some of the GOV.UK Design System components are incorporated into this theme .

Warning¶

To add a warning, add the following code to your ReST file:

.. warning::

    A warning.

which produces:

!WarningA warning.