Customize the appearance

Integration Guide /

Get Cord looking and feeling like your application

Adjust the CSS and CSS variables

Cord's SDK components are customizable with CSS and a detailed set of CSS variables. Let's say that your application needs the profile pictures in the presence facepile to be a bit larger and fully round, for example. You can achieve this with the following CSS:

cord-page-presence {
  --cord-page-presence-avatar-size: 36px;
  --cord-avatar-border-radius: 100%;
}
Copy

This change will give you a facepile that looks something like this:

A screenshot of a page with a Cord facepile

You might want to add styling to the component itself. If, for example, you wanted to put a border around the entire page presence facepile, you might add CSS like this:

cord-page-presence {
  border: 1px #ccc solid;
  border-radius: 12px;
  padding: 12px;
  --cord-page-presence-avatar-size: 36px;
  --cord-avatar-border-radius: 100%;
}
Copy

You should now see a bit more spacing and a simple gray border around the entire facepile:

A screenshot of a page with a Cord facepile with a simple border

Take the customization even further

You can customize many more aspects of Cord's components. For the full description of what's available for the <PagePresence /> component, check out the full CSS variable list here.

If you'd like to dive deeply into the topic of CSS customization, read our in-depth CSS guide.

▶ Can I just use vanilla CSS?

We're actively working to migrate our existing components to vanilla CSS. In the near future, you'll be able to style literally every single detail of our components using classnames and other standard CSS features.

Cord LogoDocs
Go to the Cord Console