Sphinx design#

This example shows how the Ansys Sphinx Theme renders documentation components using the sphinx-design extension. For comprehensive information, see its documentation.

Credits and acknowledgments#

The examples presented below are sourced from the Sphinx Design project Copyright (c) by Chris Sewell (2023), available at sphinx design examples. This project is licensed under the MIT License.

Badge-basic#

:bdg:`plain badge`

:bdg-primary:`primary`, :bdg-primary-line:`primary-line`

:bdg-secondary:`secondary`, :bdg-secondary-line:`secondary-line`

:bdg-success:`success`, :bdg-success-line:`success-line`

:bdg-info:`info`, :bdg-info-line:`info-line`

:bdg-warning:`warning`, :bdg-warning-line:`warning-line`

:bdg-danger:`danger`, :bdg-danger-line:`danger-line`

:bdg-light:`light`, :bdg-light-line:`light-line`

:bdg-muted:`muted`, :bdg-muted-line:`muted-line`

:bdg-dark:`dark`, :bdg-dark-line:`dark-line`

:bdg-white:`white`, :bdg-white-line:`white-line`

:bdg-black:`black`, :bdg-black-line:`black-line`

This directive renders as follows:

plain badge

primary, primary-line

secondary, secondary-line

success, success-line

info, info-line

warning, warning-line

danger, danger-line

light, light-line

muted, muted-line

dark, dark-line

white, white-line

black, black-line

Card-basic#

.. card:: Card Title

    Card content

This directive renders as follows:

Card Title

Card content

Card-head-foot#

.. card:: Card Title

    Header
    ^^^
    Card content
    +++
    Footer

This directive renders as follows:

Header

Card Title

Card content

Footer

Card-images#

.. grid:: 2 3 3 4

    .. grid-item::

        .. card:: Title
            :img-background: images/particle_background.jpg
            :class-card: sd-text-black
            :img-alt: my text

            Text

    .. grid-item-card:: Title
        :img-top: images/particle_background.jpg
        :img-alt:

        Header
        ^^^
        Content
        +++
        Footer

    .. grid-item-card:: Title
        :img-bottom: images/particle_background.jpg

        Header
        ^^^
        Content
        +++
        Footer

This directive renders as follows:

my text
Title

Text

Header

Title

Content

Footer

Header

Title

Content

Footer

Div-basic#

.. div:: sd-text-center sd-font-italic sd-text-primary

    Some CSS styled text

This directive renders as follows:

Some CSS styled text

Grid-basic#

.. grid:: 1 2 3 4
    :outline:

    .. grid-item::

        A

    .. grid-item::

        B

    .. grid-item::

        C

    .. grid-item::

        D

This directive renders as follows:

A

B

C

D

Grid-card-columns#

.. grid:: 2

    .. grid-item-card::
        :columns: auto

        A

    .. grid-item-card::
        :columns: 12 6 6 6

        B

    .. grid-item-card::
        :columns: 12

        C

This directive renders as follows:

A

B

C

Grid-card#

.. grid:: 2

    .. grid-item-card::  Title 1

        A

    .. grid-item-card::  Title 2

        B

This directive renders as follows:

Title 1

A

Title 2

B

Grid-gutter#

.. grid:: 2
    :gutter: 1

    .. grid-item-card::

        A

    .. grid-item-card::

        B

.. grid:: 2
    :gutter: 3 3 4 5

    .. grid-item-card::

        A

    .. grid-item-card::

        B

This directive renders as follows:

A

B

A

B

Grid-nested#

.. grid:: 1 1 2 2
    :gutter: 1

    .. grid-item::

        .. grid:: 1 1 1 1
            :gutter: 1

            .. grid-item-card:: Item 1.1

                Multi-line

                content

            .. grid-item-card:: Item 1.2

                Content

    .. grid-item::

        .. grid:: 1 1 1 1
            :gutter: 1

            .. grid-item-card:: Item 2.1

                Content

            .. grid-item-card:: Item 2.2

                Content

            .. grid-item-card:: Item 2.3

                Content

This directive renders as follows:

Item 1.1

Multi-line

content

Item 1.2

Content

Item 2.1

Content

Item 2.2

Content

Item 2.3

Content

Icon-fontawesome#

An icon :fas:`spinner;sd-bg-primary sd-bg-text-primary`, some more text.

This directive renders as follows:

An icon , some more text.

Icon-material-design#

- A regular icon: :material-regular:`data_exploration;2em`, some more text
- A coloured regular icon: :material-regular:`settings;3em;sd-text-success`, some more text.
- A coloured outline icon: :material-outlined:`settings;3em;sd-text-success`, some more text.
- A coloured sharp icon: :material-sharp:`settings;3em;sd-text-success`, some more text.
- A coloured round icon: :material-round:`settings;3em;sd-text-success`, some more text.
- A coloured two-tone icon: :material-twotone:`settings;3em;sd-text-success`, some more text.
- A fixed size icon: :material-regular:`data_exploration;24px`, some more text.

This directive renders as follows:

  • A regular icon: , some more text

  • A coloured regular icon: , some more text.

  • A coloured outline icon: , some more text.

  • A coloured sharp icon: , some more text.

  • A coloured round icon: , some more text.

  • A coloured two-tone icon: , some more text.

  • A fixed size icon: , some more text.

Icon-octicon#

A coloured icon: :octicon:`report;1em;sd-text-info`, some more text.

This directive renders as follows:

A coloured icon: , some more text.

Tab-basic#

.. tab-set::

    .. tab-item:: Label1

        Content 1

    .. tab-item:: Label2

        Content 2

This directive renders as follows:

Content 1

Content 2

Tab-code-set#

.. tab-set-code::

    .. literalinclude:: ./snippet.py
        :language: python

    .. code-block:: javascript

        a = 1;

This directive renders as follows:

# Copyright (C) 2021 - 2026 Synopsys, Inc. and ANSYS, Inc. All rights reserved.
# SPDX-License-Identifier: Apache-2.0
#
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

"""Sample functions for ansys-sphinx-theme."""


def func(arg1, arg2):
    """Summary line <should be one one line>.

    Extended description of function.  Can span multiple lines and
    provides a general overview of the function.

    .. warning::
       Use the ``.. warning::`` directive within the doc-string for any
       warnings you would like to explicitly state.  For example, if
       this method will be deprecated in the next release.

    Parameters
    ----------
    arg1 : int
        Description of arg1.
    arg2 : str
        Description of arg2.

    Returns
    -------
    bool
        Description of return value.

    Examples
    --------
    >>> func(1, "foo")
    True

    """
    return True

a = 1;

Tab-options#

.. tab-set::
    :class: class-set

    .. tab-item:: **Label**
        :name: tab-options.txt
        :selected:
        :class-container: class-container
        :class-label: class-label
        :class-content: class-content

        Content

:ref:`tab-options.txt`, :ref:`text <tab-options.txt>`

This directive renders as follows:

Content

Label, text

Tab-sync#

.. tab-set::
    :sync-group: category

    .. tab-item:: Label1
        :sync: key1

        Content 1

    .. tab-item:: Label2
        :sync: key2

        Content 2

.. tab-set::
    :sync-group: category

    .. tab-item:: Label1
        :sync: key1

        Content 1

    .. tab-item:: Label2
        :sync: key2

        Content 2

This directive renders as follows:

Content 1

Content 2

Content 1

Content 2