Sphinx design

The sphinx-design extension comes with many visual components. The Awesome Theme detects if you’re using the sphinx-design extension and adds extra styles to make it look nicer in this theme.


Card

This is a regular card.

Card title

This is card content.

This is a card with header and footer.

Card header

Card with header and footer

This is card content.

You can also build a carousel for cards:

Grid

Display things in a grid.

A

B

C

D

Display things in columns.

A

B

C

D

You can display cards in a grid.

Title 1

A

Title 2

B

Tabs

This is a tab.

This is some tab content. We want to render a little more. Ideally with a linebreak to get the full width.

js
console.log("A code block in a tab.")

Short lines should still be full width. They aren’t!

Tabs are often used for code elements. Add the no-header classes to code blocks to make them look better in tabs.

python
print("Hello world from a tab.")
js
console.log("Hello world from a tab.")
ruby
puts 'Hello world from a tab.'

Badges

The sphinx-design extension includes many badges.

plain badge

primary, primary-line

secondary, secondary-line

success, success-line

info, info-line

warning, warning-line

danger, danger-line

light, light-line

dark, dark-line

Buttons

Likewise, there are a few button designs. Note that these are links that look like buttons.

https://example.com

Button text

https://example.com

https://example.com

https://example.com

Inline icons

You can include many inline icons.