Components

This section collects the pages of specific Docara components and supported constructs. If you first want to understand the difference between Markdown, inline blocks, containers, the Framework and project-owned extensions, open the component model.

Text and Markdown

These constructs are plain Markdown without components. They are all described on one page, Markdown.

Construct	Purpose
Headings and text	Headings, paragraphs and text emphasis in plain Markdown
Links and images	Links to pages and sites, images with alternative text for accessibility
Lists and quotes	Bulleted and numbered lists and quotes
Checklists and definitions	Tasks with checkboxes and terms with definitions
Footnotes and sources	Numbered footnotes and a list of sources at the bottom of the page
Table	A Markdown table; on a narrow screen it scrolls inside itself

Content blocks

Component	Purpose
Alert	A note, tip or warning next to the text
Banner	A short announcement that applies to the whole page
Details	An extra explanation that the reader opens on demand
Interactive example	A live result next to its source code
Steps	A numbered instruction of several steps
Tabs	Several equivalent options, for example for different systems
File tree	The structure of the project’s folders and files
Backlinks	A list of the site’s pages that link to the current one

Code and data

Component	Purpose
Code	A code block with highlighting, copying and line wrapping
Code from a file	A fragment of a project file that updates together with the file
Diagram	A Mermaid diagram stored next to the text
Diagram gallery	All 22 Mermaid diagram types with a live result and the source
Math formula	A formula written in TeX
Isolated HTML	Checked HTML markup in a separate frame
Component reference	Attributes, events, methods and CSS variables from the component manifest

Layout

Component	Purpose
Card	A short self-contained block with a heading
Grid	Several cards in a row that stack into a column on a phone
Surface	A styled full-width band around part of the page
Hero	The start of a landing page: heading, description, actions and an image
Background effects	An animation under the hero text instead of an image
Landing blocks	Feature cards, a result showcase, columns and a call to action

Media

Component	Purpose
Figure	An image with a caption and a set aspect ratio
Text with an image	A short explanation next to an image
Embed	A video, map or external page shown with the reader’s consent
Download	A downloadable file with its format, size and checksum
Logos and members	A row of partner, product or member logos

Inline and actions

Component	Purpose
Badge	A short status or version label inside the text
Button link	A link styled as a button
Icon	A Material Symbols icon inside the text and the list of all 3926 icons
Keyboard input	A key or a key combination

SIMAI Framework

Component	Purpose
SIMAI Framework ui.* components	The `ui.button` button, the `ui.alert` alert and other Framework elements with parameter checks

Each component link leads to a separate page with the result, syntax, parameters, accessibility and limitations. The catalogue contains only real pages of components and supported Markdown constructs.