Help text

Block level

Use .c-form-help to show help text below a control.

Message

Block level help text here

.c-form-group
  label Message
  textarea row="4"
  .c-form-help
    | Block level help text here

<div class="c-form-group">
  <label>Message</label><textarea row="4"></textarea>
  <div class="c-form-help">
    Block level help text here
  </div>
</div>

Inline level

Use .c-form-help--inline to show inline help text.

Example TextInline level help text

Example LabelInline level help text

.c-form-group
  label
    | Example Text
    i.required
    span.c-form-help--inline
      | Inline level help text
  input type="text" placeholder="Example Text"

.c-form-group
  label Example Label
  select
    option Choose an option
    option Stout
    option Pale ale
    option Porter
    option Weizen
  span.c-form-help--inline
    | Inline level help text

<div class="c-form-group">
  <label>Example Text<i class="required"></i><span class="c-form-help--inline">Inline level help text</span></label><input type="text" placeholder="Example Text" />
</div>
<div class="c-form-group">
  <label>Example Label</label><select>
    <option>
      Choose an option
    </option>
    <option>
      Stout
    </option>
    <option>
      Pale ale
    </option>
    <option>
      Porter
    </option>
    <option>
      Weizen
    </option>
  </select><span class="c-form-help--inline">Inline level help text</span>
</div>