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.


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 2 header

panel 2 content


int main(const int argc, const char **argv) {
    return 0;
def main():
class Main {
    public static void main(String[] args) {
function main()


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!")


If your documentation site uses both nbsphinx and Sphinx-copybutton, you will want to add the following line to your conf.py file to prevent the copy button from appearing on top of notebook cell numbers:

copybutton_selector = ":not(.prompt) > div.highlight pre"

Toggle buttons#

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

A standalone toggle button!