Blogging on CloudCannon supports Snippets: rich interactive components beyond standard markdown. These MDX components enable sophisticated layouts, embedded functionality, and enhanced user engagement without requiring custom development for each post.
This post demonstrates a range of sample Snippets, including placeholder text for each one. You can also make your own Snippets using MDX components.
- CTA Center
- CTA Form
- CTA Split
- Embed
- FAQ Section
- Feature Grid
- Feature Slider
- Feature Split
- Form
- Image
- Table
- Testimonial Section
- Video
CTA Center
The CTA Center Snippet creates a visually distinct call-to-action block within your content, with a range of color, background, and presentation options.
Optional label displayed above the CTA Center heading.
Main heading text for the CTA Center section.
Optional subtext displayed beneath the CTA Center heading.
CTA Form
The CTA Form Snippet embeds a lead capture form directly in your body content. Use when you want readers to request specific information related to the post topic.
Optional label displayed above the CTA Form heading.
Main heading text for the CTA Form section.
Optional subtext displayed beneath the CTA Form heading.
CTA Split
The CTA Split Snippet presents two distinct options side-by-side, like the Feature Split Snippet. (Note that you might choose to create very similar Snippets with different names, just to make things easier for your editors.)
Headline for the CTA Split
Supporting copy beneath the headline.
Embed
The Embed Snippet allows inserting external content — videos, dashboards, interactive demos — directly into posts via raw HTML.
FAQ Section
The FAQ Section Snippet presents common questions in an expandable accordion format, with options for accordion open behavior, color scheme, and background color.
Main heading text for the FAQ section.
Question text 1
Answer text goes here.
Question text 2
Answer text goes here.
Question text 3
Answer text goes here.
Feature Grid
The Feature Grid Snippet displays multiple related cards in a structured layout, displaying features or pricing options. Set these cards to custom widths and heights within a grid.
Optional label displayed above the Feature Grid heading.
Main heading text for the Feature Grid section.
Optional subtext displayed beneath the Feature Grid heading.
Eyebrow placeholder
Feature title
Feature description placeholder text that will be replaced with actual content. This placeholder text is slightly longer, because this card is set to take up two rows in the grid rather than one.
Eyebrow placeholder
Feature title
Feature description placeholder text that will be replaced with actual content.
Pricing heading
$ 1 /mo
Optional subtext displayed beneath the heading.
Eyebrow placeholder
Feature title
Feature description placeholder text that will be replaced with actual content.
Feature Slider
The Feature Slider Snippet presents features in an interactive carousel format. Use for sequential features or when space is limited.
Feature Split
The Feature Split Snippet presents a single heading and text area side-by-side with an image, with the option to choose which appears first.
Optional eyebrow text displayed above the heading
Main heading for the split section
Supporting body copy beneath the heading.
Form
The standalone Form Snippet creates custom forms, ready to connect to CloudCannon Forms.
Image
The enhanced image Snippet provides more control than standard markdown images, including the option to round corners, set aspect ratio, and horizontal / vertical layout options.
Table
The enhanced table Snippet provides a styled table, with column headers, section labels for groups of rows, and all the rows and columns you can fit onto your page.
Optional label displayed above the table's heading.
Table heading
Optional subtext displayed beneath the table's heading.
| Header One | Header Two | Header Three | |
|---|---|---|---|
| Section One | Cell one | Cell two | Cell three |
| Cell one | Cell two | Cell three | |
| Section Two | Cell one | Cell two | Cell three |
| Cell one | Cell two | Cell three | |
| Section Three | Cell one | Cell two | Cell three |
Testimonial Section
The Testimonial Section Snippet displays quotes with attribution, with standardised options for color scheme and background color.
Testimonial sections are my favorite way to build trust, and validate sales claims across my marketing channels.
Video
The Video Snippet embeds video content from externally hosted sources (Vimeo, YouTube) or from locally hosted files.