Ferris Knowledge Engineering
DE
99
Module 99 · 3 min

MDX Components Demo

Demonstration of enhanced MDX components for learning modules

demo components

MDX Components Demo

This page demonstrates all the enhanced MDX components available in learning modules.

Callout Components

Info Callout

Information

This is an informational callout. Use it to highlight general information or key concepts that readers should be aware of.

Warning Callout

Important Warning

This is a warning callout. Use it to alert readers about potential issues, common mistakes, or things to be cautious about.

  • Point one to be careful about
  • Point two that needs attention
  • Point three with consequences

Success Callout

Success Story

This is a success callout. Perfect for highlighting positive outcomes, best practices, or achievements.

Example: Company X reduced processing time by 70% using this approach.

Danger Callout

Critical Warning

This is a danger callout. Use it for critical warnings, security issues, or things that could cause serious problems.

Tip Callout

Pro Tip

This is a tip callout. Great for sharing insider knowledge, shortcuts, or helpful suggestions that improve the reader’s experience.

Accordion Components

Basic Accordion

What is Knowledge Engineering?

Knowledge Engineering is the process of capturing, structuring, and making expert knowledge accessible to AI systems and human users. It bridges the gap between human expertise and machine understanding.

Key aspects include:

  • Knowledge elicitation from experts
  • Structuring unstructured information
  • Creating knowledge representations
  • Validating and maintaining knowledge bases

Multiple Accordions

Data Structure Dimension

The Data Structure dimension measures how structured your data is:

  • Structured (0): SQL databases, APIs with schemas
  • Semi-structured (1): Excel, JSON, XML
  • Unstructured (2): Documents, emails, conversations
Knowledge Type Dimension

The Knowledge Type dimension captures the nature of expertise:

  • Explicit (0): Rules, procedures, documentation
  • Implicit (1): Best practices, heuristics
  • Tacit (2): Intuition, experience-based judgment
Data Provenance Dimension

The Data Provenance dimension tracks information sources:

  • Internal (0): Company databases, internal systems
  • Partner (1): Supplier data, partner APIs
  • External (2): Public data, regulatory databases

This accordion is open by default using defaultOpen={true}.

Enhanced Lists

Unordered Lists

The enhanced styling includes gradient bullet points:

  • First item with important information
  • Second item explaining key concepts
  • Third item with additional details
    • Nested item showing hierarchy
    • Another nested item
  • Fourth item wrapping up the section

Ordered Lists

Numbered lists have colored markers:

  1. Start with data assessment
  2. Identify knowledge gaps
  3. Design extraction methods
  4. Implement and validate
  5. Monitor and iterate

Code Examples

Inline Code

Use inline code to highlight technical terms, variables like data_structure, or commands like npm install.

Code Blocks

Standard code blocks are automatically styled:

questions:
  - id: use-case-type
    type: single-choice
    category: use-case
    options:
      - value: 1
        label_en: Standardized process
        weight:
          data_structure: 0
          knowledge_type: 0

Enhanced Code Block with Title

TypeScript Configuration typescript 
interface AssessmentQuestion {
  id: string;
  type: 'single-choice' | 'multi-choice' | 'scale';
  category: string;
  question_en: string;
  options: QuestionOption[];
}

Text Formatting

Regular paragraphs have enhanced readability with proper line height and spacing. Bold text stands out with darker color, and italic text provides emphasis.

Blockquotes

“The goal is not to replace human expertise, but to make it accessible, scalable, and consistent.”

— Knowledge Engineering Principle

Links are styled with the Ferris brand colors: Learn more about knowledge engineering or Take the assessment.

Horizontal Rules

Horizontal rules create visual separation with gradient styling:

Combining Components

You can combine components for rich content:

Advanced Implementation Strategy
Start Here

Before diving into implementation, assess your current data landscape using our framework.

Follow these steps:

  1. Assess: Evaluate data structure, sources, and knowledge types
  2. Plan: Design extraction methods based on assessment results
  3. Prototype: Build a minimal viable system
  4. Validate: Test with real users and data
  5. Scale: Expand based on learnings

Don’t skip the validation phase. Early feedback prevents costly mistakes later.

Diagrams

Mermaid diagrams are styled with Ferris brand colors:

graph TD
  A[Knowledge Source] --> B[Data Type Check]
  B -->|Structured| C[Database Query]
  B -->|Semi-Structured| D[Parser & Transform]
  B -->|Unstructured| E[AI Extraction]
  C --> F[Knowledge Base]
  D --> F
  E --> F
  F --> G[AI Agent]

Summary

These enhanced components make learning modules more engaging, scannable, and visually appealing while maintaining the Ferris brand identity with red (#dc2626) and orange (#f97316) accents.

Previous Module
Learning and Measurement

Ready to Get Started?

Take our assessment to find the right knowledge engineering approach for your organization.

Start Assessment