Sphinx Design Components#
Cards and tabs provide some extra UI flexibility for your content. Both sphinx-design and sphinx-panels can be used with this theme. This theme provides custom CSS to ensure that their look and feel is consistent with this theme.
See also
For more about how to use these extensions, see the sphinx-design documentation.
Danger
sphinx-panels
is no longer maintained and we recommend you switch to sphinx-design
.
We will deprecate support for sphinx-panels soon.
To use the sphinx-panels
extention, add these lines to your custom CSS to overwrite the shadows of the panels:
/* overwrite panels shadows using pydata-sphinx-theme variable */
.shadow {
box-shadow: 0 0.5rem 1rem var(--pst-color-shadow) !important;
}
This modification is not needed when using the sphinx-design
extention.
Below you can find some examples of the components created with the sphinx-design
extension.
Cards#
Only body.
But with multiple text paragraphs.
Content of the third card.
example
panel 1 header
panel 1 content more content
panel 2 header
panel 2 content
Tabs#
int main(const int argc, const char **argv) {
return 0;
}
def main():
return
class Main {
public static void main(String[] args) {
}
}
function main()
end
PROGRAM main
END PROGRAM main
Dropdowns#
Dropdowns should look similar to admonitions, but clickable. 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 some content and an icon!
A primary title and color
And some content!
A secondary title and color
And some content!