# Sample Widgets
Author: Sai Krishna
Author URL: https://superblog.ai/blog/author/sai-krishna/
Published: 2026-08-27
URL: https://superblog.ai/blog/sample-widgets/

Widgets are powerful content blocks that help you create rich, engaging blog posts. Access them by typing `/` on a new line to open the widget menu, and start typing to find one to use.

You can see all the widgets available, how to use them, and actually see each of them embedded in the page.

* * *

## Image

Add images to your posts from multiple sources - upload from your device, search Unsplash's library of free photos, or use images from your media library.

![Screenshot 2026-01-01 at 7.54.46 AM.png](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/screenshot-2026-01-01-at-7-1767254095938-compressed.png)Shot by the founder of Superblog

### **How to add an** image **:**

- Type `/image` and press Enter

- Or drag and drop an image directly into the editor

- Or paste an image from your clipboard


### **Image** sources **:**

- **Upload** \- Select images from your device (supports JPG, PNG, GIF, WebP)

- **Unsplash** \- Search millions of free, high-quality photos

- **My Media** \- Choose from images you've previously uploaded


**Note:**

- Add alt text for accessibility and SEO (required)

- Images are automatically optimized for web delivery


> 📸 **Tip:** Always add descriptive alt text to your images. It helps with SEO and makes your content accessible to readers using screen readers.

* * *

## Image Gallery

Display multiple images in a beautiful, responsive layout. Perfect for showcasing a collection of photos, product images, or visual stories.

![aerial view photography of body of water across green mountains](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/photo-1531168556467-80aace0d0144-1779007369542-compressed.photo-1531168556467-80aace0d0144?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3OTAzOTJ8MHwxfHNlYXJjaHwxfHxpY2VsYW5kfGVufDB8fHx8MTc2NzE1ODk0MXww&ixlib=rb-4.1.0&q=80&w=1080)Photo by Jonny Auh on Unsplash![field and mountain near body of water](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/photo-1519092437326-bfd121eb53ae-1779007367864-compressed.photo-1519092437326-bfd121eb53ae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3OTAzOTJ8MHwxfHNlYXJjaHw1fHxpY2VsYW5kfGVufDB8fHx8MTc2NzE1ODk0MXww&ixlib=rb-4.1.0&q=80&w=1080)Photo by Josh Reid on Unsplash![glacier near body of water](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/photo-1473654729523-203e25dfda10-1779007367576-compressed.photo-1473654729523-203e25dfda10?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3OTAzOTJ8MHwxfHNlYXJjaHw2fHxpY2VsYW5kfGVufDB8fHx8MTc2NzE1ODk0MXww&ixlib=rb-4.1.0&q=80&w=1080)Photo by Emma Francis on Unsplash

![aerial photography of waterfalls near mountains at daytime](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/photo-1513883524931-aaab83bcb19b-1779007371621-compressed.photo-1513883524931-aaab83bcb19b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3OTAzOTJ8MHwxfHNlYXJjaHwxMXx8aWNlbGFuZHxlbnwwfHx8fDE3NjcxNTg5NDF8MA&ixlib=rb-4.1.0&q=80&w=1080)Photo by Robert Bye on Unsplash![green mountain under white sky](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/lghxuabt5wop4jycrmpvimg3808-1779007373006-compressed.jpg?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3OTAzOTJ8MHwxfHNlYXJjaHwxMnx8aWNlbGFuZHxlbnwwfHx8fDE3NjcxNTg5NDF8MA&ixlib=rb-4.1.0&q=80&w=1080)Photo by Alex Talmon on Unsplash

Iceland is on the same planet as ours

### **How to create a** gallery **:**

- Type `/gallery` and press Enter

- Select up to 9 images from Upload, Unsplash, or My Media

- Images automatically arrange in an optimized layout


**Gallery layout:** The gallery uses an intelligent auto-layout that distributes images across rows based on their aspect ratios, similar to how photos appear in professional publications. Images are arranged to create a visually balanced composition.

### Features **:**

