Digest

Grouped notification summary.

html

<details class='digest'  style='border-left-color:#D9C8F0;'>
  <summary class='digest__summary'>Product updates · <span class='digest__period'>weekly</span> digest — 5 updates</summary>
  <ul class='digest__list'>
    <li><strong>Priya Shah</strong> shipped the new roadmap view</li>
    <li>3 comments resolved on the design spec</li>
    <li>Weekly usage rose 12% across active teams</li>
  </ul>
</details>
<style>
.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; }
.digest__summary { cursor: pointer; font-weight: 600; list-style: none; }
.digest__summary::-webkit-details-marker { display: none; }
.digest__summary::before { content: '\25b8'; display: inline-block; margin-right: 6px; }
@media (prefers-reduced-motion: no-preference) {
.digest__summary::before { transition: transform .15s ease; }
}
.digest[open] .digest__summary::before { transform: rotate(90deg); }
.digest__period { text-transform: capitalize; }
.digest__list { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: #241430cc; }
.digest__list li { margin-bottom: 4px; }
</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'  style='border-left-color:#D9C8F0'>
  <summary class='cursor-pointer font-semibold list-none digest-tw__summary'>Product updates · <span class='capitalize'>weekly</span> digest — 5 updates</summary>
  <ul class='mt-2.5 mb-0 pl-5 text-[13px] text-[#241430]/80'>
    <li class='mb-1'><strong>Priya Shah</strong> shipped the new roadmap view</li>
    <li class='mb-1'>3 comments resolved on the design spec</li>
    <li class='mb-1'>Weekly usage rose 12% across active teams</li>
  </ul>
</details>
<style>
.digest-tw__summary::-webkit-details-marker { display: none; }
.digest-tw__summary::before { content: '\25b8'; display: inline-block; margin-right: 6px; }
details[open] .digest-tw__summary::before { transform: rotate(90deg); }
</style>

react

export function Digest({
  title = 'Product updates',
  period = 'weekly',
  itemCount = 5,
  highlight = 'Priya Shah',
  accent = '#D9C8F0',
  expanded = false,
}) {
  return (
    <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 }}>
      <summary style={{ cursor: 'pointer', fontWeight: 600, listStyle: 'none' }}>
        {title} · <span style={{ textTransform: 'capitalize' }}>{period}</span> digest — {itemCount} updates
      </summary>
      <ul style={{ margin: '10px 0 0', paddingLeft: 20, fontSize: 13, color: '#241430cc' }}>
        <li style={{ marginBottom: 4 }}><strong>{highlight}</strong> shipped the new roadmap view</li>
        <li style={{ marginBottom: 4 }}>3 comments resolved on the design spec</li>
        <li style={{ marginBottom: 4 }}>Weekly usage rose 12% across active teams</li>
      </ul>
    </details>
  );
}