Shibuya
sphinx-design¶
sphinx-design extension add many components for Sphinx documentation.
Documentation: https://sphinx-design.readthedocs.io/
Source Code: https://github.com/executablebooks/sphinx-design
Install¶
pip install sphinx-design
Then, add the extension to your conf.py:
extensions = [
# ...
"sphinx_design",
]
Examples¶
Single card¶
A simple card:
Card content
A full featured card:
Header
Card content
Card with header:
Header
Card content
Card with footer:
Card content
Grid items¶
A
B
C
Grid cards¶
Nesting grids¶
Multi-line
content
Content
Content
Content
Content
Dropdown¶
Dropdown title
Dropdown content
Tabs¶
Directive tab-set:
Content 1
Content 2
Directive tab-set-code:
foo = "str"
a = 1;
Directive tab-set with code-block:
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
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
A visually stunning and modern design that makes your documentation look professional and appealing.
Look great on all devices, from desktops to smartphones, without compromising on readability or functionality.
Users can switch between light and dark modes according to their preference.