Canvas HTML Template for a client project or agency site build in 2025, this breakdown will show you exactly what is inside demo-agency.html, how the sections are structured, and where you can lift components directly into your own work.
Key Takeaways
- The Canvas Agency demo uses a
slider-element boxed-sliderhero section with a contained, boxed layout rather than a full-bleed canvas. - Portfolio items in the demo include real named works: Locked Steel Gate, Mac Sunglasses, Morning Dew, Console Activity, Shake It, Backpack Contents, and Sunset Bulb Glow.
- Testimonials reference named individuals (Steve Jobs, Collis Ta’eed, John Doe), giving you a realistic placeholder structure to replace with real client quotes.
- The demo ships with e-commerce-adjacent UI including a Shopping Cart section and a “View Cart” button, making it extensible beyond pure agency use.
- Every section in the demo can be extracted and dropped into other Canvas demos or custom pages with minimal dependency on the surrounding layout.
The Hero: Boxed Slider Layout
The first thing you notice when you view the live Canvas Agency demo is that the hero does not stretch edge to edge. It uses the class combination slider-element boxed-slider, which constrains the slider within a container rather than filling the full viewport width. That is a deliberate choice for agency branding: it creates visual breathing room and keeps focus on the content rather than leading with a wall-to-wall image.
<section class="slider-element boxed-slider">
<!-- Swiper or OWL Carousel markup goes here -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- slide content -->
</div>
</div>
</div>
</section>To reuse this hero on a new page, copy the slider-element boxed-slider block and swap in your own slide content. Canvas initialises the slider through plugins.min.js and functions.bundle.js, so as long as those scripts are loaded, the slider works without additional configuration. For a deeper look at how this compares to other carousel setups in Canvas, the post on building a Bootstrap 5 image carousel with custom controls covers the underlying mechanics.
Core Feature Sections and Their Purpose
Below the hero, the Agency demo sequences its value propositions through four named sections: Responsive and Retina, Powerful Performance, Truly Multi-Purpose, and Open Imagination. These are not decorative headings. Each maps to a specific block type you can repurpose independently.
- Responsive and Retina contains icon-and-text columns, the kind of feature grid you see across almost every agency site. The Bootstrap 5 grid handles column breakpoints, and you can adjust the column count by changing
col-md-4tocol-md-6orcol-md-3without touching any Canvas-specific code. - Powerful Performance and Truly Multi-Purpose are good candidates for a counter or stats block. Canvas includes animated counters that activate on scroll. The post on Canvas countdown and counter blocks covers exactly this pattern if you want to extend those sections with live numbers.
- Open Imagination serves as a mid-page CTA band: a full-width section with a headline and a button. To change the theme colour on that section alone, override
--cnvs-themecolorin a scoped style block rather than globally.
The Portfolio Grid: Some Latest Works
The section labelled Some Latest Works is where the Agency demo earns its credibility as a real starting point. It contains seven named portfolio items: Locked Steel Gate, Mac Sunglasses, Morning Dew, Console Activity, Shake It, Backpack Contents, and Sunset Bulb Glow. Each is a card-style tile with an image, a title overlay, and a hover state.
<div class="portfolio-item col-md-4">
<div class="portfolio-image">
<a href="portfolio-single.html">
<img src="images/portfolio/locked-steel-gate.jpg" alt="Locked Steel Gate">
</a>
<div class="portfolio-overlay">
<a href="portfolio-single.html" class="center-icon">
<i class="uil uil-search"></i>
</a>
</div>
</div>
<div class="portfolio-desc">
<h3>Locked Steel Gate</h3>
</div>
</div>The grid currently renders three columns on medium and large screens. For a four-column layout, swap col-md-4 for col-md-3. For two-column masonry, the post on Bootstrap 5 card layouts for portfolios and blogs covers the exact CSS additions you need.
The Shopping Cart Section: E-commerce Crossover
One of the less obvious inclusions in the Agency demo is the Shopping Cart section, complete with a View Cart button. This is not a leftover from another template. It signals that the Agency demo is designed to support agencies that also sell products, retainer packages, or handle client billing through a storefront. The cart component slots in from Canvas’s e-commerce blocks without requiring a separate template.
If you are building a pure agency site and do not need this section, delete the block. There are no JavaScript dependencies that will break other sections if you remove it. If you do want to keep it, replace the placeholder items with actual service packages or merchandise and wire the “View Cart” button to your checkout URL.
This kind of flexibility is part of why some developers choose a premium template over a free one. The post on premium vs free HTML templates breaks down exactly what that difference looks like in practice.
Testimonials: What Clients Say
The What Clients Say section contains three named testimonial entries: Steve Jobs, Collis Ta’eed, and John Doe. These are placeholder names with enough variety to show how the layout handles different quote lengths and attribution styles. The section uses Canvas’s testimonial slider component, covered in detail in the post on creating a Bootstrap 5 testimonial slider.
<div class="testimonial-item">
<div class="testi-content">
<p>Your client quote goes here. Keep it concise and attributable.</p>
</div>
<div class="testi-meta">
<h4>Steve Jobs</h4>
<span>Apple Inc.</span>
</div>
</div>Replace the names and quote text with real client testimonials and you are done. The layout supports a thumbnail avatar next to the attribution line. Add an <img> tag inside .testi-meta and Canvas will style it automatically as a circular avatar.
How to Reuse Sections Across Other Canvas Pages
The Agency demo is modular by design. Each section is a self-contained HTML block that references shared Canvas utility classes and the global CSS variable --cnvs-themecolor. The workflow for moving a section to a different demo or custom page is straightforward:
- Copy the full section block from
demo-agency.html, from the opening<section>tag to the closing one. - Paste it into the target file at the appropriate position in the page flow.
- Check that plugins.min.js and functions.bundle.js are loaded in the target file. If they are, interactive components like sliders and counters will initialise automatically.
- Replace placeholder images and text with your own content.
- Adjust column classes if the surrounding layout uses a different grid density.
There is one genuine limitation to flag: the boxed slider hero is tuned for wider viewports. On projects targeting primarily mobile traffic, consider replacing it with a simpler static hero rather than forcing the boxed layout to compress on small screens. That is not a flaw in Canvas; it is a design trade-off to weigh before committing to the layout. If you are also thinking about the build toolchain for your project, the comparison of Gulp vs Vite vs Webpack for HTML template workflows is worth reading before you set up your environment.
Frequently Asked Questions
The demo file is named demo-agency.html and sits in the root of the Canvas template package. Open it directly in a browser or serve it through a local server. All assets are referenced with relative paths, so a simple local server (such as VS Code Live Server) is enough to get it running with scripts and styles intact.
Yes. The presence of the Shopping Cart section and the “View Cart” button means the demo already has e-commerce UI built in. You can keep those sections, link the cart to your fulfilment system, and have a hybrid agency-plus-shop layout without switching to a different Canvas demo.
It renders on mobile, but the boxed constraint means it will not fill the full screen width on small viewports. For mobile-first projects, consider replacing the boxed-slider class with a full-width slider or a static hero section using Canvas’s existing section blocks.
Canvas uses the CSS variable --cnvs-themecolor for its primary colour across components. Override it in a <style> block in the <head> of demo-agency.html, or scope it to a specific section by declaring it on the section element itself. Changes cascade automatically to buttons, links, and accents that reference the variable.
The seven portfolio items (Locked Steel Gate, Mac Sunglasses, Morning Dew, Console Activity, Shake It, Backpack Contents, Sunset Bulb Glow) use placeholder links that point to generic portfolio single-page templates included in the Canvas package. You replace those links with your actual project URLs or with Canvas’s portfolio detail page files once you have added your own content.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup and build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog