Skip to article content

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 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.

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.

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