Skip to content
Tattva

KeyTakeaway

Experimental

A labeled box for the closing point of an answer.

Also known as takeaway, highlight, summary point

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Ending an answer

Key takeaway

Returning customers drove the gain. Look into why people left the smallest plan.
UsageCodeDesignAccessibility

When to use it

Sets the closing point of a long answer apart, so a reader who skims still finds it. A visible label and an icon mark it, so it does not rely on color.

Made of: Icon · Label · Summary

Use it for

  • The one to three sentence conclusion at the end of a long answer.
  • A recommendation that follows from the facts above it.

Not for

  • Warnings, limits or errors: use Callout.
  • A whole overview with sources and feedback: use SummaryCard.

Do and avoid

Key takeaway

The refundable room costs 20 euros more but can be cancelled until Friday.
Do. The closing point stands apart, so skimmers still find it.

Key takeaway

Your passport runs out before the trip. Renew it now.
Avoid. A warning dressed as a takeaway does not read as urgent.

Do

  • Use it once, at the end of a long answer.
  • Write a full sentence that makes sense on its own.
  • Keep the label visible.
  • Put it after the facts it sums up.

Avoid

  • Do not use it for warnings. Use Callout.
  • Do not repeat the whole answer.
  • Do not use several in one answer.
  • Do not hide the label.

On a phone

  • Fills the width of its container, and the text wraps inside the box.
  • The small label is 12px on a touch screen.

Seen in products

  • Our research table lists this as a labeled area. Only the accessibility rules in that table have sources.
  • W3C guidance says not to rely on color alone.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started