Provides a collection of responsive web components for Sphinx documentation. Includes cards, grids, buttons, badges, and other UI elements that work across different screen sizes.

Available components

• Cards: Create card layouts with headers, bodies, and footers
• Grids: Responsive grid layouts for organizing content
• Buttons: Styled buttons with different variants and links
• Badges: Small labels and status indicators
• Icons: Material Design and FontAwesome icon support
• Dropdowns: Collapsible content sections
• Tabs: Alternative to sphinx-tabs with more styling options

Example usage

Cards:

.. card:: Card Title
   :img-top: image.png
   :link: https://example.com

   Card body content goes here.

Grid layout:

.. grid:: 2

   .. grid-item::

      Left column content

   .. grid-item::

      Right column content

CSS framework

Built on top of Bootstrap 5 CSS classes, providing consistent styling and responsive behavior. Works with most Sphinx themes but looks best with themes that don’t conflict with Bootstrap styling.

Configuration

# conf.py
extensions = ['sphinx_design']

# Optional: configure theme
sd_fontawesome_latex = True  # Enable FontAwesome in LaTeX