Dropdowns, Grids, Tabs and Cards

Dropdowns¶

Dropdowns can be used to toggle content and show it only when a user clicks on the header panel. These use the standard HTML <details> element, meaning they also will work without Javascript. The dropdown can have a title, as the directive argument, and the open option can be used to initialise the dropdown in the open state.

Cards¶

Cards provide an easy way for you to content into a standard “header”, “body”, “footer” structure that has a similar alignment and visual style. It is useful for creating galleries or high-visibility collections of links and information. For example, a card with a header, title, body, and footer:

You can also add a link option to the card, which will allow you to make the entire card clickable:

Compatibility with Sphinx design

In the Sphinx design project card headers and footers take a special syntax:

A card title: The argument given to the directive.
A card header: Any content that precedes a line with ^^^.
A card footer: Any content that comes after a line with +++.
A card body: Any content that comes in between ^^^ and +++.

This syntax is supported in mystmd, for example:

:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::

Note that, card headers and footers are optional. If you don’t include ^^^ or +++ in your card, they will not show up.

`card` directive¶

Alias: grid-item-card

Directive Argument (parsed)

The title of the card, usually shown as bolded text at the top of the card.

Directive Body (parsed, required)

Main body content of the card.

Options

url (string): Turns the card into a link, can be internal or external.; Alias: link
header (parsed): Adds a header to the card.
footer (parsed): Adds a footer to the card.

Buttons¶

A button is an element with text content that triggers an action to navigate to an internal or external reference upon a user click. Use the {button} role followed by the text content and target path to create a button.

`button` role¶

Button element with an action to navigate to internal or external links.

Grids¶

Grids allow you to structure arbitrary chunks of content in a grid-like system.

To generate a grid, use the ```{grid} wrapper directive along with ```{card} directives inside.

The numbers supplied in the argument are column counts to be used on different screen sizes e.g. 1 1 2 3 corresponding to smallest (<768px), medium (768px – 1024px), large (1024px – 1280px), and extra-large screens (>1280px). These pixel widths are determined by the theme (e.g. the book theme), which uses the default Tailwind CSS breakpoints.

For example:

`grid` directive¶

Directive Argument (string)

No description

Directive Body (parsed, required)

No description

Options

class (string): Annotate the grid with a set of space-delimited class names.
label (string): Label the grid to be cross-referenced or explicitly linked to.; Alias: name
enumerated (boolean): Turn on/off the numbering for the specific grid; Alias: numbered
enumerator (string): Explicitly set the grid number; Alias: number

Tabs¶

You can also produce tabbed content. This allows you to display a variety of tabbed content blocks that users can click on.

If you have multiple tabs with the same name, they will be synced!

Tab 1

Tab 2

Synced content for tab 1

`tab-set` directive¶

Alias: tabSet

Directive Body (parsed)

No description

Options

class (string): Annotate the tab-set with a set of space-delimited class names.
label (string): Label the tab-set to be cross-referenced or explicitly linked to.; Alias: name
enumerated (boolean): Turn on/off the numbering for the specific tab-set; Alias: numbered
enumerator (string): Explicitly set the tab-set number; Alias: number

`tab-item` directive¶

Alias: tabItem, tab

Directive Argument (string)

No description

Directive Body (parsed)

No description

Options

class (string): Annotate the tab-item with a set of space-delimited class names.
label (string): Label the tab-item to be cross-referenced or explicitly linked to.; Alias: name
enumerated (boolean): Turn on/off the numbering for the specific tab-item; Alias: numbered
enumerator (string): Explicitly set the tab-item number; Alias: number
sync (string): No description
selected (boolean): No description