Useful Snippets

Useful Snippets

A collection of small, handy markup patterns used throughout the Canvas package. Each snippet below uses real Canvas classes and can be dropped straight into a page.

Dropcap

Enlarge the first letter of a paragraph with .dropcap:

<p><span class="dropcap">F</span>oster a content workflow that scales with your team and never slows you down.</p>

Icon list

A checklist style list using .iconlist. Size it up with .iconlist-lg and offset icons with the --cnvs-iconlist-offset variable:

<ul class="iconlist iconlist-lg" style="--cnvs-iconlist-offset:1px">
    <li><i class="bi-check-circle-fill"></i> <span>220+ Site Blocks</span></li>
    <li><i class="bi-check-circle-fill"></i> <span>80+ Shortcodes &amp; Components</span></li>
</ul>

Counter

An animated number counter. The plugin counts from data-from to data-to:

<div class="counter">
    <span data-from="0" data-to="1400" data-refresh-interval="10" data-speed="1000"></span>
    <small class="color ms-1 fs-3">+</small>
</div>
<h3><span class="subtitle ls-0 h5 fw-medium">Templates</span></h3>

Plain icon block

A large decorative icon using .i-plain .i-xlarge:

<i class="i-plain i-xlarge mx-auto mb-3 bi-images"></i>

Shape divider

Add a decorative divider between sections. Control the shape, height, and position with data attributes:

<div class="shape-divider" data-shape="wave" data-height="36"></div>
<div class="shape-divider" data-shape="wave" data-position="bottom" data-height="36"></div>

Lazy loaded image

Canvas defers images with .lazy and a data-src, using an inline SVG placeholder to preserve layout:

<img class="lazy" alt="Preview" height="242"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E"
     data-src="images/portfolio/1.jpg">

Dark mode toggle link

Toggle a dark scheme on the body with a class toggling link:

<a class="more-link body-scheme-toggle" href="#" data-bodyclass-toggle="dark">Enable Dark Mode</a>

Background icon

A large faded icon anchored to a card corner using .bg-icon:

<div class="color bg-icon bi-star-fill" style="opacity:.05;bottom:-85px;right:-70px;z-index:-1"></div>

Tips

• Utility opacity helpers like .op-05, .op-06, .op-08 set quick opacity levels on text and icons.
• .nott removes text transform, useful on headings that should not be uppercased.
• .ls-0 resets letter spacing, and .fw-medium / .fw-semibold set custom font weights beyond Bootstrap defaults.
• Many decorative sizes and colors are exposed as --cnvs-* CSS variables, so you can restyle inline without writing new CSS.