sphinx-design#

Sphinx extension for designing beautiful, screen-size responsive web components.

Example#

Badges#

primary secondary success info warning danger muted plain badge

primary-line secondary-line success-line info-line warning-line danger-line muted-line

Buttons#

primary

secondary

success

info

warning

danger

muted

Plain button

primary-outline

secondary-outline

success-outline

info-outline

warning-outline

danger-outline

muted-outline

Tabs#

Content 1

Content 2

Content 3

Content 4

Tabbed code#

a = 1;

const a = 1;

Card#

Card Title

Card content

Header

Card Title

Card content

Footer

Clickable Cards#

Using the link and link-type options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below:

Clickable Card (external)

The entire card can be clicked to navigate to https://example.com.

example.com
Clickable Card (internal)

The entire card can be clicked to navigate to the cards-clickable reference target.

clickable cards