About this block

Inline Suggestion Card is the ghost-text accept pattern: an editor surface for an H2 Strategy Update draft shows the user typed text in foreground weight followed by the AI completion in muted italic, strengthening our integration ecosystem by partnering with three new platforms before year end, with a blinking cursor at the end. Tab to accept and Esc to dismiss are rendered as keyboard badges in the action bar. An authorship note below reads: Suggestions are drafts only. You are the author. Review every accepted completion before publishing.

TYPED and SUGGESTION are string constants; the ghost span and cursor are plain inline elements so the open state is a faithful static representation of the real interaction.

When to use

Reach for this block in a text editor or rich document feature where an AI writes a completion for the user to accept or discard. Wire Tab and Esc to your suggestion accept and clear handlers and swap the SUGGESTION constant for your model response.

A natural flow around it on an Application Pro page:

Before

• App shell
• Forms

After

• Feedback thumbs row
• Activity

What you can display

One strong use is the inline document compose helper. Other suggestion surfaces:

• Subject line helper. The same ghost-text pattern in a single-line email subject field.
• Code completion. Monospace editor surface with the suggestion rendered in a comment-weight token color.
• Search query expansion. A search bar that suggests a broadened query in muted text as the user types.

Tip: the authorship note is the line that keeps the feature honest; omitting it shifts perceived responsibility to the AI and that matters when the text will be published.