CSS Customization
How to /
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 whitelistapp.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-containeris a valid CSS selector which is guaranteed to not break in newer version of Cord SDK. - On the other hand,
.cord-facepile-container > divis not.
- For example,
- 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-presentorcord-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 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 usingcord-page-presence and cord-thread, but you can add more components!