Edit Digest

Name

Also known as (comma separated)

Brief definition Grouped notification summary.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Digest title", "default": "Product updates" }, { "id": "period", "type": "select", "label": "Period", "default": "weekly", "options": [ "daily", "weekly", "monthly" ] }, { "id": "itemCount", "type": "number", "label": "Item count", "default": 5, "min": 1, "max": 20, "step": 1 }, { "id": "highlight", "type": "text", "label": "Highlighted contributor", "default": "Priya Shah" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] }, { "id": "expanded", "type": "toggle", "label": "Expanded", "default": false } ]

Templates (JSON object keyed by format) { "html": "<details class='digest' {{#if expanded}}open{{/if}} style='border-left-color:{{accent}};'>\n <summary class='digest__summary'>{{title}} · <span class='digest__period'>{{period}}</span> digest — {{itemCount}} updates</summary>\n <ul class='digest__list'>\n <li><strong>{{highlight}}</strong> shipped the new roadmap view</li>\n <li>3 comments resolved on the design spec</li>\n <li>Weekly usage rose 12% across active teams</li>\n </ul>\n</details>\n<style>\n.digest { max-width: 420px; padding: 14px 16px; background: #FAF7F2; color: #241430; border-radius: 10px; border-left: 4px solid; box-shadow: 0 6px 18px rgba(36,20,48,.12); font: 14px/1.5 system-ui, sans-serif; box-sizing: border-box; }\n.digest__summary { cursor: pointer; font-weight: 600; list-style: none; }\n.digest__summary::-webkit-details-marker { display: none; }\n.digest__summary::before { content: '\\25b8'; display: inline-block; margin-right: 6px; }\n@media (prefers-reduced-motion: no-preference) {\n.digest__summary::before { transition: transform .15s ease; }\n}\n.digest[open] .digest__summary::before { transform: rotate(90deg); }\n.digest__period { text-transform: capitalize; }\n.digest__list { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: #241430cc; }\n.digest__list li { margin-bottom: 4px; }\n</style>", "tailwind": "<details class='max-w-[420px] p-3.5 bg-[#FAF7F2] text-[#241430] rounded-lg shadow-md font-sans text-sm box-border border-l-4 digest-tw' {{#if expanded}}open{{/if}} style='border-left-color:{{accent}}'>\n <summary class='cursor-pointer font-semibold list-none digest-tw__summary'>{{title}} · <span class='capitalize'>{{period}}</span> digest — {{itemCount}} updates</summary>\n <ul class='mt-2.5 mb-0 pl-5 text-[13px] text-[#241430]/80'>\n <li class='mb-1'><strong>{{highlight}}</strong> shipped the new roadmap view</li>\n <li class='mb-1'>3 comments resolved on the design spec</li>\n <li class='mb-1'>Weekly usage rose 12% across active teams</li>\n </ul>\n</details>\n<style>\n.digest-tw__summary::-webkit-details-marker { display: none; }\n.digest-tw__summary::before { content: '\\25b8'; display: inline-block; margin-right: 6px; }\ndetails[open] .digest-tw__summary::before { transform: rotate(90deg); }\n</style>", "react": "export function Digest({\n title = '{{title}}',\n period = '{{period}}',\n itemCount = {{itemCount}},\n highlight = '{{highlight}}',\n accent = '{{accent}}',\n expanded = {{expanded}},\n}) {\n return (\n <details open={expanded} style={{ maxWidth: 420, padding: '14px 16px', background: '#FAF7F2', color: '#241430', borderRadius: 10, borderLeft: `4px solid ${accent}`, boxShadow: '0 6px 18px rgba(36,20,48,.12)', fontFamily: 'system-ui, sans-serif', fontSize: 14 }}>\n <summary style={{ cursor: 'pointer', fontWeight: 600, listStyle: 'none' }}>\n {title} · <span style={{ textTransform: 'capitalize' }}>{period}</span> digest — {itemCount} updates\n </summary>\n <ul style={{ margin: '10px 0 0', paddingLeft: 20, fontSize: 13, color: '#241430cc' }}>\n <li style={{ marginBottom: 4 }}><strong>{highlight}</strong> shipped the new roadmap view</li>\n <li style={{ marginBottom: 4 }}>3 comments resolved on the design spec</li>\n <li style={{ marginBottom: 4 }}>Weekly usage rose 12% across active teams</li>\n </ul>\n </details>\n );\n}" }