EditorJS Cards

A block tool for Editor.js that renders an auto-fill responsive grid of cards. Each card has a title and description.

Cards automatically adapt to the available width — filling as many columns as fit, down to a single column on small screens.

Installation

npm install editorjs-cards

Usage

import EditorJS from '@editorjs/editorjs';
import Cards from 'editorjs-cards';

const editor = new EditorJS({
  tools: {
    cards: {
      class: Cards,
      config: {
        maxColumns: 3, // optional, default: unlimited
      },
    },
  },
});

Config

| Option | Type | Default | Description | | ------------ | -------- | ----------- | ------------------------------------ | | maxColumns | number | undefined | Maximum number of columns in the grid |

When maxColumns is not set, cards fill all available width (min 220px per card). Setting maxColumns: 3 ensures no more than 3 cards per row.

Output data

{
  "type": "cards",
  "data": {
    "cards": [
      {
        "title": "Access",
        "text": "Request a copy of the personal data we hold about you."
      },
      {
        "title": "Erasure",
        "text": "Request deletion of your data."
      }
    ]
  }
}

Rendering

To render cards on your frontend, use a CSS grid with auto-fill:

<div class="cards-grid">
  <div class="cards-grid-item">
    <div class="cards-grid-item-title">Access</div>
    <p>Request a copy of the personal data we hold about you.</p>
  </div>
  <!-- ... -->
</div>

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.cards-grid-item {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
}

.cards-grid-item-title {
  font-weight: 600;
  margin-bottom: 0.375rem;
}

License

MIT