Skip to content

Header iterations

Nine ways to top a campaign.

The same complete campaign in each. The question is how little room the title, the actions and the status can take before the tabs.

A · Current

Overline, title, lead, five labelled buttons, a banner card, tabs. Three bands before the content starts.

Campaign

Acme NotesComplete

Reels · US software developers who take notes while coding · Developer tools · Balanced

B · Icons

The same header with the four secondary actions as icon buttons behind tooltips. Refresh carries its count as a small badge. The banner becomes a line under the meta.

Campaign

Acme NotesComplete

Reels · US software developers who take notes while coding · Developer tools · Balanced

Complete. 70 posts, 759.05K views.

C · Tab toolbar

The header is only the title and meta. The icon group sits at the right of the tab row, where it stays in view on every tab.

Campaign

Acme NotesComplete

Reels · US software developers who take notes while coding · Developer tools · Balanced

Complete. 70 posts, 759.05K views.

D · One line

Title and actions share one row. Meta as caps under it, no overline, no lead.

Acme NotesComplete

Reels·US software developers who take notes while coding·Developer tools·Balanced

Complete. 70 posts, 759.05K views.

D1 · Spec line

Overline back. The description as caps key and value pairs. State stays in the badge; no figures.

Campaign

Acme NotesComplete

PlatformReelsAudienceUS software developers who take notes while codingCategoryDeveloper toolsPreferenceBalanced

D2 · Chips

Overline back. The fixed choices as outline chips with the audience as a sentence. State stays in the badge; no figures.

Campaign

Acme NotesComplete

ReelsDeveloper toolsBalancedfor US software developers who take notes while coding

D3 · Sentence and strip

Overline back. The description as one plain sentence. State stays in the badge; no figures.

Campaign

Acme NotesComplete

Reels for US software developers who take notes while coding. Developer tools, balanced distribution.

E · Menu

One primary button and a kebab. Refresh, pause, preference and CSV live in the menu. The status is the lead.

Campaign

Acme NotesComplete

Complete. 70 posts, 759.05K views.

Reels · US software developers who take notes while coding · Developer tools · Balanced

F · Quiet

Ghost icons, no outlines but the tab rule. Status and meta share one small line.

Acme Notes

Complete

Complete. 70 posts, 759.05K views. Reels · US software developers who take notes while coding · Developer tools · Balanced