| sd_hide_title | true |
|---|
(index)=
::::::{div} landing-title :style: "padding: 0.6rem 0.1rem 0.1rem 0; background-image: linear-gradient(315deg, #992d3b 0%, #303545 84%); clip-path: polygon(0px 0px, 100% 0%, 100% calc(100% - 1.5rem), 0% 100%); -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% calc(100% - 1.5rem), 0% 100%);"
::::{grid} :reverse: :gutter: 2 3 3 3 :margin: 4 4 1 2
:::{grid-item} :columns: 12 4 4 4 :::
:::{grid-item} :columns: 12 8 8 8 :child-align: justify :class: sd-text-white sd-fs-3
A collection of composite web elements based on 
:ref-type: doc
:outline:
:color: white
:class: sd-px-4 sd-fs-5
Get Started
::: ::::
::::::
Building upon sphinx{design} and Flexbox : sphinx-design is a Sphinx extension for designing beautiful, screen-size responsive web-components. It is inspired by the Bootstrap, Material Design, and Material-UI design frameworks, and uses CSS Flexible Box Layout, commonly known as Flexbox. It is the foundation for all composite elements in this collection.
Works with both reStructuredText (rST) and Markedly Structured Text (MyST) : Either write documentation using the venerable reStructuredText, or use the new extended Markdown/CommonMark syntax Markedly Structured Text. Both are supported equally well.
Less markup : You can do everything what sphinx-design can do, but with less markup code, so you can better focus on content instead of design and style details.
Sandbox and incubator : sphinx-design-elements intends to provide a sandbox and incubation environment for all details currently beyond the scope of sphinx-design, and is very open to receive further contributions in the same area.
:hidden:
README <readme>
get_started
:caption: Directives
:hidden:
gridtable
infocard
shield
linktree
:caption: Roles
:hidden:
hyper
tag
:caption: Styling
:hidden:
css_classes
dropdown-group
:caption: Development
:hidden:
project
changes
sandbox
::::{grid} 1 2 2 3 :margin: 4 4 0 0 :gutter: 1
:::{grid-item-card} {octicon}table Grid table
:link: gridtable
:link-type: doc
HTML table based on a grid layout, with ergonomic top-down configuration. :::
:::{grid-item-card} {octicon}note Info card
:link: infocard
:link-type: doc
Composite info card container element, to be used as a grid item. :::
:::{grid-item-card} {octicon}shield Shield
:link: shield
:link-type: doc
Badge generator for Shields.io, with optional target linking. :::
:::{grid-item-card} {octicon}shield Hyper
:link: hyper
:link-type: doc
A versatile hyperlink generator. :::
:::{grid-item-card} {octicon}workflow Link tree
:link: linktree
:link-type: doc
A programmable toctree component. :::
:::{grid-item-card} {octicon}tag Special badges
:link: tag
:link-type: doc
Special {tags}tag-like, badges and other components.
:::
::::
Kudos to Chris Sewell and all contributors for conceiving and maintaining MyST Parser and sphinx-design.