Sphinx Design Components

The PyData Sphinx Theme uses sphinx-design to add several UI components and provide extra flexibility for content creation. These include badges, buttons, cards, and tabs, among other components. This theme provides custom CSS to ensure that sphinx-design elements look and feel consistent with this theme.

See also

For more information about how to use these extensions, see the sphinx-design documentation.

Below you can find some examples of the components created with the sphinx-design extension.

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

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!