Sphinx Design Components#
On this page, you will find user interface components such as badges, buttons,cards, and tabs.
The components on this page arenot provided by PyData Theme.They are provided bySphinx Design (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 yourconf.py.
See also
To add the Sphinx Design extension to your Sphinx project, refer toSphinxDesign - Getting Started.
Contributors to both projects have worked to ensure compatible styling so thatSphinx Design components look and feel consistent with the PyData Theme.
This page shows you how the Sphinx Design components would look on your site ifyou were to use them in combination with the PyData Theme. Sphinx Design alsoprovides aPyData-themed version of the Sphinx Design site; however, their siteuse an older version of this theme.
Any customizations you make to the theme could affect how these componentsappear on your site. So what you see on this page might not match exactly whatyou see on your site even if your site uses this theme.
Badges and button-links#
Here are some of the available badges:
primarysecondarysuccessprimary outlinesecondary outlinesuccess outline
Here are some of the available button-style links, also using semantic colors:
Note
Sphinx Design buttons areactually links, meaning they are rendered in HTML with<a> tags insteadof<button>. Use them if you need a link to look like a button, but trynot to overuse them as they are not considered best practice foraccessibility. (For example, it upsets user interface expectations becausethe space bar can be used on<button>-tag buttons but not on<a>-taglinks that look like buttons.)
If in your site’scustom CSS file you override theCSScustom properties--pst-color-* (where* is one of thesemantic color names, such asprimary,danger), badges and buttons willautomatically use the custom color.
Cards#
Only body.
But with multiple text paragraphs.
Content of the third card.
Sample badge
Click to expand dropdown
Hidden content
Don’t forget to add the alternative text withlink-alt!
panel 1 header
panel 1 contentmore content
panel 1 footer
panel 2 header
panel 2 content
panel 2 footer
Tabs#
intmain(constintargc,constchar**argv){return0;}
defmain():return
classMain{publicstaticvoidmain(String[]args){}}
functionmain()end
PROGRAMmainEND PROGRAMmain
Dropdowns#
Dropdowns look similar to admonitions, but they are clickable interactive elements that can be used to hide content.Seethe 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!")
nbsphinx
If your documentation site uses both nbsphinx and Sphinx-copybutton, youwill want to add the following line to yourconf.py file to prevent thecopy 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.
Click me to toggle!
This will be hidden until a click!
A standalone toggle button!