Common CSS Classes
There are a few common classes used for different modes in the call screen- cc-main-container - The outermost component of the calling component is represented by a white border in the screenshots above, indicating that it acts as a container for other components.
- cc-bottom-buttons-container - The container located at the very bottom of the interface houses various action buttons, such as the mute/unmute audio and video, end call, settings icon, and participants icon, among others. It is represented by the red border in above screenshot.
- cc-name-label - This class is passed in user name text container in all modes. It is represented by green border in the above screenshots.
- cc-video-container - This class is passed to the video container in all modes. It is represented by orange border in the above screenshots.
Bottom Buttons
- cc-bottom-buttons-container - This is the container of all the buttons in calling.
- cc-bottom-buttons-icon-container - This is the div of every button in the button bar.
Individual bottom buttons CSS classes
cc-audio-icon-container
cc-audio-icon-container-muted
cc-video-icon-container
cc-video-icon-container-muted
cc-screen-share-icon-container
cc-switch-video-icon-container
cc-end-call-icon-container
Example
DEFAULT

TILE

SPOTLIGHT


Guidelines for Customizing the Grid Layout
-
CSS Classes:
- Please ensure that you only apply CSS classes specified in this documentation. Introducing CSS classes not covered here may cause unexpected UI issues.
-
Grid Container Resizing:
- Avoid resizing the grid container. Altering the grid container’s dimensions can negatively impact the grid layout, leading to undesirable visual distortions.