> ## Documentation Index
> Fetch the complete documentation index at: https://sportsindex.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Block System

> Collection editor block architecture

## Overview

The collection editor uses a 3-column block layout system with 24 block types. Collections are built from a canvas of positioned elements that can be arranged, resized, and styled.

## Layout

* **Canvas width**: 1336px
* **Column width**: 437px (3 columns)
* **Column gap**: 24px
* **Grid size**: 20px

## Block Types (24)

| Category         | Types                                                                                  |
| ---------------- | -------------------------------------------------------------------------------------- |
| **General**      | heading, text\_box, divider                                                            |
| **Athlete**      | athlete\_header, athlete\_bio                                                          |
| **Content**      | news                                                                                   |
| **Article**      | article\_header, rich\_text, pull\_quote                                               |
| **Media**        | image, post, post\_gallery                                                             |
| **Stats & Data** | stats\_header, season\_stats, bar\_chart, head\_to\_head, scatter\_plot, spider\_chart |
| **Team**         | roster                                                                                 |
| **Pickleball**   | pickleball\_results, pb\_match\_group                                                  |

## Content Types

Blocks store content as JSON in the `content` field of `PageElement` records. Each block type defines its own content schema. For example:

* **post**: `{ linked_post_id, platform, external_url, title, thumbnail_url }`
* **image**: `{ url, alt, caption }`
* **heading**: `{ text, level }`
* **bar\_chart**: `{ title, data, config }`

## Rendering

Collections are rendered in two contexts:

1. **Editor** (`UnifiedCollectionEditor.js`): Full drag-drop editing with double-click content editing
2. **Viewer** (`collection-block-renderer.js`): Read-only rendering for published collections