Sphinx Design Components

On this page, you will find user interface components such as badges, buttons, cards, and tabs.

The components on this page are not provided by PyData Theme. They are provided by Sphinx Design <https://sphinx-design.readthedocs.io/en/pydata-theme/index.html>_ (a Sphinx extension). This means that if you wish to use the components on this page, you must install Sphinx Design separately and add it to your conf.py.

See also

To add the Sphinx Design extension to your Sphinx project, refer to Sphinx Design - Getting Started.

Contributors to both projects have worked to ensure compatible styling so that Sphinx Design components look and feel consistent with the PyData Theme.

This page shows you how the Sphinx Design components would look on your site if you were to use them in combination with the PyData Theme. Sphinx Design also provides a PyData-themed version of the Sphinx Design site; however, their site use an older version of this theme.

Any customizations you make to the theme could affect how these components appear on your site. So what you see on this page might not match exactly what you see on your site even if your site uses this theme.

Badges and button-links

Here are some of the available badges:

primary secondary success primary outline secondary outline success outline

Here are some of the available button-style links, also using semantic colors:

Info

Success

Warning

Danger

Muted

Light

Dark

Note

Sphinx Design buttons are actually links, meaning they are rendered in HTML with <a> tags instead of <button>. Use them if you need a link to look like a button, however, be aware that they do not follow accessibility best practices for native button components such as using the correct ARIA attributes.

If in your site’s custom CSS file you override the CSS custom properties --pst-color-* (where * is one of the semantic color names, such as primary, danger), badges and buttons will automatically use the custom color.

Cards

Only heading

Only body.

But with multiple text paragraphs.

Heading and body

Content of the third card.

Sample badge

A card with a dropdown menu

Click to expand dropdown

Hidden content

A clickable card

Don’t forget to add the alternative text with link-alt!

Clickable cards - Sphinx Design docs

panel 1 header

panel 1 content more content

panel 1 footer

panel 2 header

panel 2 content

panel 2 footer

Tabs

c++

int main(const int argc, const char **argv) {
    return 0;
}

python

def main():
    return

java

class Main {
    public static void main(String[] args) {
    }
}

julia

function main()
end

fortran

PROGRAM main
END PROGRAM main

Dropdowns

Dropdowns look similar to admonitions, but they are clickable interactive elements that can be used to hide content. See the Sphinx Design Dropdown documentation for more information.

An admonition for reference.

And some admonition content.

And with no title and some content!

With a title

And some content!

With a title and icon

And some content and an icon!

A primary color dropdown

And some content!

A secondary color dropdown

And some content!

Copybuttons

sphinx-copybutton adds a copy button to each of your code cells. You can see it in action by hovering over the code cell below:

print("A copybutton in the top-right!")

Toggle buttons

sphinx-togglebutton allows you to convert admonitions into toggle-able elements.

Click me to toggle!

This will be hidden until a click!

A standalone toggle button!