Get Cord looking and feeling like your application
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%;
}
This change will give you a facepile that looks something like this:
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%;
}
You should now see a bit more spacing and a simple gray border around the entire facepile:
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.
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.
In the next step, you'll add a second Cord component -- the conversation thread →