> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> The hero pattern, the lead paragraph style, and what theme.json gives the editor.

# Block patterns

# Block patterns and styles

Vara SaaS registers a small set of block editor additions, plus the design tokens that make blocks match the front end.

## The registered items

| Type | Name | Where it appears |
| - | - | - |
| **Block style** | `vara-saas-lead` on Paragraph | In the paragraph block's **Styles** tab |
| **Block pattern** | `vara-saas/hero` | Under the **Vara SaaS** pattern category |

## The lead paragraph style

A larger, more prominent paragraph style for introductory text.

**To apply it:** select a paragraph block → **Styles** tab in the block settings sidebar → choose **Lead**.

![Screenshot: the paragraph block Styles tab showing the Vara SaaS Lead style](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/block-patterns-lead-style.png)

Good uses:

* The opening sentence of an article
* A short introduction under a page title
* A pull-quote-adjacent statement

Avoid using it on long passages — it is designed for one or two sentences.

## The hero pattern

A constrained group of blocks designed as a hero section.

**To insert it:** in the block editor, open the **Patterns** tab, choose the **Vara SaaS** category, and select **Hero**.

![Screenshot: the block inserter Patterns tab showing the Vara SaaS category and Hero pattern](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/block-patterns-hero-pattern.png)

Because it is a pattern — inline block markup rather than a template file — you can edit every block in it individually once inserted.

**The pattern is a starting point, not a finished design**

The hero pattern is intentionally minimal — an eyebrow label, a headline, a paragraph, and a
button. It gives you correct block structure and consistent spacing, and you supply the content
and the visual character.

## What theme.json gives the editor

The block editor is styled to match the front end. `theme.json` provides:

### Colors

A nine-color palette, available in any block that offers color controls — **Group → Color** in the settings sidebar.

| Swatch | Role |
| - | - |
| Primary | Brand primary |
| Secondary | Brand secondary |
| Tertiary | Brand tertiary / accent |
| Background | Page background |
| Surface | Card and panel background |
| Text | Body text |
| Text Light | Muted text |
| Border | Dividers and outlines |
| Primary Muted | Soft tint of primary |

![Screenshot: the block editor color palette showing the theme's nine colors](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/block-patterns-palette.png)

### Fonts

**Inter** and **JetBrains Mono** are available as global fonts in the typography settings of any block.

> [!WARNING]
>
> **These do not follow your Customizer font selection.** The Customizer's base font is a separate control with its own allowlist. If you set a custom font there, the block editor will still offer Inter and JetBrains Mono. Change the front end font in the Customizer and the editor font in the block settings — they are independent by design.

### Type sizes

A ten-step named scale, available in **Typography → Size** on any text block.

| Token | Intended use |
| - | - |
| `display-lg` | Hero headlines |
| `display-md` | Page titles |
| `heading-lg` | Section headings |
| `heading-md` | Subsection headings |
| `heading-sm` | Card headings |
| `body-lg` | Lead paragraphs |
| `body-md` | Default body copy |
| `body-sm` | Secondary text |
| `caption` | Captions and footnotes |
| `overline` | Eyebrow and label text |

### Layout

| Setting | Value |
| - | - |
| Content width | 1280 px |
| Wide width | 1440 px |

![Screenshot: a block set to the wide alignment spanning the full wide width](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/block-patterns-wide-align.png)

### Editor styles

The theme calls `add_editor_style()` so the editor canvas renders in your theme's typography rather than WordPress defaults. What you see in the editor is close to what you get on the front end.

## Other block editor support

The theme also declares:

> **Wide blocks**
>
> `align-wide` support, so blocks can span the wide width.

> **Block styles**
>
> `wp-block-styles` support, which is what registers the Lead style.

## Working with blocks instead of a builder

You can build your entire site with Gutenberg. The theme gives you:

* A styled header, footer, blog index, archives, and single post
* The design palette, fonts, and type scale in the editor
* The hero pattern and lead paragraph style

What you do **not** get is the default front-page sections as editable blocks. If you want a marketing homepage without a builder, you build it yourself in the block editor, or you use the theme's [default sections](/templates/default-sections.md) via a child theme.

**A practical hybrid**

Many teams use Elementor for marketing pages and Gutenberg for everything else. The theme does
not care which builder you use per page — it detects each one and steps aside.

## Related

> **[Block editor](/integrations/block-editor.md)**
>
> The full Gutenberg integration.

> **[Typography reference](/customization/typography-reference.md)**
>
> The editor's type scale in detail.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.