> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/developers/theme-development-with-varbase/drupal-canvas/default-canvas-patterns.md).

# Default Canvas Patterns

**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.](/files/zP89yvmRusU1CWCJkHCk)

{% hint style="info" %}
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.
{% endhint %}

## How to Use a Pattern

Open the page you want to work on in **Drupal Canvas**. From **Administration** \ **Content**\
\&#xNAN;***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.](/files/YQNrsuLqy5XyZxi8CyQ7)

![The inserted section appears on the page, with its settings on the right.](/files/yXfTym1smlGZm6BZrjLj)

{% hint style="info" %}
**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.
{% endhint %}

## 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.](/files/GWWQ9fCNjVyln6acfStS)

### 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.](/files/jhYC8Juc1jxsU6SQ5pKv)

### 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.](/files/M0LjwmLEGio1XCxIhzFg)

### 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.](/files/PWz7xumAcSqnRNpdiXGB)

### 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.](/files/AcTfkezQejBlljatO8LT)

### 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.](/files/3iu1JsTEIeFpniF8r3ct)

### 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.](/files/yTKcjY6hhs0BzaI7EHFC)

### 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.](/files/j663r6lw1dtJ0vFu5PNN)

### 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.](/files/nd4jJxXjDEo3HlaVaqDt)

### 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.](/files/DcDz7QJjfxXoQFUGrHXO)

### 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.](/files/5PsyiMUjSkSXR0eS0vtq)

### 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.](/files/GrvfqIwrcwKzrvc0AnRf)

### 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.](/files/kVg3909W32XEOo2l48BZ)

### 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.](/files/9stj1CpsyX0lWO9ERrS0)

{% hint style="info" %}
**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.
{% endhint %}

## 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".](/files/MIw9KlfrdfyQFaO5XWTI)

![After: the heading now reads "Common Questions About Varbase", updated live.](/files/z9zGS7JHG0R5S9PVVGoZ)

## 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.

{% hint style="warning" %}
**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.
{% endhint %}