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

# CMS Blocks

> Build a reusable CMS block for Cevoid UGC galleries and cards.

Use this page when your site has CMS sections or blocks and you want content teams to add Cevoid widgets without editing code. This is an advanced setup path. Start with [Embed Galleries and Cards](./embed) if you have not added the base widget script yet.

Build one reusable Cevoid widget block that can render either a gallery or a card.

## Recommended fields

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "type": "GALLERY | CARD",
  "title": "string",
  "description": "string",
  "galleryId": "string",
  "cardId": "string",
  "width": "FULLWIDTH | CONTAINER",
  "widgetType": "default | product | collection | category",
  "productId": "string",
  "collectionId": "string",
  "categoryId": "string"
}
```

Use `type` to decide whether the block renders a gallery or a card.

Use `title` and `description` when the CMS should render surrounding section copy, such as "Inspiration from our community" above the widget.

Use `width` when editors should choose between a full-width widget and the site's normal content width.

## Gallery widget types

Use `widgetType` only for galleries:

* `default`: render only `data-gallery`
* `product`: add `data-product="auto"` or a specific product ID
* `collection`: add `data-collection="auto"` or a specific collection identifier
* `category`: add `data-category="auto"` or a specific category identifier

<Tip>
  Keep product, collection, and category identifier fields optional. If no value is provided, render `auto` for the selected dynamic gallery type.
</Tip>

## Rendering rules

Render a gallery block like this:

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-gallery="GALLERY_ID"></div>
```

Render a card block like this:

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<div id="cevoid-container" data-card="CARD_ID"></div>
```

When `widgetType` is dynamic, add only the matching dynamic attribute. Do not combine `data-product`, `data-category`, and `data-collection` on the same container.

## Related

* [Embed Galleries and Cards](./embed)
* [Dynamic Galleries](./dynamic-galleries)
* [Runtime Helpers](./runtime-helpers)