Customize Cord components with CSS

You can use plain CSS to customize every Cord component to match your visual language


Overview #

  • Cord components are web components and so they can be styled like any other HTML element, using CSS.
  • Cord's stylesheet will automatically be included in your application's <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.
  • The styles in this stylesheet have a CSS specificity of (0, 1, 0): enough for you to easily customize the components, without unwanted styles (e.g. your CSS reset) getting applied to them.
  • Cord components have stable CSS class names, which are guaranteed to not change between versions of Cord SDK. The stable CSS class names are the class names which are prefixed with cord-. When customizing components, you should write CSS selectors to target the stable class names only.
    • For example, .cord-facepile-container .cord-avatar-container is a valid CSS selector which is guaranteed to not break in newer version of Cord SDK.
    • On the other hand, .cord-facepile-container > div is not.
  • Some of the 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 also supports theming with CSS Variables. You can play with a live example.

Example: Styling a Thread and a Facepile #

The sandbox below shows how much you can customize Cord. We're using cord-page-presence and cord-thread, but you can add more components!

Ask Cordy