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.

Use "Admonition Dropdowns" for style!

You can also hide the body of your admonition blocks so that users must click a button to reveal their content. This is helpful if you’d like to include some text that isn’t immediately visible to the user.

To turn an admonition into a dropdown, add the option :class: dropdown to them. See Admonition Dropdown for more information.

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 argument to the card, which will allow you to make the entire card clickable.

Clickable Card

The entire card can be clicked to navigate to mystmd.org.

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 reference

Arguments (optional, markdown)

The card can take a single argument that is the title as a string.

Options

No options for the card are required

header (optional, markdown)
Styled content at the top of the card
footer (optional, markdown)
Styled content at the bottom of the card

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 extra-small (<576px), small (768px), medium (992px) and large screens (>1200px).

For example:

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-item reference

Arguments (required: 1, string)

The tab-item requires a single argument that is the title as a string.

Note: the tab-item title is not currently not parsed

The current implementation does not parse the tab title properly, and markup in this field will not be parsed.

Options

No options for the tab-item are required

sync (optional, string)
A key that is used to sync the selected tab across multiple tab-sets.
selected (flag, no-value)
a flag indicating whether the tab should be selected by default.
MyST MarkdownMyST Markdown
Community-driven tools for the future of technical communication and publication