Showcase Blocks & Images

17/01/2026 - Arthur Richard

This article illustrates various block-level and image styling options.

Image Styles

Here are different ways to style images using the custom CSS classes.

Custom Image Style

This image applies a custom border, shadow, and rounded corners.

Image Thumbnail

A common style for small, clickable images.

Circular Image

Makes any square image perfectly circular.

A server cluster

Floating Images

Images that float alongside text.

A digital toolbelt This text wraps around the image that is floated to the left. It's useful for placing small illustrations within a paragraph without breaking the flow of the text too much. The image will push the text around it, making for a more dynamic layout.

A computer keyboard This text wraps around the image that is floated to the right. This can also be used effectively for diagrams or icons that complement the text content. The text will automatically adjust to the available space.

Info and Alert Boxes

These blocks are great for highlighting important information, warnings, tips, or general notes.

**Note:** This is a general note box. It's good for providing additional context or explanations that are not critical but helpful.

**Warning!** Be careful when deleting files. This action is irreversible. Always back up your data before performing critical operations.

**Tip:** Use keyboard shortcuts to speed up your workflow. For example, Ctrl+S to save your work.

**Important:** Ensure all dependencies are installed before running the application. Missing dependencies will cause runtime errors.

Table Styling

Demonstrating enhanced table readability with various classes.

Basic Styled Table

Header A	Header B	Header C
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Task ID	Assigned To	Due Date
#001	Alice	2026-02-10
#002	Bob	2026-02-15
#003	Charlie	2026-02-20