Lists

Build a paginated blog index, a staff directory, a list of locations, or any other repeating set of entries — managed from one screen, styled with your own CSS.

What's a List?

A List is a small, admin-managed set of entries you define once and reuse anywhere. You choose the fields — a blog index might use Publication Date, Title, and Link; a staff directory might use First Name, Last Name, Title, Department, Phone, and Email. You can turn pagination on or off, set how many entries show per page, and choose which field to sort by — no coding required.

Creating a List

Click ⚙️ Site Admin in the toolbar, then 🗂️ Lists.
Click + New List, give it a name, and optionally start from the Blog Posts or Link List template.
Add fields under Fields — give each one a label and a type (Text, Date, Link, or Image).
Turn on pagination and set entries-per-page under Settings, if you want it, and choose which field to sort by.
Add your entries under Entries — one row per item, reorder with the ↑/↓ buttons.
Click Save.

Come back to this same dialog any time to add, edit, reorder, or delete entries — it's a lightweight database for this one list, not a one-time setup.

Placing a List on a page

Place your cursor where you want the list to appear, click the 🧩 Blocks button, and choose one of two placement styles:

List: Links — a simple bulleted list, right for a blog index or a list of resources. Whichever field is set to Link supplies the destination; every other field's value (and an Image field, if you have one) becomes the clickable text.
List: Directory — a grid of cards, one per entry, right for a staff directory or list of locations. Every field is shown, labeled with its own name — a Link field becomes a real button-style link, an Image field becomes a real picture.

After inserting the block, click its 🗂️ toolbar button and pick which List it should display. That's the only step that connects a block to your data — the same block type can be reused on multiple pages, each pointed at a different List if you like.

Turning it on in your template

Like site search and animated images, the code that renders your Lists is already scaffolded into your site's scripts/ folder — it just needs one line added to your template's <head> once:

<script src="/scripts/list.js"></script>

If you're using one of the official Bootstrap or Tailwind starter templates, this is already there. If you forget this step, a List block shows nothing but its own icon and name on your live, published site — not just in the editor — so it's the first thing to check if a list you've placed on a page isn't showing up.

Styling your Lists

Lists render with plain, unstyled-by-default markup so they fit whatever CSS framework your site uses — style them the same way you'd style any other cs-* class from a block or menu:

cs-list--links / cs-list--directory — the outer container, one per placement style
cs-list-item — each entry
cs-list-field cs-list-field--text / --date / --link / --image — each field, classed by its type
cs-list-pagination — the Previous/Next controls, when pagination is on

A Date field is shown in a friendly format like "Sept. 28, 2026," never as the raw date you typed it in as.

Why the editor only shows a placeholder

While you're editing — in both Visual view and the live Preview pane — a List block shows a plain icon and name instead of your actual entries. This is expected, not a bug — the same reason a Lottie animation only shows a placeholder while editing (see Adding Animated Images). Your list renders normally once you publish your site, or use Render to Local Folder/Packaged and open the result in a regular browser tab.

Works offline too

If you use the Packaged deployment target — for a site that needs to open straight from a folder on disk, with no web server involved — your Lists still work correctly. WebHaste automatically includes each list's data directly in the page for you. There's nothing extra to configure.

A note on privacy

Only a List that's actually placed on a page gets published. If you've set up a List's entries but haven't added its block to a page yet — or you remove the block from every page later — that data stays private and isn't included the next time you publish.

Pagination

When pagination is turned on, entries page through right in the visitor's browser — there's no separate URL for "page 2," so nothing extra to worry about for search engines. Your sitemap already covers whatever real pages link into the list.