Edit Feed

Name

Also known as (comma separated)

Brief definition Continuously updated content stream.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Heading", "default": "Latest updates" }, { "id": "state", "type": "select", "label": "State", "default": "loaded", "options": [ "loaded", "loading", "empty" ] }, { "id": "density", "type": "select", "label": "Density", "default": "comfortable", "options": [ "comfortable", "compact" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showTags", "type": "toggle", "label": "Show category tags", "default": true } ]

Templates (JSON object keyed by format) { "html": "<section class=\"feed-demo feed-demo--{{state}} feed-demo--{{density}}\" style=\"--accent:{{accent}};\">\n <h2 class=\"feed-demo__heading\">{{title}}</h2>\n <ul class=\"feed-demo__list\">\n <li class=\"feed-demo__item\">\n <div class=\"feed-demo__item-head\">\n <p class=\"feed-demo__item-title\">New export formats are live</p>\n {{#if showTags}}<span class=\"feed-demo__tag\">Product</span>{{/if}}\n </div>\n <p class=\"feed-demo__item-body\">Specimens can now be downloaded as HTML, Tailwind or React straight from the toolbar.</p>\n <time class=\"feed-demo__time\" datetime=\"2026-08-18T08:00:00Z\">18 Aug, 8:00am</time>\n </li>\n <li class=\"feed-demo__item\">\n <div class=\"feed-demo__item-head\">\n <p class=\"feed-demo__item-title\">Glossary search is faster</p>\n {{#if showTags}}<span class=\"feed-demo__tag\">Performance</span>{{/if}}\n </div>\n <p class=\"feed-demo__item-body\">Fuzzy search across every entry now returns results in under 50ms.</p>\n <time class=\"feed-demo__time\" datetime=\"2026-08-16T13:20:00Z\">16 Aug, 1:20pm</time>\n </li>\n <li class=\"feed-demo__item\">\n <div class=\"feed-demo__item-head\">\n <p class=\"feed-demo__item-title\">New contributor: Maya Singh</p>\n {{#if showTags}}<span class=\"feed-demo__tag\">Community</span>{{/if}}\n </div>\n <p class=\"feed-demo__item-body\">Maya joined the glossary team and shipped her first three entries this week.</p>\n <time class=\"feed-demo__time\" datetime=\"2026-08-14T09:05:00Z\">14 Aug, 9:05am</time>\n </li>\n </ul>\n <div class=\"feed-demo__skeleton\" aria-hidden=\"true\">\n <div class=\"feed-demo__skel-item\"><span class=\"feed-demo__skel-line feed-demo__skel-line--title\"></span><span class=\"feed-demo__skel-line\"></span><span class=\"feed-demo__skel-line feed-demo__skel-line--short\"></span></div>\n <div class=\"feed-demo__skel-item\"><span class=\"feed-demo__skel-line feed-demo__skel-line--title\"></span><span class=\"feed-demo__skel-line\"></span><span class=\"feed-demo__skel-line feed-demo__skel-line--short\"></span></div>\n <div class=\"feed-demo__skel-item\"><span class=\"feed-demo__skel-line feed-demo__skel-line--title\"></span><span class=\"feed-demo__skel-line\"></span><span class=\"feed-demo__skel-line feed-demo__skel-line--short\"></span></div>\n </div>\n <div class=\"feed-demo__empty\">\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n <circle cx=\"24\" cy=\"24\" r=\"18\" fill=\"none\" stroke=\"#241430\" stroke-width=\"2\"/>\n <path d=\"M17 24h14M24 17v14\" stroke=\"#241430\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\".35\"/>\n </svg>\n <p class=\"feed-demo__empty-title\">Nothing here yet</p>\n <p class=\"feed-demo__empty-sub\">New posts will appear here as they're published.</p>\n </div>\n</section>\n<style>\n.feed-demo { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143022; border-radius: 12px; padding: 18px; box-sizing: border-box; }\n.feed-demo__heading { margin: 0 0 12px; font-size: 16px; font-weight: 600; }\n.feed-demo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }\n.feed-demo--compact .feed-demo__list { gap: 8px; }\n.feed-demo__item { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }\n.feed-demo--compact .feed-demo__item { padding: 2px 0 2px 10px; }\n.feed-demo__item-head { display: flex; align-items: center; gap: 8px; }\n.feed-demo__item-title { margin: 0; font-weight: 600; font-size: 14px; }\n.feed-demo__tag { font-size: 10px; font-weight: 600; text-transform: uppercase; background: #24143012; padding: 2px 7px; border-radius: 999px; }\n.feed-demo__item-body { margin: 4px 0; font-size: 13px; color: #241430cc; }\n.feed-demo--compact .feed-demo__item-body { display: none; }\n.feed-demo__time { font-size: 11px; color: #24143099; }\n.feed-demo__skeleton, .feed-demo__empty { display: none; }\n.feed-demo__skel-item { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 6px 12px; border-left: 3px solid #24143014; margin-bottom: 12px; }\n.feed-demo__skel-line { display: block; height: 9px; border-radius: 4px; background: linear-gradient(90deg, #24143012 25%, #24143024 37%, #24143012 63%); background-size: 400% 100%; width: 90%; }\n@media (prefers-reduced-motion: no-preference) {\n.feed-demo__skel-line { animation: feed-shimmer .22s ease infinite; }\n}\n.feed-demo__skel-line--title { width: 55%; height: 11px; }\n.feed-demo__skel-line--short { width: 35%; }\n@keyframes feed-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }\n.feed-demo__empty { text-align: center; padding: 24px 0; }\n.feed-demo__empty-title { margin: 8px 0 4px; font-weight: 600; }\n.feed-demo__empty-sub { margin: 0; font-size: 13px; color: #241430aa; }\n.feed-demo--loading .feed-demo__list { display: none; }\n.feed-demo--loading .feed-demo__skeleton { display: block; }\n.feed-demo--empty .feed-demo__list { display: none; }\n.feed-demo--empty .feed-demo__empty { display: block; }\n</style>", "tailwind": "<section class=\"feed-tw feed-tw--{{state}} feed-tw--{{density}} font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143022] rounded-xl p-[18px] box-border\" style=\"--accent:{{accent}};\">\n <h2 class=\"m-0 mb-3 text-base font-semibold\">{{title}}</h2>\n <ul class=\"feed-tw__list list-none m-0 p-0 flex flex-col gap-3.5\">\n <li class=\"feed-tw__item pl-3 py-1\" style=\"border-left: 3px solid {{accent}};\">\n <div class=\"flex items-center gap-2\">\n <p class=\"m-0 font-semibold text-sm\">New export formats are live</p>\n {{#if showTags}}<span class=\"text-[10px] font-semibold uppercase bg-[#24143012] px-1.5 py-0.5 rounded-full\">Product</span>{{/if}}\n </div>\n <p class=\"feed-tw__body my-1 text-[13px] text-[#241430]/80\">Specimens can now be downloaded as HTML, Tailwind or React straight from the toolbar.</p>\n <time class=\"text-[11px] text-[#241430]/60\" datetime=\"2026-08-18T08:00:00Z\">18 Aug, 8:00am</time>\n </li>\n <li class=\"feed-tw__item pl-3 py-1\" style=\"border-left: 3px solid {{accent}};\">\n <div class=\"flex items-center gap-2\">\n <p class=\"m-0 font-semibold text-sm\">Glossary search is faster</p>\n {{#if showTags}}<span class=\"text-[10px] font-semibold uppercase bg-[#24143012] px-1.5 py-0.5 rounded-full\">Performance</span>{{/if}}\n </div>\n <p class=\"feed-tw__body my-1 text-[13px] text-[#241430]/80\">Fuzzy search across every entry now returns results in under 50ms.</p>\n <time class=\"text-[11px] text-[#241430]/60\" datetime=\"2026-08-16T13:20:00Z\">16 Aug, 1:20pm</time>\n </li>\n <li class=\"feed-tw__item pl-3 py-1\" style=\"border-left: 3px solid {{accent}};\">\n <div class=\"flex items-center gap-2\">\n <p class=\"m-0 font-semibold text-sm\">New contributor: Maya Singh</p>\n {{#if showTags}}<span class=\"text-[10px] font-semibold uppercase bg-[#24143012] px-1.5 py-0.5 rounded-full\">Community</span>{{/if}}\n </div>\n <p class=\"feed-tw__body my-1 text-[13px] text-[#241430]/80\">Maya joined the glossary team and shipped her first three entries this week.</p>\n <time class=\"text-[11px] text-[#241430]/60\" datetime=\"2026-08-14T09:05:00Z\">14 Aug, 9:05am</time>\n </li>\n </ul>\n <div class=\"feed-tw__skeleton\" aria-hidden=\"true\">\n <div class=\"feed-tw__skel-item\"><span class=\"feed-tw__skel-line feed-tw__skel-line--title\"></span><span class=\"feed-tw__skel-line\"></span><span class=\"feed-tw__skel-line feed-tw__skel-line--short\"></span></div>\n <div class=\"feed-tw__skel-item\"><span class=\"feed-tw__skel-line feed-tw__skel-line--title\"></span><span class=\"feed-tw__skel-line\"></span><span class=\"feed-tw__skel-line feed-tw__skel-line--short\"></span></div>\n <div class=\"feed-tw__skel-item\"><span class=\"feed-tw__skel-line feed-tw__skel-line--title\"></span><span class=\"feed-tw__skel-line\"></span><span class=\"feed-tw__skel-line feed-tw__skel-line--short\"></span></div>\n </div>\n <div class=\"feed-tw__empty text-center py-6\">\n <svg viewBox=\"0 0 48 48\" width=\"40\" height=\"40\" aria-hidden=\"true\">\n <circle cx=\"24\" cy=\"24\" r=\"18\" fill=\"none\" stroke=\"#241430\" stroke-width=\"2\"/>\n <path d=\"M17 24h14M24 17v14\" stroke=\"#241430\" stroke-width=\"2\" stroke-linecap=\"round\" opacity=\".35\"/>\n </svg>\n <p class=\"mt-2 mb-1 font-semibold\">Nothing here yet</p>\n <p class=\"m-0 text-[13px] text-[#241430]/70\">New posts will appear here as they're published.</p>\n </div>\n</section>\n<style>\n.feed-tw--compact .feed-tw__list { gap: 8px; }\n.feed-tw--compact .feed-tw__item { padding: 2px 0 2px 10px; }\n.feed-tw--compact .feed-tw__body { display: none; }\n.feed-tw__skeleton, .feed-tw__empty { display: none; }\n.feed-tw__skel-item { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 6px 12px; border-left: 3px solid #24143014; margin-bottom: 12px; }\n.feed-tw__skel-line { display: block; height: 9px; border-radius: 4px; background: linear-gradient(90deg, #24143012 25%, #24143024 37%, #24143012 63%); background-size: 400% 100%; width: 90%; }\n@media (prefers-reduced-motion: no-preference) {\n.feed-tw__skel-line { animation: feed-tw-shimmer .22s ease infinite; }\n}\n.feed-tw__skel-line--title { width: 55%; height: 11px; }\n.feed-tw__skel-line--short { width: 35%; }\n@keyframes feed-tw-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }\n.feed-tw--loading .feed-tw__list { display: none; }\n.feed-tw--loading .feed-tw__skeleton { display: block; }\n.feed-tw--empty .feed-tw__list { display: none; }\n.feed-tw--empty .feed-tw__empty { display: block; }\n</style>", "react": "export function Feed({\n title = \"{{title}}\",\n state = \"{{state}}\",\n density = \"{{density}}\",\n accent = \"{{accent}}\",\n showTags = {{showTags}},\n}) {\n const posts = [\n { title: \"New export formats are live\", tag: \"Product\", body: \"Specimens can now be downloaded as HTML, Tailwind or React straight from the toolbar.\", iso: \"2026-08-18T08:00:00Z\", when: \"18 Aug, 8:00am\" },\n { title: \"Glossary search is faster\", tag: \"Performance\", body: \"Fuzzy search across every entry now returns results in under 50ms.\", iso: \"2026-08-16T13:20:00Z\", when: \"16 Aug, 1:20pm\" },\n { title: \"New contributor: Maya Singh\", tag: \"Community\", body: \"Maya joined the glossary team and shipped her first three entries this week.\", iso: \"2026-08-14T09:05:00Z\", when: \"14 Aug, 9:05am\" },\n ];\n const wrap = { fontFamily: \"system-ui, sans-serif\", fontSize: 14, lineHeight: 1.5, color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143022\", borderRadius: 12, padding: 18, boxSizing: \"border-box\" };\n if (state === \"loading\") {\n return (\n <div style={wrap}>\n <h2 style={{ margin: \"0 0 12px\", fontSize: 16, fontWeight: 600 }}>{title}</h2>\n {[0, 1, 2].map((i) => (\n <div key={i} style={{ display: \"flex\", flexDirection: \"column\", gap: 6, padding: \"6px 0 6px 12px\", borderLeft: \"3px solid #24143014\", marginBottom: 12 }}>\n <span style={{ display: \"block\", height: 11, width: \"55%\", borderRadius: 4, background: \"#24143020\" }} />\n <span style={{ display: \"block\", height: 9, width: \"90%\", borderRadius: 4, background: \"#24143016\" }} />\n <span style={{ display: \"block\", height: 9, width: \"35%\", borderRadius: 4, background: \"#24143016\" }} />\n </div>\n ))}\n </div>\n );\n }\n if (state === \"empty\") {\n return (\n <div style={{ ...wrap, textAlign: \"center\", padding: \"24px 18px\" }}>\n <p style={{ margin: \"8px 0 4px\", fontWeight: 600 }}>Nothing here yet</p>\n <p style={{ margin: 0, fontSize: 13, color: \"#241430aa\" }}>New posts will appear here as they're published.</p>\n </div>\n );\n }\n const gap = density === \"compact\" ? 8 : 14;\n const compact = density === \"compact\";\n return (\n <div style={wrap}>\n <h2 style={{ margin: \"0 0 12px\", fontSize: 16, fontWeight: 600 }}>{title}</h2>\n <ul style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", flexDirection: \"column\", gap }}>\n {posts.map((p) => (\n <li key={p.title} style={{ borderLeft: `3px solid ${accent}`, padding: compact ? \"2px 0 2px 10px\" : \"4px 0 4px 12px\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n <p style={{ margin: 0, fontWeight: 600, fontSize: 14 }}>{p.title}</p>\n {showTags && (\n <span style={{ fontSize: 10, fontWeight: 600, textTransform: \"uppercase\", background: \"#24143012\", padding: \"2px 7px\", borderRadius: 999 }}>{p.tag}</span>\n )}\n </div>\n {!compact && (\n <p style={{ margin: \"4px 0\", fontSize: 13, color: \"#241430cc\" }}>{p.body}</p>\n )}\n <time style={{ fontSize: 11, color: \"#24143099\" }} dateTime={p.iso}>{p.when}</time>\n </li>\n ))}\n </ul>\n </div>\n );\n}" }