Bugcrowd Design System

Bugcrowd Design System

Search/

Hints

Last modified:

Hints are subdued text style used for secondary or tertiary text. Use hints to style additional notes, instructions, or for hints in forms.

Back to top

Example of Hints - default

<div>
  <h5 class="bc-h5">
    Become a researcher
  </h5>
  <BcHint as='div'>
    Already have an account?
    <a className='bc-helper-block' href='/user/sign_up'>
      Log in
    </a>
  </BcHint>
</div>
Open in Playroom

React documentation

Last modified:

Hints are subdued text style used for secondary or tertiary text. Use hints to style additional instructions or descriptive text in forms.

BcHint Props

This component inherits following React elements: ReactChild | ReactChild[] | ReactChildren | ReactChildren[].

PropTypeRequired?DefaultDescription
childrenJSXrequiredAccepts JSX to wrap the html inside BcHint parent component.
asstringoptionalspanSwitch between either <span> or <div> or <p> tag (span is default).
displaystringoptionalSets respective helper class for the CSS display property (eg inline, inlineblock, and block).
classNamestringoptionalSets custom css class.
sizestringoptionalSwitch between different sizes like small or large.

Any extended types:

  • React.HTMLAttributes<HTMLSpanElement> for span
  • React.HTMLAttributes<HTMLDivElement> for div
  • React.HTMLAttributes<HTMLParagraphElement> for p

HTML

Last modified:

Intended to be used as a wrapper, eg. on a div or an aside wrapping some p paragraphs.

Design

Last modified:

Hints help users visually scan a page and identify ancillary content.

The “subdued” visual style of a “lighter” text color and size is juxtaposed against the default (darker and larger) or the stronger font-weight of form Labels or small headings.

Accessibility

Last modified:

When adding descriptive text for especially form inputs it’s important to make a relationship between them.

Start by adding a unique ID to the Hint block.

Next use the aria-describedby attribute set on the described input with the value being the ID of the Hint block.

Rationale

Last modified:

Hints are an important part of our visual typographic hierarchy to help users quickly identify primary, secondary, and ancillary content.

See also

Last modified: