Widgets Setup

Widgets Setup

Widgets are self contained content blocks that live in a page sidebar or footer. Canvas wraps every widget in a .widget container and styles the widget heading automatically, so you only need consistent markup to get a clean, aligned column of blocks.

Structure

The base container is .widget. Each widget is a direct child of the sidebar column and stacks vertically with spacing handled by the theme.

<div class="sidebar col-lg-4">
	<div class="sidebar-widgets-wrap">

		<div class="widget">
			<h4>Widget Heading</h4>
			<!-- widget body -->
		</div>

		<div class="widget widget_links">
			<h4>Useful Links</h4>
			<ul>
				<li><a href="#">Documentation</a></li>
				<li><a href="#">Support Forum</a></li>
			</ul>
		</div>

	</div>
</div>

Widget Title

The widget heading is a plain > h4 inside .widget. Canvas targets the direct child h4 and applies the title spacing, size, weight, letter spacing and transform. You do not need an extra title class.

<div class="widget">
	<h4>Recent Posts</h4>
	...
</div>

The title is driven by CSS custom properties, so you can retheme every widget heading at once:

.widget {
	--cnvs-widget-title-margin: 30px;
	--cnvs-widget-title-font-size: 1rem;
	--cnvs-widget-title-font-weight: 700;
	--cnvs-widget-title-letter-spacing: 1px;
	--cnvs-widget-title-text-transform: uppercase;
}

Common Variants

Canvas ships specialized widget classes that add block specific styling on top of .widget:

<!-- Twitter feed widget -->
<div class="widget widget-twitter-feed">
	<h4>Twitter Feed</h4>
	<ul class="iconlist twitter-feed" data-username="envato" data-count="2"></ul>
</div>

<!-- Newsletter subscribe widget -->
<div class="widget subscribe-widget">
	<h5><strong>Subscribe</strong> to Our Newsletter:</h5>
	<form action="include/subscribe.php" method="post" class="mb-0"> ... </form>
</div>

<!-- Link list widget -->
<div class="widget widget_links">
	<h4>Links</h4>
	<ul> ... </ul>
</div>

Icon Lists Inside Widgets

Many widgets use the .iconlist list style so each item gets a leading icon. Add .widget-li-noicon to a list to suppress the default bullet or icon on plain link lists.

<ul class="iconlist widget-li-noicon">
	<li><a href="#">Plain link item</a></li>
</ul>

Tips

• Keep every block in its own .widget wrapper so heading spacing and dividers line up consistently down the column.
• Use > h4 for the title. Adding wrapper elements between .widget and the heading breaks the automatic title styling.
• Retheme all widget titles globally by overriding the --cnvs-widget-title-* custom properties on .widget in your SASS.
• Sidebar widgets pair well with .sticky-sidebar so the column follows the reader on long articles.