- Supports 2-9 images per gallery

- Responsive design adapts to screen size

- Click any image to view in lightbox

- Navigate between images with arrow keys in lightbox


> 🖼️ **Tip:** For best results, use images with different aspect ratios to let the auto-layout handle the mosaic arrangement.

* * *

## YouTube Video

Embed YouTube videos directly in your posts. Videos are embedded responsively and work on all devices.

### **How to embed a** video **:**

- Type `/youtube` and press Enter

- Paste the YouTube video URL

- Choose your preferred size (small, medium, or large)


### **Supported URL** formats **:**

- `https://www.youtube.com/watch?v=VIDEO_ID`

- `https://youtu.be/VIDEO_ID`


### **Size** options **:**

- **Small** \- Compact size for supplementary content

- **Medium** \- Balanced size for most use cases

- **Large** \- Full-width for featured videos


> 🎬 **Tip:** Videos are lazy-loaded for better page performance. They only load when readers scroll them into view.

* * *

## Tweet / X Post

Embed tweets and X posts to add social proof, quotes, or conversations to your content.

### **How to embed a** tweet **:**

- Type `/tweet` and press Enter

- Paste the tweet URL


### **Supported URL** formats **:**

- `https://twitter.com/username/status/ID`

- `https://x.com/username/status/ID`


The embedded tweet displays the author's profile picture, name, handle, tweet content, and engagement metrics just like it appears on X/Twitter.

* * *

## Table

Create data tables with customizable rows and columns. Perfect for comparisons, pricing, schedules, or any structured data.

Example Column 1

Example Column 2

Example Column 3

Example Row 1

Example Row 1

Example Row 1

Example Row 2

Example Row 2

Example Row 2

Example Row 3

Example Row 3

Example Row 3

Example Row 4

Example Row 4

Example Row 4

### **How to** create **a table:**

- Type `/table` and press Enter

- Choose the number of rows and columns

- Tables are created with a header row by default


### **Editing** tables **:**

- Click any cell to edit its content

- Use Tab to move to the next cell

- Use Shift+Tab to move to the previous cell

- Right-click for options to add/remove rows and columns


### Styling **:**

- Header row is automatically styled

- Tables are responsive and scroll horizontally on mobile


* * *

## Code Block

