Variants
Example of Trust - default
<span class="bc-trust"> Newcomer </span>
React documentation
Last modified:
ℹ️ This feature doesn’t have a corresponding React component yet.
HTML
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.
Design
Last modified:
There are 4 stylistic variants:
| Variant | Purpose |
|---|---|
.bc-trust--exceptional | For high levels of trust. |
.bc-trust--good | For good levels of trust. |
.bc-trust--low | For low levels of trust. |
.bc-trust--block | For blocked users. |
Accessibility
Last modified:
The Trust component offers no semantics by themselves, so they must be nested in other semantic markup.
See the HTML guidance.
Rationale
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: