The Soames Icon Header block displays a full-width banded header: a logo or icon on the left, and a stack of three lines beside it — a title, a subtitle and a smaller line of detail underneath. It’s built for entries in a list of things that each have a mark and a date, like roles on a resume, milestones on a timeline, credentials, or a run of case studies.

What it’s for

Most content on a Soames page sits inside a centered column. The Icon Header deliberately doesn’t: its grey band runs the entire width of the browser window, edge to edge, which makes it read as a divider between sections rather than as another paragraph. That’s what makes it useful for a long list of entries — each band visually separates one entry from the next.

It’s designed to be followed by whatever describes that entry. A Soames Text List underneath each Icon Header is the usual pairing: the band announces the role and the dates, the list underneath says what you did.

Adding an Icon Header

1. In the editor, click the + button to open the block inserter.
2. Search for Soames Icon Header (you’ll find it in the Soames block category) and insert it.
3. Fill in the four fields described below.

Filling in the fields

• Icon. Click Select icon to open the WordPress Media Library, where you can upload a new image or choose an existing one. A small thumbnail preview appears once it’s set; use Replace icon to swap it or Clear to remove it. If your image already lives somewhere online, you can instead paste its address into the Icon URL field just below the picker — the picker and the URL field control the same image, so you only need one of them.
• Title. The largest line, and the main label for the entry — a job title, a milestone, the name of the thing. It also becomes the icon’s alt text.
• Subtitle. The line beneath the title, set slightly smaller — typically the employer, organisation or client.
• Meta. The smallest line, for the supporting detail that isn’t part of the name — most often a date range, such as Apr 2022 – Present.

How it looks on the site

The icon sits in a white tile against the grey band, and is shown at up to 116 pixels wide. Anything larger is scaled down to fit, so a big logo won’t overwhelm the text beside it; anything smaller is left at its own size. The three lines stack tightly together as a single group, rather than being spaced apart like ordinary headings.

On a narrow screen the icon and the text stack vertically instead of sitting side by side, and the band still runs the full width.

Leaving a field blank

The block always renders all three text lines, so clearing one leaves a gap where it would have been rather than closing the space up. It’s best to fill in all four fields. If an entry genuinely has nothing for one line, consider putting the detail you do have in a different field rather than leaving one empty — for example, moving a date up into the subtitle.

Clearing the icon behaves the same way: the white tile stays, just without an image in it.

Tips

• Square logos work best. The tile is designed around a roughly square mark, so a very wide wordmark will look small next to a square one.
• Transparent PNG or SVG logos sit most cleanly against the white tile.
• Keep each line to one line of text. The three lines are meant to be scanned quickly, not read as sentences.
• Be consistent across a series — if one entry’s meta line is a date range, they should all be, or the column will look ragged.
• Because the band is full width, don’t put an Icon Header inside a column or group block that constrains it — it’s meant to break out.
• Use Preview to check a run of entries together before you publish; they’re easier to judge as a set than one at a time.
• As with all edits, your changes go live on the public site about a minute after you publish.