Add syntax-highlighted code snippets to your posts. Supports 50+ programming languages with automatic syntax highlighting.

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
```

### How **to add code:**

- Type `/code` and press Enter

- Select your programming language from the dropdown

- Paste or type your code


**Supported languages include:** JavaScript, TypeScript, Python, Go, Rust, Java, C++, Ruby, PHP, SQL, HTML, CSS, Bash, JSON, YAML, Markdown, and many more.

### Features **:**

- Automatic syntax highlighting

- Language label displayed in the corner

- Preserves indentation and formatting

- Copy button for readers (on the published site)


> 💡 **Tip:** Choose the correct language for accurate syntax highlighting. Use "Plain Text" if your language isn't listed.

* * *

## Horizontal Rule

Insert a visual divider to separate sections of your content. Useful for breaking up long posts or indicating topic changes.

### **How to add a** divider **:**

- Type `/divider` and press Enter

- Or type `---` on a new line and press Enter


The divider renders as a subtle line that adapts to your blog's theme.

* * *

## CTA Button

Create eye-catching call-to-action buttons to drive reader engagement. Use them to link to products, sign-up pages, downloads, or any important destination.

Try superblog for free

### **How to create a** button **:**

- Type `/button` and press Enter

- Enter the button text

- Add the destination URL

- Choose primary or secondary style


### **Button** styles **:**

- **Primary** \- Bold, filled button for main actions

- **Secondary** \- Outlined button for secondary actions


### **Alignment** options **:**

- Left, center, or right alignment


> 🎯 **Tip:** Use action-oriented text like "Get Started," "Download Now," or "Learn More" for better click-through rates.

* * *

## Callout

Create attention-grabbing callout sections with a heading, description, and call-to-action buttons. Perfect for newsletter sign-ups, special announcements, or promotional content.

This is a big heading for the callout section of the page

This is a subheading for the callout section

[Main Button](https://www.google.com) [Secondary](https://www.google.com)

### **How to create a** callout **:**

- Type `/callout` and press Enter

- Add a heading and optional subheading

- Add one or two CTA buttons

- Choose your preferred style


### **Callout** elements **:**

- **Heading** \- Main message (required)

- **Subheading** \- Supporting text (optional)

- **Primary Button** \- Main call-to-action

- **Secondary Button** \- Alternative action (optional)


### Features **:**

- Full-width design that stands out from regular content

- Customizable button text and links

- Responsive layout


* * *

## Post Card

Link to other posts from your Superblog with a rich preview card. Great for cross-promoting related content and keeping readers engaged.

[![Can I use superblog on a subdirectory or subfolder?](https://prod.superblogcdn.com/site_cuid_cl24xk71d43671knv8xb01aas/images/logoboltlarge-1779007372487-compressed.png)\
\
**Can I use superblog on a subdirectory or subfolder?** \
\
Yes, you can! Just connect your domain in the superblog dashboard to get instructions.](https://superblog.ai/docs/can-i-use-superblog-on-a-subdirectory-or-subfolder-cl269b8o10086cglhtu0twj5z)

### **How to add a post** card **:**

- Type `/post` and press Enter

- Search for a post by title

- Click to insert the card


### **Card** displays **:**

- Post thumbnail image

- Post title

- Category (if assigned)

- Excerpt preview


The card links directly to the post, making it easy for readers to discover more of your content.

> 📝 **Note:** Post cards show the content as it was when the card was created. If you update the linked post's title or excerpt, you'll need to re-insert the card to show the changes.

* * *

## Embed from URL

Embed content from popular platforms using just a URL. The editor automatically detects the platform and creates the appropriate embed.

### **How to** embed **:**

- Type `/embed` and press Enter

- Paste the URL from a supported platform


### **Platforms** examples **:**

- **Audio:** Spotify, SoundCloud, Apple Podcasts

- **Video:** Vimeo, Loom, Wistia

- **Design:** Figma, CodePen, CodeSandbox

- **Documents:** Google Docs, Google Sheets, Google Slides

- **Other:** Calendly, Typeform, Airtable, and more


Simply paste the share URL from any platform and the embed will be created automatically.

* * *

## Custom HTML / Embed Code

Insert raw HTML, embed codes, or iframes for complete flexibility. Use this for third-party widgets, custom scripts, or any content not supported by other widgets.

Also, if you are not able to embed a particular URL then you can use this widget to embed it into your blog post by pasting the full embed code.

### **How to add** custom **HTML:**

- Type `/html` and press Enter

- Paste your HTML code or embed snippet


### **Common use** cases **:**

- Third-party newsletter signup forms

- Custom widgets from other services

- Iframe embeds

- Custom JavaScript snippets

- Analytics or tracking codes


### Features **:**

- Live preview in the editor

- Supports any valid HTML

- Scripts execute on the published page


> ⚠️ **Caution:** Only use HTML from trusted sources. Malicious code could affect your site's security and performance.

* * *

## Markdown

Convert Markdown content to HTML and insert it into your post. Useful for importing content or for writers who prefer Markdown syntax.

### **How to** use **:**

- Type `/markdown` and press Enter

- Paste or type your Markdown content

- Click Insert to convert and add to your post


### **Supported** Markdown **features:**

- Headings ( `# H1`, `## H2`, etc.)

- Bold, italic, strikethrough

- Links and images

- Ordered and unordered lists

- Blockquotes

- Code blocks and inline code

- Tables


The Markdown is converted to HTML and inserted as regular content that you can continue editing.

* * *

## Help

Type `/help` in the editor to see all available widgets and shortcuts.

Read all the shortcuts [here](https://superblog.ai/docs/keyboard-shortcuts).


---
This blog is powered by Superblog. Visit https://superblog.ai to know more.
---