Styles

Editor.js provides a set of CSS classes for common UI elements. They can be used to make the design of different Tools more consistent.

☝️
Example

Base styles

block cdx-block

Inline Tools styles

inlineToolButton ce-inline-tool
inlineToolButtonActive ce-inline-tool--active

UI elements

input cdx-input
loader cdx-loader
button cdx-button

Block Settings elements

settingsButton cdx-settings-button
settingsButtonActive cdx-settings-button--active

block

Base class for Block Tool wrapper. Provides common margins and paddings between Blocks.

'cdx-block'

inlineToolButton

Style of buttons for the Inline Toolbar.

'ce-inline-tool'

inlineToolButtonActive

Modifier for the active state of Inline Toolbar Button.

'ce-inline-tool--active'

input

A common style for text inputs.

'cdx-input'

You can set a placeholder for contenteditable element by adding a data-placeholder attribute:

<div contenteditable class="cdx-input" data-placeholder="Custom placeholder"> </div>

loader

Add this class to some element to show an animated loader placed over the element.

'cdx-loader'

button

A common style for buttons.

'cdx-button'
<div class="cdx-button"> Button text </div>

settingsButton

Class for Block Settings buttons.

'cdx-settings-button'

settingsButtonActive

Active modifier for Block Settings buttons.

'cdx-settings-button--active'