Content component showcase¶

This page renders theme-native directives and commonly used Sphinx content with sphinx-fuma.

Theme directives¶

Steps¶

The steps directive turns its child headings into a numbered walkthrough.

Install the package

Add sphinx-fuma to the documentation environment.

Select the theme

Set html_theme = "fuma" in conf.py.

Build the site

Run the normal Sphinx HTML builder.

```{steps}
### Install the package

Add sphinx-fuma to the documentation environment.

### Select the theme

Set `html_theme = "fuma"` in `conf.py`.

### Build the site

Run the normal Sphinx HTML builder.
```

File trees¶

The files directive turns a nested list into a compact project tree. A trailing slash or child list marks a folder.

docs

conf.py

index.md

src

example

init.py

pyproject.toml

```{files}
- docs/
  - conf.py
  - index.md
- src/
  - example/
    - __init__.py
- pyproject.toml
```

Admonitions¶

Note

Notes use the neutral informational treatment.

Tip

Tips and important messages use the positive accent treatment.

Warning

Warnings, cautions, and attention messages use the warning treatment.

Danger

Danger and error messages use the destructive treatment.

Code¶

Inline code such as html_theme = "fuma" uses the monospace font. Press / or Cmd/Ctrl+K to open search.

html_theme_options = {
    "layout": "docs",
    "toc_style": "clerk",
    "color_preset": "amber",
}

-html_theme = "alabaster"
+html_theme = "fuma"

Tables and quotations¶

Feature	Behavior
Sidebar	Collapsible on desktop and overlaid on small screens
Page contents	Tracks visible headings while scrolling
Search	Loads a local sphinx-searchlite index
Color mode	Follows system preference and stores explicit choices

Documentation should make the structure of a project visible without getting in the reader’s way.

Cards¶

Sphinx Design cards inherit the theme’s border, surface, and radius tokens. Install and enable sphinx-design to use its directives outside Yardang.

Responsive layout

The sidebar, header, and table of contents adapt across screen sizes.

Local search

The search dialog uses a static index and requires no hosted service.

Color modes

Light and dark palettes follow system preference and reader choice.

Structured navigation

Page icons, section tabs, breadcrumbs, and pagination keep large sites navigable.

Tabs¶

Sphinx Design tab sets use a compact framed treatment.

pip

pip install sphinx-fuma

conda

conda install -c conda-forge sphinx-fuma

Lists and links¶

Ordered and unordered lists use the content column’s rhythm:

Configure Sphinx.
Write documentation.
Build HTML.

Browse the theme option reference.
Review the generated Python API reference.
Open the search dialog with /.