Brigade Blocks Docs v1.1.0

Content module

Heading block

A section heading with an optional eyebrow label above it, an accent line and a supporting paragraph below.

Overview

The Heading block introduces a section of your page. Besides the heading text itself it can show a small eyebrow label above it (for example “Our Services”), a short coral accent separator line, and a supporting sentence below. You choose the heading level (H1–H6) for the page structure and the visual size (M, L, XL) separately, so the look never forces the wrong structure.

At a glance

Block name
wpbb/heading
Module
Content
Find it by searching
Heading
Loads JavaScript on the site
No

When and why to use it

  • Start each section of a landing page with a clear title and a one-line explanation.
  • Add a category-style label (“Case study”, “Pricing”) above a title.
  • Keep headings consistent across the site with the same sizes and accent.

Example scenarios

  • Services section: eyebrow “What we do”, heading “Design and development for growing brands”, accent separator on, centred.
  • Blog intro: H1 “Journal” at size XL with a supporting sentence describing the blog.

See it in action

These are live examples: real Heading blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Heading options — Eyebrow, sizes, accent separator and description, left and centred.
Open in a new tab

How to add the Heading block

  1. Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
  2. Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
  3. Search for the block. Type Heading in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
  4. Insert it. Click Heading in the results. The block appears with empty heading and description fields.
  5. Configure the content. Edit the text directly on the block, then open the Settings tab (gear icon) in the right-hand sidebar for the options described below. If the sidebar is hidden, click the gear icon in the top-right corner.
  6. Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
  7. Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Heading text

What it does
The heading itself.
What to enter or choose
Short, descriptive text.
Default
Empty
How to use it
Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it
Always.
Example
“Everything you need to launch.”
Result
The text appears in the chosen level and size.
Good to know
If both the heading and the description are empty, nothing is shown on the site.

Description

What it does
An optional supporting sentence under the heading.
What to enter or choose
One or two sentences.
Default
Empty
How to use it
Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it
When a short explanation helps visitors understand the section.
Example
“Plans for teams of every size. Cancel any time.”
Result
A paragraph in the body style appears below the heading. Leave it empty to hide it.

Block toolbar

Heading level

What it does
The structural level of the heading (H1 to H6).
What to enter or choose
One of: H1, H2, H3, H4, H5, H6.
Default
H2
How to use it
Select the block; the button is in the toolbar that appears above it.
When to use it
Use H1 once per page for the main title, H2 for sections, H3 for sub-sections.
Example
H2 for “Our services”.
Result
The HTML tag changes. The visual size is set separately with Size.
Good to know
Correct levels help screen-reader users and search engines understand your page.

Align

What it does
Aligns the eyebrow, heading, separator and description.
What to enter or choose
One of: Align text left, Align text center, Align text right.
Default
Align text left
How to use it
Select the block; the button is in the toolbar that appears above it.
Example
Centre for section intros above a grid of cards.
Result
All parts of the block move together.

Settings panel: Heading

Size

What it does
The visual size of the heading text.
What to enter or choose
One of: M, L, XL.
Default
L
How to use it
Click one of the buttons in the group.
When to use it
XL for page titles and heroes, L for section titles, M for smaller sub-sections.
Example
XL for the hero headline.
Result
The heading grows or shrinks; sizes scale smoothly on smaller screens.

Eyebrow label

What it does
A short label shown above the heading.
What to enter or choose
One to three words.
Default
Empty
How to use it
Type into the text field. Changes appear in the preview right away.
When to use it
To name the section or category before the main message.
Example
“Our Services”.
Result
A small, uppercase label appears above the heading. Leave empty to hide it.

Accent separator

What it does
Adds a short coral line between the heading and the description.
What to enter or choose
On or off.
Default
Off
How to use it
Click the switch to turn it on (blue) or off.
When to use it
For a signature Donix look on section titles.
Example
Turn it on for every section heading on the home page.
Result
A small accent bar appears below the heading (hidden from screen readers — it is decoration).

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

  1. Element — which part of the block to style.
  2. State — Normal, or a state such as Hover (only the states the part supports are offered).
  3. Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Heading offers.

