Empty rule
Approved with no owner
0ApprovedOwner is empty
No example records match this rule.
Components / Data display / Rule card
D1 · Data display
Rule card
A named rule, plain-language chips, a count, and a ranked list. An empty rule stays on the page.
<section class="card c-rule">
<div class="top"><h3>Needs a reviewer</h3><span class="chip num">4</span></div>
<p class="c-inline"><span class="chip">Status is In review</span><span class="chip">Reviewer is empty</span></p>
<ol class="c-rank"><li><span class="num">1</span><span>DOC-1055 Leave calendar</span><span class="sub num">9 days</span></li></ol>
</section>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A list is defined in words a reader can check.
- The empty match is a valid result.
When not to use
- The rule is a free-text search.
- The ranking needs many columns. Use the data table.
Usage
<section class="card c-rule">
<div class="top"><h3>Needs a reviewer</h3><span class="chip num">4</span></div>
<p class="c-inline"><span class="chip">Status is In review</span><span class="chip">Reviewer is empty</span></p>
<ol class="c-rank"><li><span class="num">1</span><span>DOC-1055 Leave calendar</span><span class="sub num">9 days</span></li></ol>
</section>
Variants
Props
| Name | Type | Default | Description |
|---|---|---|---|
| chip count | number | 0 | How many records match. |
| rule chips | text | — | One clause each, in reading order. |
| c-rank | list | — | Matches, longest age first in this example. |
| c-empty | text | — | Shown when the count is 0. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the page. The card has no extra keys. |
Accessibility
- The count is text in the heading row.
- The empty state is a sentence, not a blank card.
- Chips restate the rule in words.
Motion
- No motion.
Pattern origin
Pattern type: a rule card with a ranked list.