Component Showcase: Using MDX in Your Blog

This guide demonstrates all the custom components available for your blog posts using MDX.

Basic Text Formatting

You can write normal paragraphs with bold and italic text. Links work too - visit our homepage or external sites.

Lists

Unordered lists:

First item
Second item
Third item with nested content
- Sub-item 1
- Sub-item 2

Ordered lists:

First step
Second step
Third step

Blockquotes

This is a blockquote. Use it to highlight important information or quotes from other sources.

You can have multiple paragraphs in blockquotes.

Alert Components

Info/Tip Alert

Here's a useful tip about using our components. Tips are great for providing additional context or helpful information.

Warning Alert

Be careful with this feature. Warnings help highlight potential issues or important considerations.

Success Alert

Operation completed successfully! Use success alerts to confirm positive outcomes.

Error Alert

Something went wrong. Error alerts help communicate problems or critical warnings.

Code Blocks

Simple inline code: const greeting = "Hello, world!";

Code block with syntax highlighting:

javascript

// This is a JavaScript code block
function calculateTotal(items) {
  return items
    .filter(item => item.inStock)
    .reduce((total, item) => total + item.price, 0);
}

Custom Card Component

This card component is perfect for highlighting special content or features. You can include any markdown content inside the card.

Lists work
Bold and italic too
Even code: console.log('hello')

Call to Action Component

Ready to start your digital transformation journey?

Code Block with Title

interface BlogPost { title: string; date: string; content: string; }

function formatDate(date: string): string {
return new Date(date).toLocaleDateString();
}

Best Practices

Use alerts sparingly to maintain their impact
Keep code blocks focused and well-commented
Break up long content with headings and cards
Use call-to-actions strategically

Remember to preview your post before publishing to ensure all components render correctly.

Next Steps

Now that you're familiar with our MDX components, you can:

Start writing your own blog posts
Experiment with different component combinations
Create engaging, interactive content

Check out our other blog posts for inspiration