Content module
Image Box block
An image card with a title, text and link — stacked, or with the text over the image on a dark scrim.
Overview
The Image Box combines an image, a title, a short text and an optional link into one card. In the Stacked layout the text sits below the image; in the Overlay layout it sits on top of the image with a dark gradient (a “scrim”) behind it so it stays readable. When linked, the whole card can be clicked.
At a glance
- Block name
wpbb/image-box- Module
- Content
- Find it by searching
- Image Box
- Loads JavaScript on the site
- No
When and why to use it
- Services, destinations, product categories or case studies shown as visual cards.
- Rows of clickable teasers leading to other pages.
Example scenarios
- Travel site: three Overlay cards with destination photos and titles, each linking to a destination page.
- Agency: Stacked cards with a project image, name and “View case study” link.
See it in action
These are live examples: real Image Box 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.
How to add the Image Box block
- 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).
- 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.
- Search for the block. Type Image Box in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
- Insert it. Click Image Box in the results. The block appears with an image area, a title and a text field.
- 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.
- Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
- 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)
Image
- What it does
- The card’s picture.
- What to enter or choose
- Any image from the Media Library or a new upload.
- Default
- Empty
- How to use it
- Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
- When to use it
- Almost always — the card also works without one, showing only text.
- Example
- A photo of the service.
- Result
- The image fills the top of the card (or the whole card in Overlay).
- Good to know
- Change it with Replace in the block toolbar.
Title
- What it does
- The card’s heading.
- What to enter or choose
- A few words.
- 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
- “Brand identity”.
- Result
- Shown in the chosen Title tag. Bold and italic are allowed.
Text
- What it does
- A short description.
- 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
- To explain the card.
- Example
- “Logos, colours and guidelines your team can use.”
- Result
- A paragraph under the title. Empty text is hidden.
Block toolbar
Align
- What it does
- Aligns the title, text and link.
- What to enter or choose
- One of: Align left, Align center.
- Default
- Align left
- How to use it
- Select the block; the button is in the toolbar that appears above it.
- Example
- Centre for Overlay cards.
- Result
- The text moves.
Replace
- What it does
- Swaps the image.
- What to enter or choose
- Upload or choose another image.
- How to use it
- Select the block; the button is in the toolbar that appears above it.
- Example
- Use a newer photo.
- Result
- The new image keeps the card’s settings.
Settings panel: Layout
Style
- What it does
- Where the text sits.
- What to enter or choose
- One of: Stacked, Overlay.
- Default
- Stacked
- How to use it
- Click one of the buttons in the group.
- When to use it
- Stacked for longer text and clean cards; Overlay for bold, visual tiles with short text.
- Example
- Overlay for destination tiles.
- Result
- Overlay places the text over the image with a dark gradient behind it.
Image aspect ratio
- What it does
- The shape of the image area.
- What to enter or choose
- One of: Original, 1:1, 4:3, 3:2, 16:9, 3:4.
- Default
- 4:3
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Use the same ratio for cards in a row so they line up.
- Example
- 3:4 for portrait tiles.
- Result
- The image is cropped to that shape.
Title tag
- What it does
- The HTML element of the title.
- What to enter or choose
- One of: H2, H3, H4, H5, H6, p.
- Default
- H3
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Match the page structure — usually one level below the section heading (H3 under an H2).
- Example
- H3.
- Result
- Only the structure changes; the look stays the same.
Settings panel: Image
Alternative text
- What it does
- Describes the image for screen-reader users.
- What to enter or choose
- A short description, or empty if the image only decorates the card.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- When the image adds information the title does not.
- Example
- “Sunset over the Lisbon rooftops.”
- Result
- Read aloud by screen readers.
Resolution
- What it does
- Which of the image sizes WordPress created on upload is used (for example Thumbnail, Medium, Large or Full Size).
- What to enter or choose
- One of the sizes available for the chosen image.
- Default
- large
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Pick the smallest size that still looks sharp at the width the image is shown. Large suits most content; Full Size is only needed for very wide images.
- Example
- “Medium” for an image shown in a narrow column.
- Result
- Smaller sizes make the page load faster; too small looks blurry.
- Good to know
- Only shown once an image is chosen.
Settings panel: Link
Link
- What it does
- The page the card goes to when clicked.
- What to enter or choose
- A web address (https://…) or a page, post or file on your site. Start typing a page title to search your site.
- Default
- Empty
- How to use it
- Click the link button, then paste an address or search for a page on your site and press Enter.
- When to use it
- Almost always — a call to action should lead somewhere.
- Example
- Type “Contact” and pick your Contact page, or paste
https://example.com/pricing. - Result
- The card becomes a real link.
- Good to know
- Two extra switches appear once a link is set.
Open in new tabShown when a link is set
- What it does
- Opens the link in a new browser tab.
- 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 links to other websites or documents (PDFs) you do not want visitors to lose your page for.
- Example
- A link to your booking platform.
- Result
- The link gets
target="_blank"andrel="noopener"for security, and screen readers hear “(opens in a new tab)”. - Good to know
- Avoid it for normal links inside your own site — visitors can choose to open a new tab themselves.
Add rel="nofollow"Shown when a link is set
- What it does
- Tells search engines not to pass ranking credit to the linked page.
- 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 paid, sponsored or untrusted links.
- Example
- An affiliate link to a product.
- Result
- The link gets
rel="nofollow". Visitors see no difference.
Link textShown when a link is set
- What it does
- Text for a separate link line at the bottom of the card.
- What to enter or choose
- Short action text, or empty.
- Default
- Empty
- How to use it
- Type into the text field. Changes appear in the preview right away.
- When to use it
- Leave it empty to make the whole card clickable through its title. Fill it in to show an explicit link such as “Read more”.
- Example
- “View case study”.
- Result
- Empty: the entire card is one link. Filled: a link line appears at the bottom and only it is clickable.
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:
- Element — which part of the block to style.
- State — Normal, or a state such as Hover (only the states the part supports are offered).
- 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 Image Box offers.
Element: Card
The whole card (shown as “Card”) — background, border, corners, shadow, spacing. It has a Hover state.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Background | Type | — | Normal, Hover |
| Color / Gradient | — | Normal, Hover | |
| Image | — | Normal | |
| Border | Border type | — | Normal, Hover |
| Border | — | Normal, Hover | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal, Hover |
| Shadow layers | — | Normal, Hover | |
| Spacing | Margin | Yes | Normal |
| Padding | Yes | Normal | |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Block alignment | Yes | Normal | |
| Position | Position | Yes | Normal |
| Top / Right / Bottom / Left | Yes | Normal | |
| Z-index | Yes | Normal | |
| Overflow | Yes | Normal | |
| Transform | Move X / Move Y | — | Normal, Hover |
| Scale X / Scale Y | — | Normal, Hover | |
| Rotate (°), Rotate X (°), Rotate Y (°) | — | Normal, Hover | |
| Skew X (°) / Skew Y (°) | — | Normal, Hover | |
| Effects | Opacity (%) | Yes | Normal, Hover |
| State transition (ms) | — | Normal | |
| Timing | — | Normal | |
| Visibility | Show on Desktop / Tablet / Mobile | — | Normal |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Element: Image
The image area.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Border | Radius | Yes | Normal |
| Spacing | Margin | Yes | Normal |
| Sizing | Width | Yes | Normal |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Effects | Opacity (%) | Yes | Normal |
States: Normal only.
Element: Content area
The text area below or over the image.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Background | Type | — | Normal |
| Color / Gradient | — | Normal | |
| Image | — | Normal | |
| Spacing | Padding | Yes | Normal |
States: Normal only.
Element: Title
The title.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover | |
| Colors | Text | — | Normal, Hover |
States for this part:
- Hover — When the mouse pointer is over the whole card — so this part changes as soon as visitors point at the card.
Element: Text
The description.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal | |
| Colors | Text | — | Normal |
States: Normal only.
Element: Link
The optional link line.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover | |
| Colors | Text | — | Normal, Hover |
States for this part:
- Hover — When the mouse pointer is over the whole card — so this part changes as soon as visitors point at the card.
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: Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%), Font size, Line height, Letter spacing, Alignment.
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#pricingat 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,langordirattributes. See Custom attributes. - State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
How it works on your site
A card with the image, a heading and text. When linked without Link text, a single link covers the whole card so visitors can click anywhere. No JavaScript.
Accessibility
- With a card-wide link, screen readers announce the title as the link text — make the title meaningful.
- In Overlay cards, keep text short; the gradient keeps it readable on most images.
Tips and best practices
- Place several Image Boxes in a Container set to Grid to build a card grid.
Limitations and notes
- One image per card.
- The whole-card link needs a title.