Sphinx Design Components#

Cards and tabs provide some extra UI flexibility for your content. This theme provides custom CSS to ensure that sphinx-design elements look and feel consistent with this theme.

See also

For more 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 buttons#

Here are some of the available badges: primary secondary success primary outline secondary outline success outline

Here are some buttons, also using semantic color names. Note: in this theme, info is defined to be the same color as primary, and warning is the same color as secondary. If in your site’s custom CSS file you override the CSS custom properties --pst-color-* (where * is one of the semantic color names, e.g., primary, danger, etc), badges and buttons will automatically use the custom color.


Only heading

Only body.

But with multiple text paragraphs.

Heading and body

Content of the third card.


A card with a dropdown menu
third card

Hidden content

A clickable card

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

Toggle buttons#

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

A standalone toggle button!