Heading attachment

Example

Overview

A heading attachment extends the standard text block heading by allowing a secondary element to appear inline with the heading. This attachment is positioned to the right of the heading and aligned to the top, providing a place for contextual actions or related navigation.

The pattern is useful when an action or piece of information is directly related to the content within the section and should be immediately visible alongside the heading.

Unlike a standard text block, the heading attachment allows small interactive or informational components to sit within the heading row without disrupting the structure of the content below.

When to use

Use a heading attachment when a section requires a closely related action or control that users may need to access immediately when scanning the heading.

Common use cases include:

• Navigation links such as “View all”, “Browse all”, or “See more”
• Dismiss or close actions for removable content
• Contextual actions related to the content in the section
• Status or supporting indicators such as tags or badges

Attachments should relate directly to the section content and support the user’s next logical action.

When not to use

Do not use heading attachments for:

• Actions that are unrelated to the section content
• Primary page actions that should appear elsewhere in the layout
• Large or complex controls that require significant space
• Multiple competing actions that may create visual clutter

If a section requires several controls or complex interaction, consider placing those actions within the content area instead of the heading row.

Anatomy