Overview

Mock project for openagenda.com styles

yarn
yarn start

Conventions

Info and secondary text

Explanatory text under a label, a radio option or a section header — and the sub-message of a banner, a notice or a panel — is a .text-muted element (or keeps the colour of its surroundings) at the inherited size:

<div className="text-muted">{info}</div>

Do not make it smaller: no <small>, no .small, no font-size set inline or in a stylesheet (style={{ fontSize: 13 }}). Everything in these interfaces — body text, control labels, accordion titles and their subtitles — sits at one size, and <small> is a relative 85% of whatever it lands in (a fixed size is no better), so a hint dressed that way reads as a different, smaller register than every other hint on the same screen. Set it apart with its colour, its place and the spacing around it, not its size. Components/RadioField.js (an option's info) and the form builder's accordion headers are the reference renderings.

<small> is left for the rare note that is genuinely subordinate to the control it sits under — a disabled state explaining itself, for instance — and not for the ordinary description of a field or an option.