Default Canvas Patterns

The 14 default Canvas Patterns that ship with Varbase, what each section is, and how to insert, edit and publish one in Drupal Canvas, no code.

Canvas Patterns are ready-made page sections that ship with Varbase. Each one is a complete, on-brand block that you drop onto a page in Drupal Canvas and adjust in the browser, with no code. A pattern can be a hero slider, a set of feature cards, a contact form or a call-to-action banner. They were extracted from the real Varbase Starter demo pages, so every pattern is something you can already see running on the site.

What Is a Canvas Pattern?

A component is a single piece, such as a heading, an image, a button or a card. A pattern is a whole section built from many components that are already arranged and filled with sensible starter content. Instead of placing a section, then columns, then each card and heading by hand, you insert one pattern and the entire section appears at once, ready to edit.

Patterns live on their own tab in the editor's Library, next to Components. Varbase ships 14 of them.

The Patterns tab in the Library lists all 14 ready-made sections.

Only content patterns appear here. Administrative and system pieces are never offered as patterns, so a builder cannot accidentally drop a system element onto a page.

How to Use a Pattern

Open the page you want to work on in Drupal Canvas. From Administration \ Content Pages, choose Edit on the page, then follow these steps.

1. Open the Library from the left toolbar and switch to the Patterns tab.

2. Right-click the pattern you want and choose Insert. The whole section is added to the page.

3. Drag it up or down, or manage it in the Layers panel, to place it where you want.

4. Select any piece inside it, such as a heading, a paragraph, a button or an image, and change its content and settings on the right.

5. When you are happy, Review your changes and Publish.

Step 2: right-click a pattern and choose Insert.

The inserted section appears on the page, with its settings on the right.

Insert as many times as you like. Each time you insert a pattern it comes in as a fresh, independent copy. You can use the same pattern several times on one page and edit each copy on its own, and changing one never changes the others.

The Pattern Catalog

All 14 patterns, shown on the real Varbase demo pages they came from. Each note says when to reach for it.

Hero Slider

Use it for: the top of a landing page. It shows a rotating set of full-width slides, each with a headline, a short line of text and a button.

Hero Slider: a rotating full-width opener for a landing page.

Page Intro Banner

Use it for: the header band of an inside page. It shows a title, a short intro line and the breadcrumb trail over a background image.

Page Intro Banner: a titled header band for an inside page.

Text with Cards

Use it for: an introduction beside a small set of highlight cards. A heading, a short paragraph and a button sit on one side, with cards on the other.

Text with Cards: an intro paragraph paired with highlight cards.

Feature Cards

Use it for: a tidy grid of features, each with an icon, a short title and a line of text.

Feature Cards: a grid of icon-and-text feature cards.

Counters

Use it for: a row of key numbers. Each shows a big figure with a short label under it, to convey scale or results.

Counters: a row of headline numbers with labels.

Feature Highlight

Use it for: spotlighting one thing, with a heading and a paragraph beside a supporting image.

Feature Highlight: one idea spotlighted beside an image.

Latest Blog Posts

Use it for: an automatic list of your most recent articles with a link to see them all. The list updates itself as you publish.

Latest Blog Posts: a self-updating list of recent articles.

FAQ Accordion

Use it for: a set of questions and answers where each answer opens and closes on click, which keeps the page short.

FAQ Accordion: expandable questions and answers.

Image Cards

Use it for: a row of cards that each pair a picture or icon with a short line of text, plus a button below the row.

Image Cards: a row of picture-and-text cards.

Contact Form with Info

Use it for: a contact page. It places a full enquiry form beside a panel of contact details and a button.

Contact Form with Info: an enquiry form beside contact details.

Call to Action Cards

Use it for: pointing people to two next steps, shown as two side-by-side cards, each with a heading, a line of text and a button.

Call to Action Cards: two side-by-side next steps.

Call to Action Banner

Use it for: one strong, full-width prompt with a headline, a short line and a single button, usually near the bottom of a page.

Call to Action Banner: a full-width prompt with one button.

Site Header

Use it for: dropping the standard site branding and main navigation onto a page. It is a ready-made copy of the site-wide header.

Site Header: the standard branding and navigation composition.

Site Footer

Use it for: dropping the standard footer onto a page, with its footer menus, social links and copyright.

Site Footer: the standard footer menus, social links and copyright.

Header and Footer, reused. The Site Header and Site Footer patterns are ready-made copies of the site-wide header and footer. They let a builder place that same composition inside a page when a design calls for it, without rebuilding it by hand.

Editing a Pattern After You Insert It

An inserted pattern is just ordinary content, and nothing is locked. Click any element to edit it. For example, select the heading of a FAQ Accordion and change its text in the Heading text field, and the page updates as you type.

Before: the heading reads "Frequently Asked Questions".

After: the heading now reads "Common Questions About Varbase", updated live.

For QA

A pattern is working correctly when all of the following hold.

• The pattern appears on the Patterns tab of the Library.

• Insert adds the whole section to the page.

• Selecting the section, or any piece inside it, opens a settings form.

• Inserting the same pattern twice gives two independent copies, and editing one does not change the other.

• The page publishes and the section renders correctly for a logged-out visitor.

• No administrative or system components are offered as patterns in the Library.

• The section passes an accessibility check. For the built demo, the Content Accessibility report (/admin/reports/editoria11y) and an axe scan report no WCAG 2 A/AA issues.

Good to know. Patterns are a starting point, not a limit. After you insert one you can add, remove or rearrange the pieces inside it freely. The pattern simply saved you the work of building the section from scratch.