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.
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 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 reference¶
- Arguments (optional, markdown)
The
cardcan take a single argument that is the title as a string.- Options
No options for the
cardare required- header (optional, markdown)
- Styled content at the top of the card
- footer (optional, markdown)
- Styled content at the bottom of the card
- link (optional, string)
- If given, clicking the card will direct you to the URL given here.
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!
Synced content for tab 1
Synced content for tab 2
tab-item reference¶
- Arguments (required:
1, string) The
tab-itemrequires a single argument that is the title as a string.Note: thetab-itemtitle is not currently not parsedThe current implementation does not parse the tab title properly, and markup in this field will not be parsed.
- Options
No options for the
tab-itemare 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.
