You can use plain CSS to customize every Cord component to match your visual language
<head>. If you specified a Content Security Policy, you will have to whitelist
app.cord.com, which is the domain serving Cord's stylesheet. For more information, see our full CSP list.
cord-. When customizing components, you should write CSS selectors to target the stable class names only.
.cord-facepile-container .cord-avatar-containeris a valid CSS selector which is guaranteed to not break in newer version of Cord SDK.
.cord-facepile-container > divis not.
cord-class names are applied when a component is in a specific state. For instance, the avatars in cord-facepile will either have a
cord-not-presentclass depending on whether the user is marked as present with Cord Presence API. This allows you to style avatars based on their state.
cord-thread, but you can add more components!