Headings and font sizes

Normal body text is readable and comfortable. You can also use bold and italic for emphasis.

This paragraph uses a smaller font size for captions or secondary info.

This one is larger—great for key takeaways or highlighted statements.

And this is a big, bold callout for important points.

Images

Images scale to the content width and have rounded corners and a subtle shadow.

Example wide image from showcase
Wide image with a caption below.

You can also drop in images without a figure when no caption is needed.

Another example image

Blockquotes

Use blockquotes to highlight a key quote or callout:

“Job site cameras aren’t just for security—they’re a project management tool. The best contractors use them to document progress, resolve disputes, and keep clients in the loop.”

Lists

Unordered list

  • Live streaming from multiple sites
  • Cloud recording and playback
  • Motion alerts and notifications
  • Time-lapse and progress reports

Ordered list

  1. Mount the camera with a clear view of the site
  2. Connect power and network (or use cellular)
  3. Configure the app and invite your team
  4. Set up alerts and storage preferences

Code

Inline code looks like this: npm install or GET /api/stream.

Multi-line code blocks are styled with a dark background:

// Check camera status
const status = await fetch('/api/cameras/1/status');
const { online, lastSeen } = await status.json();

if (online) {
  console.log('Camera is live');
} else {
  console.log('Last seen:', lastSeen);
}

Links and emphasis

Links are styled with the accent color and work across the site. Combine bold, italic, and links in the same sentence for rich content.

One more image

Final example image
Taller aspect ratio—figures support any image size.

That’s the full set of blog features. Use them to build clear, engaging posts with varied typography, media, and structure.