MDX Component Tests
Last updated
10th May 2025
Read time
5 mins
Cover image
This page demonstrates various MDX components and styling options available in the Sway project.
Headings
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Paragraphs
This is a standard paragraph with bold text, italic text, and inline code. You can also add links to your content.
Lists
Unordered Lists
- Item 1
- Item 2
- Item 3
- Nested item 1
- Nested item 2
- Item 4
Ordered Lists
- First item
- Second item
- Third item
- Nested numbered item
- Another nested numbered item
- Fourth item
Tables
Standard Markdown Table (4px padding)
| Issue | Solution | |-------|----------| | Customers still confused about delivery methods | Add more detailed descriptions and visual explanations | | Cart weight calculation issues | Ensure all products have accurate weight information | | Overlapping weight tiers causing conflicts | Set clear priority levels and mutually exclusive weight ranges | | Carrier inconsistency with white glove service | Partner with specialized heavy item delivery services |
Styled Table with Rounded Corners
| Feature | Description | Status |
|---|---|---|
| Rounded Corners | Tables with rounded corners and borders | Implemented |
| Custom Colors | Customizable header and row background colors | Implemented |
| Alternating Rows | Zebra-striped tables with alternating row colors | Implemented |
| Cell Padding | 4px padding in all table cells | Implemented |
Table with Custom Cell Padding
| Padding Size | Description | Tailwind Class |
|---|---|---|
| 2px Padding | Compact cell padding (this table) | p-2 |
| 4px Padding | Default cell padding | p-4 |
| 6px Padding | Larger cell padding | p-6 |
| Custom Padding | Different horizontal and vertical padding | px-4 py-2 |
Table with Large Cell Padding
| Feature | Description |
|---|---|
| Large Padding | This table uses 6px padding (p-6) for all cells |
| Comfortable Reading | More space makes content easier to read for longer text |
Colored Status Table
| Project | Status | Completion |
|---|---|---|
| MDX Components | Complete | 100% |
| Table Styling | Complete | 100% |
| List Components | In Progress | 75% |
| Image Placeholders | Testing | 90% |
Images
Standard Image Placeholder
This is a placeholder for an image that demonstrates the ImagePlaceholder component
Image with Context
Screenshot showing the MDX editor with syntax highlighting
Conclusion
This page demonstrates the various MDX components and styling options available in the Sway project. Use this as a reference when creating content for your guides and help documentation.
Ask in our community
Question not answered? Ask us and other customers in the Sway customer community.
Go to community
Contact support
Message our support team privately to discuss anything specific to your organization
Contact support