Edit aside

Name

Also known as (comma separated)

Brief definition Complementary content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Related reading" }, { "id": "body", "type": "text", "label": "Body", "default": "Three more pieces on the same topic, tangential to the main text but worth a look." }, { "id": "variant", "type": "select", "label": "Variant", "default": "sidebar", "options": [ "sidebar", "pullquote" ] }, { "id": "accent", "type": "color", "label": "Accent", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"aside-demo\">\n <p class=\"aside-demo__main\">Main article text flows here, continuing for several paragraphs while this complementary note sits to the side.</p>\n <aside class=\"aside aside--{{variant}}\" style=\"--accent:{{accent}};\">\n <p class=\"aside__label\">Aside</p>\n <h3 class=\"aside__heading\">{{heading}}</h3>\n <p class=\"aside__body\">{{body}}</p>\n </aside>\n</div>\n<style>\n.aside-demo { display: flex; gap: 20px; width: 460px; font: 15px/1.55 system-ui, sans-serif; color: #241430; }\n.aside-demo__main { flex: 1 1 auto; margin: 0; color: #241430aa; }\n.aside { flex: 0 0 180px; background: #FAF7F2; padding: 16px 18px; border-radius: 10px; }\n.aside--sidebar { border-left: 4px solid var(--accent); }\n.aside--pullquote { border: none; background: transparent; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); font-style: italic; }\n.aside__label { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }\n.aside__heading { margin: 0 0 6px; font-size: 15px; font-weight: 700; }\n.aside__body { margin: 0; font-size: 13px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"flex gap-5 w-[460px] font-sans text-[15px] leading-relaxed text-[#241430]\">\n <p class=\"flex-1 m-0 text-[#241430]/65\">Main article text flows here, continuing for several paragraphs while this complementary note sits to the side.</p>\n <aside class=\"aside-tw aside-tw--{{variant}} flex-none w-[180px] bg-[#FAF7F2] px-[18px] py-4 rounded-[10px]\" style=\"--accent:{{accent}};\">\n <p class=\"m-0 mb-1.5 text-[10px] font-bold tracking-widest uppercase\" style=\"color:{{accent}}\">Aside</p>\n <h3 class=\"m-0 mb-1.5 text-[15px] font-bold\">{{heading}}</h3>\n <p class=\"m-0 text-[13px] text-[#241430]/80\">{{body}}</p>\n </aside>\n</div>\n<style>\n.aside-tw--sidebar { border-left: 4px solid var(--accent); }\n.aside-tw--pullquote { border: none; background: transparent; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); font-style: italic; }\n</style>", "react": "export function AsideElement({\n heading = \"{{heading}}\",\n body = \"{{body}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n}) {\n const wrap = variant === \"sidebar\"\n ? { borderLeft: `4px solid ${accent}` }\n : { border: \"none\", background: \"transparent\", borderTop: `2px solid ${accent}`, borderBottom: `2px solid ${accent}`, fontStyle: \"italic\" };\n return (\n <div style={{ display: \"flex\", gap: 20, width: 460, font: \"15px/1.55 system-ui, sans-serif\", color: \"#241430\" }}>\n <p style={{ flex: \"1 1 auto\", margin: 0, color: \"#241430aa\" }}>\n Main article text flows here, continuing for several paragraphs while this complementary note sits to the side.\n </p>\n <aside style={{ flex: \"0 0 180px\", background: \"#FAF7F2\", padding: \"16px 18px\", borderRadius: 10, ...wrap }}>\n <p style={{ margin: \"0 0 6px\", fontSize: 10, fontWeight: 700, letterSpacing: \"0.08em\", textTransform: \"uppercase\", color: accent }}>Aside</p>\n <h3 style={{ margin: \"0 0 6px\", fontSize: 15, fontWeight: 700 }}>{heading}</h3>\n <p style={{ margin: 0, fontSize: 13, color: \"#241430cc\" }}>{body}</p>\n </aside>\n </div>\n );\n}" }