Last modified:

A simple trust scoring component for researchers.


Example of Trust - default

<span class="bc-trust">

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.


Last modified:

Use semantic markup to wrap the Trust component.

For example:

  • Inside of a <header> for a <section> about a given user
  • Inside a <dd> following a <dt> in a definition list of keys and values about a user
  • In semantic data tables, where cell position and column table headers give the Trust ratings meaning.


Last modified:

There are 4 stylistic variants:

.bc-trust--exceptionalFor high levels of trust.
.bc-trust--goodFor good levels of trust.
.bc-trust--lowFor low levels of trust.
.bc-trust--blockFor blocked users.


Last modified:

The Trust component offers no semantics by themselves, so they must be nested in other semantic markup.

See the HTML guidance.


Last modified:

‘Badges’ or ‘Pills’ are a familiar design pattern for highlighting attributes about something they’re visually associated with. The Trust component is designed to be easy to scan for when positioned consistently.

Green, red, or blue background color is used to help signify the trust rating in addition to the text rating.

See also

Last modified: