Custom web components reference
This guide covers all the custom web components available for use in documentation pages. Each component includes a description, usage instructions, and a live example to help you implement them effectively. Use these components to enhance your documentation with clear, interactive, and visually distinct content.
Components and Examples
<m-tip> (Tip)
Use this component to highlight helpful tips or best practices that assist users in understanding or using features more effectively.
This is a helpful tip for your users.
<m-note> (Note)
Use for additional context or important but non-critical information that users should be aware of.
This provides additional context about a feature.
<m-warning> (Warning)
Use to alert users about potential issues or cautions that require attention to avoid problems.
Be careful when using this feature in production.
<m-danger> (Danger)
Use for critical warnings about actions that could cause serious problems or data loss.
This action cannot be undone and will delete all data.
<m-info> (Info)
Use to highlight general informational content that should stand out to users.
This feature is available on all plans.
<m-steps> (Steps)
Use for step-by-step guides or tutorials with numbered steps. Each step requires a title attribute to describe the step.
Open the application dashboard.
Navigate to the settings panel.
Configure your preferences and save changes.
<m-accordiongroup> (Accordion)
Use for expandable/collapsible sections, ideal for FAQs or optional details. Each accordion item requires a title attribute.
This feature allows you to customize your user experience by adjusting settings and preferences.
Access the feature through the settings menu and follow the on-screen instructions to make changes.
<m-tabs> (Tabs)
Use to show alternative content such as code examples in different languages or different approaches. Each tab requires a label attribute.
console.log('Hello, world!');print('Hello, world!')<m-cardgroup> (Card Group)
Use a grid of linked cards for navigation, feature highlights, or related content links. Cards display horizontally in a grid. Each card should have a title and optionally an href attribute.
Learn how to set up and configure the platform.
Complete API documentation and examples.
Frequently asked questions and troubleshooting tips.
<m-frame> (Frame)
Use a bordered frame to highlight screenshots, diagrams, or important visual content.
Use these components consistently to improve readability and user engagement in your documentation.