Components Guide
Interactive components available in the documentation
Components Guide
This page showcases all the interactive components available for use in the Propriotec documentation. Use these to make your docs more engaging and easier to navigate.
Callouts
Use callouts to highlight important information:
This is an info callout - use for helpful tips and general information.
This is a warning callout - use for important warnings or cautions.
This is an error callout - use for critical information or errors to avoid.
Tabs
Perfect for showing different options or configurations:
Content for Option A goes here. This is useful for showing different configurations, code examples, or approaches.
Content for Option B. Tabs maintain state as users navigate, so they'll remember which tab was selected.
Content for Option C. Great for comparing different approaches side-by-side.
Accordions
Accordions are perfect for FAQs, glossaries, or collapsible content:
Steps
Use steps for sequential processes or tutorials:
First Step
Start by doing this. Steps are numbered automatically and provide a clear visual progression through a process.
Second Step
Then do this. Each step can contain any markdown content including code blocks, images, and lists.
Third Step
Finally, complete the process. Steps are great for setup guides, configuration processes, and tutorials.
Files Component
Display file and folder structures:
Cards
Cards are great for linking to different sections or features:
Feature One
Description of the first feature or section
Feature Two
Description of the second feature or section
Feature Three
Description of the third feature or section
Code Blocks
Code blocks with syntax highlighting:
interface User {
id: string;
name: string;
email: string;
role: 'admin' | 'trader';
}
function getUser(id: string): Promise<User> {
return fetch(`/api/users/${id}`)
.then(res => res.json());
}