sphinx-design

sphinx-design extension add many components for Sphinx documentation.

Install

pip install sphinx-design

Then, add the extension to your conf.py:

conf.py
extensions = [
    # ...
    "sphinx_design",
]

Examples

Single card

A simple card:

Card Title

Card content

A full featured card:

Header

Card Title

Card content

Card with header:

Header

Card Title

Card content

Card with footer:

Card Title

Card content

Grid items

A

B

C

Grid cards

Tutorial

If you’re new to Python and Sphinx, this is a great place to start.

/install/
Customisation

Tailor configurations to meet your specific requirements with customizable settings.

/customisation/
References

Learn the syntax of reStructuredText and examine how it is formatted.

/writing/
Contributing

Your contributions can make a meaningful impact and help drive the project forward!

/contributing/

Nesting grids

Item 1.1

Multi-line

content

Item 1.2

Content

Item 2.1

Content

Item 2.2

Content

Item 2.3

Content

Tabs

Directive tab-set:

Content 1

Content 2

Directive tab-set-code:

foo = "str"
a = 1;

Directive tab-set with code-block:

a.py
foo = "str"
b.js
a = 1;

Badges

plain badge

primary primary-line

secondary secondary-line

success success-line

info info-line

warning warning-line

danger danger-line

light light-line

muted muted-line

dark dark-line

black black-line

white white-line

https://example.com

explicit title

Buttons

https://example.com

Button text

https://example.com

https://example.com

https://example.com

Octicon Icons

  • alert:

  • bell:

  • book:

  • clock:

Article Info

Executable Books

Jul 24, 2021

5 min read

Only with Shibuya

By adding a class of surface, a card would be rendered:

.. grid:: 1 1 2 3
    :class-row: surface
Beautiful Design

A visually stunning and modern design that makes your documentation look professional and appealing.

Responsive Layout

Look great on all devices, from desktops to smartphones, without compromising on readability or functionality.

Light/Dark Mode

Users can switch between light and dark modes according to their preference.

Customizable Colors

Customize the colors to match your brand or personal preferences with radix colors.

/customisation/colors/
Jupyter Integration

Great CSS/UI for lots of Jupyter related extensions, enhance your AI documentation.

/extensions/nbsphinx/
Multiple Layouts

Layouts of landing page, simple one page, and three-column documentation page.

/writing/meta/#layout