Interactive Components
Knowledge Core provides various components for interactive content.
Callouts
Callouts highlight important information:
Information
This is an info callout for general notes.
Success
Shows positive confirmations or completed steps.
Warning
Important warnings that users should note.
Error
Critical information or common errors.
Tabs
Tabs are great for alternative views or multi-platform instructions:
Option A
This is the content for Option A. Here you can:
- Write text
- Show code examples
- Use more components
Option B
Different content for Option B.
const example = "Code example in Tab B";
console.log(example);Option C
You can even nest callouts inside tabs!
Code Blocks
Syntax-highlighted code with different languages:
JavaScript:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));TypeScript:
interface User {
name: string;
age: number;
}
const user: User = {
name: 'Alice',
age: 30
};Python:
def greet(name):
return f"Hello, {name}!"
print(greet("World"))Exercises
Try it yourself
Create your own lesson in apps/courses/src/content/lessons/:
- Copy this file
- Change the frontmatter (title, slug, etc.)
- Customize the content
- Test with
pnpm dev:courses
Hints
Summary
You learned:
- How callouts represent different information types
- How tabs show alternative content
- How code examples are embedded
- How exercises and hints work
Ready for the next lesson? There you’ll learn about quizzes!