Overview
This post showcases headings, paragraphs, lists, images with captions and alignment, simple columns, tables, buttons, quotes, pre/code, responsive embeds, audio/video, callouts, and more.
- Clean, readable typography
- Responsive images & media
- Accessible color contrast
- Utility classes for common layouts
Images (alignments + captions)
A centered image with a caption (Classic Editor
[caption] shortcode).
This paragraph wraps around a left-aligned image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
And this paragraph wraps a right-aligned image. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
Simple two-column layout
Column A
Use this for quick two-up content without relying on block columns.
Column B
Stacks on mobile, sits side-by-side on wider screens.
Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs
This is a pull-quote to draw the eye to a key message.
Tables
| Feature | Good | Great |
|---|---|---|
| Performance | ✔ | ✔✔ |
| Accessibility | ✔ | ✔✔ |
| SEO | ✔ | ✔✔ |
| Demo data only | ||
Code & Preformatted
// Example function
function hello_world() {
console.log('Hello, Classic Editor!');
}
Preformatted text preserves whitespace and line breaks.
Callout Box
Use this to highlight important information with a soft background.
Downloads
Embeds (YouTube)
Responsive iframe wrapper ensures proper scaling.