Skip to main content

Content Blocks Showcase

Explore all available content block components for structuring and highlighting information in your documentation.

🎯 Admonitions / Callout Boxes​

Standard Admonitions​

note

Note: General information that users should be aware of. Supports full markdown with inline code and links.

tip

Tip: Helpful suggestions and best practices for optimal usage.

info

Information: Additional context and supplementary details about features.

warning

Warning: Important cautions that require user attention.

danger

Danger: Critical alerts for potentially destructive operations.

Custom Titles and Nesting​

Custom Title Here

You can customize the title of any admonition by adding text in square brackets.

Pro BigSis Tip 💙

Nested admonitions are possible for complex information hierarchies:

Nested Info

This is a nested information block inside a tip.

:::

MDX Component Style​

💡Did you know?

You can also use the Admonition component directly in MDX for more control over styling and content.

🚀Proper Labs Innovation

Our BX→AX→PX framework transforms traditional development into Web3-powered experiences.

🎨 Details/Summary Blocks​

Click to expand basic details

This is hidden content that appears when clicked. Perfect for:

  • FAQ sections
  • Advanced configuration options
  • Additional context without cluttering the main content
🔧 Advanced Configuration Options
// Configuration example
export default {
  theme: 'zen-plus',
  colors: {
    primary: '#00A1F1', // BigSis Blue
    secondary: '#FE5F00', // Bro Orange
    accent: '#7E3AF2', // LilSis Purple
    success: '#3EB85F' // CBO Green
  }
};

📝 Quote Blocks​

"The future of Web3 development lies in the seamless integration of AI and blockchain technologies."

— Proper Labs Vision

Multi-line Quote Example:

Building the bridge between traditional development and decentralized innovation requires more than just technical expertise—it demands vision, creativity, and a commitment to transforming how we build software.

🃏 Card Components​

Feature Card​

BX Framework

Build Experience focuses on creating robust, scalable foundations for Web3 applications.

Learn More →

Feature Card​

AX Framework

Adoption Experience ensures seamless user onboarding and intuitive interactions.

Learn More →

Feature Card​

PX Framework

Profit Experience maximizes value creation and sustainable growth.

Learn More →

📊 Info Boxes with Icons​

💡

Innovation
Pushing boundaries with AI-powered Web3 solutions

🚀

Performance
Optimized for speed and scalability

🔐

Security
Enterprise-grade protection for Web3 assets

🌍

Global Reach
Borderless solutions for worldwide adoption

🎯 Hero Sections​

Welcome to Proper Labs

Building the Future of Web3 + AI​

Transform your ideas into decentralized reality with our comprehensive framework and cutting-edge tools.

📋 Lists with Custom Styling​

✅ Feature Checklist​

✅ Completed: User authentication system ✅ Completed: Smart contract integration 🚧 In Progress: AI model deployment 📅 Planned: Multi-chain support 📅 Planned: Advanced analytics dashboard

🎯 Numbered Process Steps​

1 Initialize Project - Set up your development environment

2 Configure Framework - Apply BX→AX→PX methodology

3 Deploy & Scale - Launch your Web3 application

🏷️ Badge Components​

BetaStableExperimentalDeprecated

📑 Table Layouts​

ComponentStatusZEN+ SupportUsage
Admonitions✅ StableFullHigh
Cards✅ StableFullHigh
Details✅ StableFullMedium
Quotes✅ StablePartialLow
Heroes🚧 BetaFullMedium
Badges✅ StableFullHigh
Usage Tips
  • Use admonitions for important callouts and warnings
  • Implement cards for feature showcases and navigation
  • Add details/summary for collapsible content
  • Style quotes for testimonials and key statements
  • Design hero sections for landing pages
  • Apply badges for status indicators