nuxt-x-affiliate
Key Takeaways
Bulleted "key takeaways" summary at the top of an article — list or grid, primary or subtle icon variant.
Key Takeaways
The XAFKeyTakeaways component renders a bulleted summary block at the top of an article ("TL;DR in 5 bullets"). Helps both readers (scannable summary) and search engines (featured-snippet gold).
Components
<XAFKeyTakeaways />
<XAFKeyTakeaways
title="Key takeaways"
layout="list"
variant="primary"
:items="[
'The MX Keys S is the best low-profile wireless keyboard for typists.',
{ text: 'Battery life is 10 days with backlight on.', icon: '🔋' },
{ text: 'It does NOT have hot-swappable switches.', icon: '⚠️' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | (string | KeyTakeaway)[] | required | Plain strings or { text, icon? } objects. |
title | string | "Key Takeaways" | Section heading. |
layout | 'list' | 'grid' | 'list' | Vertical list or 2-column grid. |
variant | 'primary' | 'subtle' | 'subtle' | primary uses filled colored circles; subtle uses outlined + marks. |
Place this component at the very top of the article (after the hero, before the body) so the summary is the first thing the reader sees.
AI Context
component: XAFKeyTakeaways
package: "@xenterprises/nuxt-x-affiliate"
use-when: Bulleted key-takeaways summary at the top of an article in list or grid, primary or subtle variant.