Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Formula

Formula is a list of steps/ingredients to follow, which allows you to achieve something.

A formula is presented with symbols and labels. The symbols are the core function of the formula and labels help to communicate the meaning of the symbols.

Presenting information as a formula helps to:

  • Make the information easier to recognise and make it more transparent
  • Create associations with the symbols.

When using longer text and viewing in mobile breakpoint, the design breaks visually as the icon sometimes displays inline to the text and sometimes break onto another line. We introduced this modifer to handle this scenario .m-formula--long-text which makes the icons always display block, on their own line.

= render partial: "shared/molecules/formula", locals: {content: content_for_compact_formula_example}