Edit Social Links

Name

Also known as (comma separated)

Brief definition Icon links to social media profiles.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "layout", "type": "select", "label": "Layout", "default": "horizontal", "options": [ "horizontal", "vertical" ] }, { "id": "iconStyle", "type": "select", "label": "Icon style", "default": "filled", "options": [ "filled", "outline" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "size", "type": "number", "label": "Icon size", "default": 38, "min": 24, "max": 56, "step": 2 } ]

Templates (JSON object keyed by format) { "html": "<ul class=\"social social--{{layout}} social--{{iconStyle}}\">\n <li><a href=\"#\" aria-label=\"Twitter\" style=\"width:{{size}}px;height:{{size}}px;--accent:{{accent}};\">&#120143;</a></li>\n <li><a href=\"#\" aria-label=\"Instagram\" style=\"width:{{size}}px;height:{{size}}px;--accent:{{accent}};\">&#9679;</a></li>\n <li><a href=\"#\" aria-label=\"LinkedIn\" style=\"width:{{size}}px;height:{{size}}px;--accent:{{accent}};\">in</a></li>\n</ul>\n<style>\n.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; font: 16px system-ui, sans-serif; }\n.social--vertical { flex-direction: column; }\n.social a { display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; font-weight: 700; }\n.social--filled a { background: var(--accent); color: #FAF7F2; }\n.social--outline a { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }\n.social a:hover, .social a:focus-visible { opacity: .85; }\n</style>", "tailwind": "<ul class=\"social-tw social-tw--{{layout}} social-tw--{{iconStyle}} list-none m-0 p-0 flex gap-2.5 font-sans\">\n <li><a href=\"#\" aria-label=\"Twitter\" class=\"flex items-center justify-center rounded-full no-underline font-bold hover:opacity-85\" style=\"width:{{size}}px;height:{{size}}px;--accent:{{accent}};\">&#120143;</a></li>\n <li><a href=\"#\" aria-label=\"Instagram\" class=\"flex items-center justify-center rounded-full no-underline font-bold hover:opacity-85\" style=\"width:{{size}}px;height:{{size}}px;--accent:{{accent}};\">&#9679;</a></li>\n <li><a href=\"#\" aria-label=\"LinkedIn\" class=\"flex items-center justify-center rounded-full no-underline font-bold hover:opacity-85\" style=\"width:{{size}}px;height:{{size}}px;--accent:{{accent}};\">in</a></li>\n</ul>\n<style>\n.social-tw--vertical { flex-direction: column; }\n.social-tw--filled a { background: var(--accent); color: #FAF7F2; }\n.social-tw--outline a { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }\n</style>", "react": "export function SocialLinks({\n layout = \"{{layout}}\",\n iconStyle = \"{{iconStyle}}\",\n accent = \"{{accent}}\",\n size = {{size}},\n}) {\n const filled = iconStyle === \"filled\";\n const links = [\n { label: \"Twitter\", glyph: \"\\ud835\\udd4f\" },\n { label: \"Instagram\", glyph: \"\\u25cf\" },\n { label: \"LinkedIn\", glyph: \"in\" },\n ];\n return (\n <ul style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", gap: 10, font: \"16px system-ui, sans-serif\",\n flexDirection: layout === \"vertical\" ? \"column\" : \"row\" }}>\n {links.map((link) => (\n <li key={link.label}>\n <a href=\"#\" aria-label={link.label} style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n width: size, height: size, borderRadius: \"50%\", textDecoration: \"none\", fontWeight: 700,\n background: filled ? accent : \"transparent\", color: filled ? \"#FAF7F2\" : accent,\n border: filled ? \"none\" : `1.5px solid ${accent}` }}>{link.glyph}</a>\n </li>\n ))}\n </ul>\n );\n}" }