Skip to content
Menu
Language, currently English
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo design system

An overview of everything the design system provides. Theme: signal. Language: English.

List screen

Generic list screen with title, toolbar, rows that work desktop and mobile.

Pre-built, consistent UI elements, rendered server-side.

The framework's own vocabulary calls these partials: ui.Templates() returns partials, and docs/site/templates.md documents them under that name. The word on this page changed; the code's did not.

Links here are inactive

Links inactive, sample source provided.

Each sample below in its own frame.

Sample content in English. Sample shells translated.

page-header

The screen's title bar: an h1, an optional subhead, and a primary action.

Title, subhead and a primary action

Preview
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Posts</h1>
    <p rst-page-header-sub>Everything you have written, newest first.</p>
  </div>
  <a rst-btn="primary" href="/posts/new"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>Write a post</a>
</header>

Title only

Preview
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Settings</h1>
  </div>
</header>

list-bar

The toolbar at the top of a list card with search and filter.

Search with a filter dropdown

Preview
<div rst-list><div rst-lbar>
  <search><form rst-search method="get" action="/posts">
  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" name="q" value="release" placeholder="Search posts" aria-label="Search posts">
  <a rst-search-clear href="/posts?sort=newest" aria-label="Clear search"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a>
  <input type="hidden" name="sort" value="newest">
  <button class="rst-sr-only" type="submit">Search</button>
</form></search>
  <details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Filter by status: Paid">Paid <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
  <div rst-dropdown-menu>
    <a href="/posts">All</a>
    <a href="/posts?status=paid" aria-current="true">Paid <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?status=free">Free</a>
  </div>
</details>
</div></div>

list-search-submit

The search form's real submit button: visually hidden, in the tab order, and it un-hides on keyboard focus.

Default label

Preview
<section rst-box><button class="rst-sr-only" type="submit">Search</button></section>

Nothing is visible here until you tab into it.

list-row-action

One list row: the record's name as the primary link, a meta line, and a secondary action.

Lead marker, status and an action

Preview
<div rst-list><div rst-row>
  <span rst-row-lead data-lead="accent" aria-hidden="true">RN</span>
  <span rst-row-main><a href="/posts/1">Release notes, August</a><small rst-row-sub>Published 2 August · 4 min read</small></span>
  <span rst-status rst-tone="positive">Published</span>
  <a rst-row-action href="/posts/1/edit" aria-label="Edit Release notes, August">Edit</a>
</div></div>

Name and meta line only

Preview
<div rst-list><div rst-row>
  <span rst-row-main><a href="/posts/2">Why we moved off the old runner</a><small rst-row-sub>Draft · saved 20 minutes ago</small></span>
</div></div>

seg-tabs

A segmented control of server-rendered links. The current tab is aria-current on a link.

Two sections

Preview
<nav rst-seg-tabs aria-label="Post sections"><a href="?tab=basics" aria-current="page">Basics</a><a href="?tab=advanced">Advanced</a></nav>

dropdown

A zero-JavaScript disclosure: a summary button over a panel of plain links.

A filter menu with one choice applied

Preview
<details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Sort posts: newest first">Newest <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
  <div rst-dropdown-menu>
    <a href="/posts?sort=newest" aria-current="true">Newest <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?sort=oldest">Oldest</a>
    <a href="/posts?sort=title">By title</a>
  </div>
</details>

bulk-bar

Select mode's header strip, replacing the list bar: the count, an escalate link, and the actions menu.

Three rows selected

Preview
<div rst-list><div rst-bulkbar><a rst-bulkbar-close href="/posts" aria-label="Done selecting"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a><span rst-bulkbar-count>3 selected</span><a rst-bulkbar-escalate href="/posts?select=all">Select all 412 matching</a><details rst-dropdown name="rst-menus"><summary>Actions<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary><div rst-dropdown-menu><button type="submit" name="action" value="export">Export</button><button type="submit" name="action" value="unpublish">Unpublish</button><button type="submit" name="action" value="delete" class="rst-danger">Delete…</button></div></details></div></div>

The destructive item is last: the first entry is the surrounding form's implicit-Enter default.

pagination

A numbered strip of ordinary links, so paging survives JavaScript being off.

Middle of a long list

Preview
<nav rst-pagination aria-label="Posts pages"><a href="/posts?page=3">Previous</a><a href="/posts?page=1">1</a><span rst-pagination-gap aria-hidden="true">…</span><a href="/posts?page=3">3</a><span aria-current="page">4</span><a href="/posts?page=5">5</a><span rst-pagination-gap aria-hidden="true">…</span><a href="/posts?page=9">9</a><a href="/posts?page=5">Next</a>
</nav>

First page, default accessible name

Preview
<nav rst-pagination aria-label="Pagination"><span rst-pagination-disabled>Previous</span><span aria-current="page">1</span><a href="/posts?page=2">2</a><a href="/posts?page=2">Next</a>
</nav>

No Label, so the nav's accessible name comes from the catalog.

empty-state

The blank-state card. Empty state with affordances for starting steps.

With a POST call to action

Preview
<div rst-empty>
  <h2 rst-empty-title>Nothing here yet</h2>
  <p rst-empty-body>No posts yet. Your first one is a good place to start.</p>
  <form rst-empty-cta method="post" action="/posts/seed">
    <input type="hidden" name="csrf" value="tok-123">
    <button rst-btn="primary" type="submit">Add sample posts</button>
  </form>
</div>

Sentence only

Preview
<div rst-empty>
  <p rst-empty-body>No comments on this post yet.</p>
</div>