Element: Title selected first

The heading text.

Styles-tab controls for “Title”
PanelControlPer deviceAvailable in states
TypographyFont family—Normal
Font sizeYesNormal
Weight—Normal
Style—Normal
Line heightYesNormal
Letter spacingYesNormal
Letter case—Normal
AlignmentYesNormal
Decoration—Normal
ColorsText—Normal
SpacingMarginYesNormal

States: Normal only.

Element: Block

The whole block (all parts together).

Styles-tab controls for “Block”
PanelControlPer deviceAvailable in states
TypographyFont family—Normal
Font sizeYesNormal
Weight—Normal
Style—Normal
Line heightYesNormal
Letter spacingYesNormal
Letter case—Normal
AlignmentYesNormal
Decoration—Normal
ColorsText—Normal
BackgroundType—Normal
Color / Gradient—Normal
Image—Normal
BorderBorder type—Normal
Border—Normal
RadiusYesNormal
Box ShadowRemove shadow—Normal
Shadow layers—Normal
SpacingMarginYesNormal
PaddingYesNormal
SizingWidthYesNormal
Max widthYesNormal
HeightYesNormal
Min width / Min height / Max heightYesNormal
Block alignmentYesNormal
PositionPositionYesNormal
Top / Right / Bottom / LeftYesNormal
Z-indexYesNormal
OverflowYesNormal
TransformMove X / Move Y—Normal
Scale X / Scale Y—Normal
Rotate (°), Rotate X (°), Rotate Y (°)—Normal
Skew X (°) / Skew Y (°)—Normal
EffectsOpacity (%)YesNormal
State transition (ms)—Normal
Timing—Normal
VisibilityShow on Desktop / Tablet / Mobile—Normal

States: Normal only.

Element: Eyebrow

The small label above the heading — you can give it a background, padding and rounded corners to make a “pill”.

Styles-tab controls for “Eyebrow”
PanelControlPer deviceAvailable in states
TypographyFont family—Normal
Font sizeYesNormal
Weight—Normal
Style—Normal
Line heightYesNormal
Letter spacingYesNormal
Letter case—Normal
AlignmentYesNormal
Decoration—Normal
ColorsText—Normal
BackgroundType—Normal
Color / Gradient—Normal
Image—Normal
BorderBorder type—Normal
Border—Normal
RadiusYesNormal
SpacingPaddingYesNormal

States: Normal only.

Element: Separator

The accent line.

Styles-tab controls for “Separator”
PanelControlPer deviceAvailable in states
BackgroundType—Normal
Color / Gradient—Normal
Image—Normal
BorderRadiusYesNormal
SpacingMarginYesNormal
SizingWidthYesNormal
Max widthYesNormal
HeightYesNormal
Min width / Min height / Max heightYesNormal

States: Normal only.

Element: Description

The supporting sentence.

Styles-tab controls for “Description”
PanelControlPer deviceAvailable in states
TypographyFont family—Normal
Font sizeYesNormal
Weight—Normal
Style—Normal
Line heightYesNormal
Letter spacingYesNormal
Letter case—Normal
AlignmentYesNormal
Decoration—Normal
ColorsText—Normal
SpacingMarginYesNormal
SizingWidthYesNormal
Max widthYesNormal
HeightYesNormal
Min width / Min height / Max heightYesNormal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Margin, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

  • HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
  • Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
  • Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
  • State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.

How it works on your site

A simple HTML structure: the eyebrow (<span>), the heading (<h1>–<h6>), the decorative separator and a paragraph. No JavaScript.

Accessibility

  • Pick heading levels in order (do not jump from H2 to H4) — screen-reader users navigate by headings.
  • The eyebrow is plain text before the heading; keep it short so it does not get in the way.
  • The accent separator is hidden from assistive technology.

Tips and best practices

  • Keep one H1 per page — usually the page or post title your theme already shows.
  • Use the same Size for all section headings on a page for a calm rhythm.

Limitations and notes

  • The heading text supports inline formatting (bold, italic, links); the eyebrow is plain text.