Components

List

An ordered or unordered list; each item is rich text.

View Markdown Ask ChatGPT Ask Cursor

An ordered or unordered list; each item is rich text.

List block

Crawling: discovering URLs and downloading pages.
Indexing: reading a page and storing what it is about.
Serving: choosing and ordering results for one query.

The block

As the API returns it, from the example article:

json

{  "type": "list",  "ordered": true,  "items": [    [      {        "text": "Crawling",        "bold": true      },      {        "text": ": discovering URLs and downloading pages."      }    ],    [      {        "text": "Indexing",        "bold": true      },      {        "text": ": reading a page and storing what it is about."      }    ],    [      {        "text": "Serving",        "bold": true      },      {        "text": ": choosing and ordering results for one query."      }    ]  ],  "id": "list-4"}

Replace it

Pass your own component for the type. It receives the block, typed, and every other type keeps its default. The default stays available, so you can wrap it instead of starting over:

tsx

import { Article, defaultComponents } from "@/components/seoforsaas/article";import type { ListBlock } from "@/lib/seoforsaas/types";const DefaultList = defaultComponents.list;function MyList({ block }: { block: ListBlock }) {  return (    <div className="my-list">      <DefaultList block={block} />    </div>  );}<Article blocks={article.blocks} components={{ list: MyList }} />

Notes

ordered: true renders an ol. The default CSS restores list markers after a CSS reset.