Design & features
Styling Controls
Every Brigade block can be styled in depth from the editor’s Styles tab — per part of the block, per state and per device — without writing CSS.
Where to find the styling controls
- Select a Brigade block on the canvas.
- Open the sidebar (gear icon, top-right) and click the Styles tab (the half-filled circle).
- At the top you see the Style panel with three pickers — Element, State and Device. Below it are the styling panels (Typography, Colors, Spacing…). Click a panel title to open it.
- Change a value. The canvas updates immediately. Save the page to publish your changes.
Only the panels that make sense for the selected part are shown — a divider has no typography panel, an icon has no “Layout” panel. The table at the end of this page lists the panels of every block.
Element: which part you are styling
Most blocks are made of several parts. The Element dropdown picks the part: for example a Button block has Button (the button itself), Icon and Block (the outer wrapper). The most commonly styled part is selected first. Each block guide lists its elements under Design & styling.
Blocks with only one stylable part have no Element dropdown.
State: normal, hover, focus and active
The State buttons let you give a part a different look in different situations. The canvas previews the state you are editing (“Previewing this state on the canvas. Values left empty keep the normal style.”).
| State | When it applies | Typical use |
|---|---|---|
| Normal | Always — the base style. | Everything. Some controls (background images, corner radius, transitions, visibility) exist only here. |
| Hover | When a mouse pointer is over the element (on some parts: over its card, e.g. a card title changes when the whole card is hovered). | Darker button background, lifted card (shadow + Move Y), underlined link. |
| Focus | When the element is reached with the keyboard (Tab key). On search fields, while the visitor is typing in them. | A clear focus ring (see Focus indicator). Important for accessibility. |
| Active | Depends on the part: while a button is being pressed; the selected tab, filter button or page number; an open accordion item; the switched-on side of a toggle; the current carousel dot. | Highlight the open question of an FAQ or the selected tab. |
Only the states a part supports are offered. Values you leave empty in Hover, Focus or Active keep the Normal value. Hover and focus changes animate smoothly (see State transition) and never animate layout properties.
Device: desktop, tablet and mobile
The Device buttons choose which screen size you are editing. Switching the device also switches the editor’s preview to that size.
- Desktop — “Editing desktop (base) values”: applies to every screen unless a smaller device overrides it.
- Tablet — screens up to 1023px wide; empty values inherit desktop.
- Mobile — screens up to 599px wide; empty values inherit tablet, then desktop.
Only some controls can differ per device (the “Per device” column below): sizes, spacing, font size and line height, layout, position and similar. Colours, borders and shadows are the same on every device. See Responsive Design for recipes.
Resetting values
Each panel has a Reset button at the bottom. It clears that panel’s values for the current element, state and device, returning to the block’s built-in design (or to the inherited value).
The styling panels
Panels appear in this order. “Per device” tells you whether the value can be different on tablet and mobile; “States” whether it can be different on hover, focus or active.
Layout
Arranges the blocks inside a container. “Flex” lines them up in a row or a column; “Grid” places them in equal columns.
| Control | What it does | Per device | States |
|---|---|---|---|
| Layout type | Container only. Choose Flex (a row or column that can wrap) or Grid (equal columns). This is the same choice as the layout you pick when inserting a Container. If neither is chosen, blocks simply stack in normal document flow. | Yes | Normal only |
| Arrange content | On other parts that can arrange their contents (for example the buttons area of a Call to Action): Stack (one under another, normal flow), Flex or Grid. | Yes | Normal only |
| Layout on this device | Container only, when the Device is Tablet or Mobile: keep the layout of larger screens (“Same as larger screens”) or switch between Flex and Grid for this device only. To stack items on a phone, keep Flex and set Direction to Column. | Yes | Normal only |
| Direction | Flex only. Row places items side by side, Column stacks them. “Reverse” flips the order visually. Tip: for a row on desktop that stacks on phones, keep Flex and set Direction to Column on the Mobile device. | Yes | Normal only |
| Wrap | Flex only. Wrap lets items move to a new line when there is not enough room; No wrap keeps them on one line (they shrink). | Yes | Normal only |
| Columns | Grid only. The number of equal columns, from 1 to 12. | Yes | Normal only |
| Justify content | How items are spaced along the main direction: Start, Center, End, Space between, Space around or Space evenly. | Yes | Normal only |
| Align items | How items line up across the main direction: Start, Center, End, Stretch (fill the height) or Baseline (text lines up). | Yes | Normal only |
| Align content | Only matters when items wrap onto several rows: how those rows are distributed. | Yes | Normal only |
| Gap | The space between items. Use one value for both directions, or unlink it to set Row and Column gaps separately. “Container gap (token)” uses the plugin’s standard spacing. | Yes | Normal only |
Flex item
Appears for any block placed directly inside a Brigade Blocks Container — including WordPress’s own blocks. It controls how that block sizes and places itself inside the container.
| Control | What it does | Per device | States |
|---|---|---|---|
| Width | Auto (as wide as its content), Full (fill the row) or Custom (set Grow, Shrink and Basis yourself). | Yes | Normal only |
| Grow | How much of the leftover space this block takes compared with its neighbours. 0 = none, 1 = an equal share. | Yes | Normal only |
| Shrink | Whether the block may get narrower than its Basis when space is tight. 0 = never shrink. | Yes | Normal only |
| Basis | The starting width before growing or shrinking, e.g. 50% for half the row or 320px. | Yes | Normal only |
| Order | Changes the visual order without moving the block in the editor. Lower numbers come first. Screen readers still follow the real order, so use this sparingly. | Yes | Normal only |
| Align self | Overrides the container’s “Align items” for this block only: Start, Center, End, Stretch or Baseline. | Yes | Normal only |
Typography
Everything about the text itself.
| Control | What it does | Per device | States |
|---|---|---|---|
| Font family | Default keeps the plugin’s setting (see Block typography). “Urbanist (Donix)” forces the bundled font, and your theme’s fonts are listed too. | Same on all devices | Normal only |
| Font size | Pick one of your theme’s sizes or type a custom value (px, em, rem…). | Yes | Normal only |
| Weight | How bold the text is, from 100 (thin) to 900 (black). 400 is normal, 700 is bold. | Same on all devices | Normal only |
| Style | Normal or Italic. | Same on all devices | Normal only |
| Line height | The space between lines of text. 1.5 means one and a half times the font size — comfortable for paragraphs; headings usually look better at 1.1–1.3. | Yes | Normal only |
| Letter spacing | Extra space between letters. Small values like 0.05em suit short uppercase labels. | Yes | Normal only |
| Letter case | — (as typed), AB (UPPERCASE), ab (lowercase) or Ab (Capitalise Each Word). The text you typed is not changed, only how it is shown. | Same on all devices | Normal only |
| Alignment | Left, Center, Right or Justify. | Yes | Normal only |
| Decoration | — (none), Underline or Strike (line through). Often used in the Hover state for links. | Same on all devices | Every state |
Colors
Text colours. Every colour picker shows your theme palette first, so your design stays consistent.
| Control | What it does | Per device | States |
|---|---|---|---|
| Text | The colour of the text. | Same on all devices | Every state |
| Link | Only on parts that contain links (text areas): the colour of links. | Same on all devices | Normal only |
| Link hover | The colour of links when the pointer is over them or they have keyboard focus. | Same on all devices | Normal only |
Background
What is behind the content.
| Control | What it does | Per device | States |
|---|---|---|---|
| Type | Color (one flat colour), Gradient (a blend of colours) or Image. Image is only offered in the Normal state. | Same on all devices | Every state |
| Color / Gradient | Pick from the palette or choose a custom colour or gradient. | Same on all devices | Every state |
| Image | Choose image opens the Media Library. Then set Position (the point that stays in view — click on the preview), Size (Cover fills the area and may crop; Contain shows the whole image; Original keeps its real size), Repeat (No repeat, Repeat, Horizontally, Vertically) and Fixed (parallax), which keeps the image still while the page scrolls. Fallback color shows while the image loads and behind transparent parts. Replace image / Remove image manage it. | Same on all devices | Normal only |
| Overlay | Container only. A colour or gradient laid over the background (usually an image) so text on top stays readable. Set Overlay color and Overlay opacity (0–100%). Can also change in the Hover state. | Same on all devices | Every state |
Border
Lines around the element, rounded corners, and the keyboard focus ring.
| Control | What it does | Per device | States |
|---|---|---|---|
| Border type | Default keeps the element’s built-in border (if the design has one), None removes it, or choose Solid, Dashed, Dotted or Double. | Same on all devices | Every state |
| Border | Width, style and colour. You can set all four sides together or each side separately. | Same on all devices | Every state |
| Radius | Rounded corners (edited in the Normal state; the same corners apply in every state). Use one value for all corners (Same radius for all corners) or Set each corner (Top left, Top right, Bottom left, Bottom right). 0 gives sharp corners; a large value such as 999px makes a pill shape. | Yes | Normal only |
| Focus indicator | Shown when you edit the Focus state of buttons, fields and other things people can click or type into. The ring shown when someone uses the keyboard (Tab key) to reach it. Set Ring color, Style, Width and Offset (the gap between the ring and the element). Keyboard users rely on this ring — keep it at least 2px and clearly visible. | Same on all devices | Focus only |
Box Shadow
Soft shadows that lift an element off the page.
| Control | What it does | Per device | States |
|---|---|---|---|
| Remove shadow | Turns off any built-in shadow of this element. | Same on all devices | Every state |
| Shadow layers | Each shadow has a Color, Horizontal and Vertical offset (−50 to 50 px: how far it moves right and down), Blur (0–100 px: how soft it is), Spread (−50 to 50 px: how much bigger or smaller than the element) and Inner shadow (drawn inside instead of outside). Add shadow / Add another shadow stack several layers for a more natural look; Remove shadow layer deletes one. | Same on all devices | Every state |
Spacing
Margin is the space outside the element, pushing neighbours away. Padding is the space inside the element, between its edge and its content.
| Control | What it does | Per device | States |
|---|---|---|---|
| Margin | Top, right, bottom and left, linked or separately. Negative values pull the element closer to (or over) its neighbours. | Yes | Normal only |
| Padding | Top, right, bottom and left, linked or separately. Padding makes a box roomier without changing the space around it. | Yes | Normal only |
Sizing
How wide and tall the element is.
| Control | What it does | Per device | States |
|---|---|---|---|
| Content width | Container only. Full width lets the content span the whole container. Boxed keeps the background full width but centres the content at Content max width (empty uses your theme’s wide size) — the classic “full-width section with centred content”. | Yes | Normal only |
| Width | Auto, Full (100%) or Custom (any value, e.g. 480px or 50%). | Yes | Normal only |
| Max width | None or Custom: the element never gets wider than this, but can be narrower on small screens. | Yes | Normal only |
| Height | Auto (fits the content), Full viewport (as tall as the browser window) or Custom. | Yes | Normal only |
| Min width / Min height / Max height | Limits. Min height is useful for hero sections that should be at least a certain height even with little content. | Yes | Normal only |
| Block alignment | Left, Center or Right. Aligns the block within its parent when it has a width or max width. | Yes | Normal only |
Position
Takes an element out of the normal flow to place it precisely. Use with care: badly positioned elements can cover other content, especially on phones.
| Control | What it does | Per device | States |
|---|---|---|---|
| Position | Default (normal flow), Relative (nudged from where it would be), Absolute (placed relative to the nearest positioned parent — Brigade Blocks containers are positioned, so it stays inside its container), Sticky (sticks while scrolling; needs an offset — Top is set to 0 by default — and stops working if a parent container hides its overflow) or Fixed (stays in place on screen while the page scrolls). | Yes | Normal only |
| Top / Right / Bottom / Left | The distance from each edge, for Relative, Absolute, Sticky and Fixed. | Yes | Normal only |
| Z-index | Which element is in front when two overlap. Higher numbers are in front. | Yes | Normal only |
| Overflow | What happens to content that does not fit: Visible, Hidden, Clip, Auto (scroll bars only when needed) or Scroll. | Yes | Normal only |
Transform
Moves, scales, rotates or skews the element visually without affecting the layout around it. Great in the Hover state for subtle motion.
| Control | What it does | Per device | States |
|---|---|---|---|
| Move X / Move Y | Shifts the element sideways or up and down. | Same on all devices | Every state |
| Scale X / Scale Y | Makes it wider or taller. 1 is the normal size, 1.05 is 5% bigger. | Same on all devices | Every state |
| Rotate (°), Rotate X (°), Rotate Y (°) | Turns the element flat on the page, or in 3D around the horizontal or vertical axis. | Same on all devices | Every state |
| Skew X (°) / Skew Y (°) | Slants the element. | Same on all devices | Every state |
Effects
See-through effects and how smoothly state changes happen.
| Control | What it does | Per device | States |
|---|---|---|---|
| Opacity (%) | 100 is fully visible, 0 is invisible. Lower values let the background show through. | Yes | Every state |
| State transition (ms) | How quickly hover and focus styles animate in, from 0 to 1000 milliseconds (1000 ms = 1 second). 0 turns animation off. Only shown in the Normal state; defaults to 200 ms when you have hover or focus styles. | Same on all devices | Normal only |
| Timing | The feel of that animation: Ease, Linear, Ease in, Ease out or Ease in and out. | Same on all devices | Normal only |
Visibility
Hide an element on certain devices.
| Control | What it does | Per device | States |
|---|---|---|---|
| Show on Desktop / Tablet / Mobile | Switch a device off to hide the block on screens of that size. Hidden blocks stay in the editor (faded) so you can still edit them. The block is still in the page’s HTML — it is hidden with CSS — so do not use this to hide private information. | Per device (one switch each) | Normal only |
Custom attributes
In the block’s Advanced section (Settings tab), not the Styles tab. Adds HTML attributes to the block’s outer element — for analytics tools, testing or accessibility.
| Control | What it does | Per device | States |
|---|---|---|---|
| Attribute name / Attribute value | Allowed names: data-* (e.g. data-track="hero-cta"), title, aria-label, aria-describedby, lang and dir. Up to 10 attributes. Add attribute / Remove attribute manage the list. Anything else is ignored for safety. | Same on all devices | Normal only |
Styling recipes
Make a button darker on hover
Select the Button → Styles → Element Button → State Hover → Colors/Background: pick a darker colour. Optionally Transform → Move Y −2px for a lift.
Give cards a soft shadow that grows on hover
Select the block (e.g. Icon Box) → Element Card → Normal: Box Shadow → Add shadow (Vertical 4, Blur 16, a light grey). Then State Hover: Vertical 12, Blur 32. Adjust Effects → State transition for a slower or faster effect.
Create a pill-shaped label
On a Heading, choose Element Eyebrow → Background colour, Padding 4px 12px, Border → Radius 999px.
Put text over a darkened photo
Select a Container → Background → Type Image → choose the photo; then set Overlay color black and Overlay opacity 50%. Set text colours to white on the blocks inside.
Make the keyboard focus ring match the brand
Select a Button → Element Button → State Focus → Border → Focus indicator: Ring color coral, Width 2px, Offset 3px.
Panels available for each block
A panel is listed when at least one part of the block offers it. Open the block’s guide for the exact controls per element.
Inner blocks such as Accordion Item, Tab or Timeline Item are styled from their parent block, so every item stays consistent.
How styling works behind the scenes
Your choices are saved with the block and turned into a small piece of CSS scoped to that block only (a wpbb-s-… class), so styles never leak to other blocks. Identical styles share one set of rules, unstyled blocks add no CSS, and every value is validated against a strict allow-list before it is output.