Sphinx design $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#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 $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#card" x-intersect.margin.0%.0%.-70%.0%="activeSection = '#card'">
This is a regular card.
This is card content.
This is a card with header and footer.
Card header
This is card content.
You can also build a carousel for cards:
content
Longer
content
Grid $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#grid" x-intersect.margin.0%.0%.-70%.0%="activeSection = '#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.
A
B
Dropdown $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#dropdown" x-intersect.margin.0%.0%.-70%.0%="activeSection = '#dropdown'">
This is a dropdown.
Expand to learn more
This is dropdown content.
Tabs $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#tabs" x-intersect.margin.0%.0%.-70%.0%="activeSection = '#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.
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.
print("Hello world from a tab.")
console.log("Hello world from a tab.")
puts 'Hello world from a tab.'
Badges $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#badges" x-intersect.margin.0%.0%.-70%.0%="activeSection = '#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
Inline icons $el.setAttribute('data-tooltip', 'Copy link to this element'), 2000)" aria-label="Copy link to this element" class="headerlink" data-tooltip="Copy link to this element" href="#inline-icons" x-intersect.margin.0%.0%.-70%.0%="activeSection = '#inline-icons'">
You can include many inline icons.
See also