mostlycss
Theme

Note

footer.note

.note — the quiet remark that closes a block, and the rule that separates it.

Examples

The small print that closes a block

View “The small print that closes a block” as

Times come from the operator's own board and can change without notice.

<footer class="note">
  <p>Times come from the operator's own board and can change without notice.</p>
</footer>

The rule is drawn on the container, so it spans whatever the container spans; the measure is on the paragraph inside it.

Written as one element — a <p> carrying the border and the cap together — the rule stops where the text stops, which on a 1056px column measured 480px and reads as a border somebody forgot to finish.

A second paragraph costs one line

View “A second paragraph costs one line” as

Times come from the operator's own board and can change without notice.

Where a platform is missing, the board had not published one yet.

<footer class="note">
  <p>Times come from the operator's own board and can change without notice.</p>
  <p>Where a platform is missing, the board had not published one yet.</p>
</footer>

This is the reason it is a container and not a paragraph. The version written as <p class="note"> renders the first example correctly and cannot render this one at all: the tag has to change, a <p> has to be nested inside it, and every rule has to be re-aimed — work that exists only because the first version was written as a leaf.

Without the rule, when something else already divides

View “Without the rule, when something else already divides” as

Coverage is five regions out of twenty, and the list says which.

<footer class="note note-bare">
  <p>Coverage is five regions out of twenty, and the list says which.</p>
</footer>

For the case where the note is one of two columns under a divider that already spans the band. The pair is separated already, and a second line inside it is a line too many.

Tokens 4

Level 2, declared on .note itself. Set any of them on that selector to restyle this component without touching the skin.

Level 2 tokens declared by note
TokenDefault
--note-measurevar(--measure)
--note-colorvar(--color-on-surface-muted)
--note-font-sizevar(--font-size-sm)
--note-gapvar(--space-3)

Variants and states

Variants

None. It is one shape, and the page does the rest.

State it reads

None.

Before you ship it

What you have to do 3 requirements

  1. Give it a container element with meaning. <footer> inside the section it closes, or <aside> if it is genuinely tangential. A <div> works and says nothing.
  2. Put paragraphs inside it, not text. A bare text node is not an element, so nothing spaces it and nothing caps it at the measure.
  3. Do not put a heading in it. A block with a heading is a section, and a section is not small print.

src/css/components/note.css · npx mostlycss add note