Bullets
A list in running text, with its markers hung in a column of their own.
On this page
Bullets are a list in running text: points in an article, what a plan includes, steps written as prose. Each marker hangs in a column of its own and stands on the first line of its item, so however the text wraps, every item starts on one edge. It is a native <ul> or <ol>.
Bullets
<ul class="bullets max-w(420) mx-auto"> <li class="bullets-item">Every overlay is a native element, opened without script.</li> <li class="bullets-item">Tokens retune every component, and a theme is a file of them that selects no component.</li> <li class="bullets-item">Each stylesheet has a contract beside it that says what it promises.</li></ul>#Markers
The marker is a small dot. Two classes on the list change it:
bullets-checkdraws a check in the ink of the text, for what is included: the features of a plan, the things a release brings.bullets-numbereddraws each item's number in tabular figures, set to the end of the marker column so the points line up from 9 to 10. Use it on an<ol>, where the order is part of the meaning.
Check and numbered
<ul class="bullets bullets-check w(220)"> <li class="bullets-item">Unlimited projects</li> <li class="bullets-item">Custom domains, with certificates issued and renewed for you</li> <li class="bullets-item">Preview for every branch</li></ul><ol class="bullets bullets-numbered w(220)"> <li class="bullets-item">Install the package.</li> <li class="bullets-item">Import the stylesheet after the preset.</li> <li class="bullets-item">Write the markup.</li></ol>#What is not included
In a list of what a plan includes, the lines it does not include are part of the answer. bullets-off on an item draws a short dash in place of its marker and sets its words a step quieter. The dash and the tone are for the eye: start the item with words such as "Not included:" in a visually hidden span, as the example does with the sr-only utility, so the same is said to a reader who sees neither.
Not included
<div class="card w-full max-w(300)"> <div class="card-header"> <h3 class="card-title">Starter</h3> <p class="card-description">For one person and a few projects.</p> </div> <ul class="bullets bullets-check"> <li class="bullets-item">Three projects</li> <li class="bullets-item">Custom domains</li> <li class="bullets-item bullets-off"> <span class="sr-only">Not included:</span>Single sign-on</li> <li class="bullets-item bullets-off"> <span class="sr-only">Not included:</span>Audit log</li> </ul></div>#Nesting and rhythm
A bullets list inside an item is indented to the edge of the item's text and stands 8px under it. Items are 8px apart, set by --bullets-gap; --bullets-marker is the width of the marker column. The list takes the size, the line height and the ink of the text it is in, and the marker follows the first line. So the same list works in a card at 14px and in an article at 17px, and on an ink surface its markers turn with its words.
#Bullets, list or checklist
Bullets are sentences. Rows of things, each with media, a title and something at the end, are a list. Things to do that a reader ticks off are a checklist. Terms and their values are a data list.
#Accessibility
- Use a
<ul>, or an<ol>when the order matters, with an<li>for every item. The markers are drawn by the stylesheet and are not announced; the list and its length are. - Safari with VoiceOver does not announce a list whose markers are removed unless it has
role="list". Add it when the count of items matters to understanding. - A check says "included" and a dash says "not included" only to the eye. Say it in words for the items that are off.
#Classes
| Class | Description |
|---|---|
bullets | The list: items 8px apart, each with a small dot in a 16px column 10px from the text. It takes the ink of the text it stands in, so it reads on a card and on an ink surface alike |
bullets-check | A check in the ink of the text in place of the dot, for what is included. With bullets |
bullets-numbered | Each item's number in tabular figures, set to the end of the marker column; use it on an ol. With bullets |
bullets-item | One item; its marker stands on its first line and its text starts on one edge with the others |
bullets-off | An item that is not included: a short dash in place of its marker and quieter words. With bullets-item |
#Custom properties
| Property | Default | Description |
|---|---|---|
--bullets-marker | 1rem | Width of the marker column |
--bullets-gap | .5rem | Space between items |