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-container
is a valid CSS selector which is guaranteed to not break in newer version of Cord SDK..cord-facepile-container > div
is not.cord-
class names are applied when a component is in a specific state. For instance, the avatars in cord-facepile will either have acord-present
or cord-not-present
class depending on whether the user is marked as present with Cord Presence API. This allows you to style avatars based on their state.cord-page-presence
and cord-thread
, but you can add more components!