Web 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 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 cards and tabs created with the sphinx-design extention.

Cards

Content of the first card

Content of the second card

example

third card

Hidden content

Clickable fourth 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