.mod-example
  .form-error
    p.form-error-message
      span> Pellentesque habitant morbi tristique senectus
      a Nullam mollis turpis

.mod-example
  .selectbox.error
    select
      option Nam metus massa
      option Phasellus nisi est
      option Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh.

.mod-example
  .text-input.error
    input type='text' placeholder='Fusce quis elit at turpis'
  .error-message.visible Maecenas ullamcorper turpis quis elit volutpat

.mod-example
  .password-field.error
    .text-input
      .security
      input type='password' id='password' placeholder='Fusce quis elit at'
  .error-message.visible Vivamus faucibus lacus et purus

.mod-example
  .textfield.error
    .field
      label for='first_name1' Donec
      input type='text' id='email1' placeholder='Fusce quis elit at turpis'
  .error-message.visible Maecenas ullamcorper turpis quis elit volutpat

.mod-example
  .textfield.error
    .field
      label for='first_name1'
        | Nullam consectetur
        span.i-delete.cancel Suspendisse id
      input type='text' id='first_name1' placeholder='Faucibus vel magna vel, auctor'
  .error-message.visible Etiam ut ullamcorper diam

.mod-example
  .selectfield.error
    .field
      label for='select1' Ullamcorper
      .selectbox
        select id='select1'
          option Nam metus massa
          option Phasellus nisi est
          option Long-term disability insurance
  .error-message.visible Etiam ut ullamcorper diam.

.mod-example
  .checkbox-list.error
    .header
      h4 Aenean ac bibendum
      p Phasellus in laoreet quam. Curabitur ex nibh, pharetra eget aliquam congue.
    .content
      label.checkbox
        input type='checkbox' checked='checked'
        span Congue, commodo vitae tortor
      label.checkbox
        input type='checkbox' checked='checked'
        span Nam lectus tellus, tristique
      label.checkbox
        input type='checkbox'checked='checked'
        span Tincidunt
      label.checkbox
        input type='checkbox'
        span Nunc in pharetra velit
  .error-message.visible Fusce euismod bibendum orci at.

.mod-example
  .toggle-input.error
    label In rhoncus orci et
    .radio-buttons
      label.radio
        input type='radio' name='radios'
        span Proin
      label.radio
        input type='radio' name='radios'
        span Aliquam tortor
  .error-message.visible Consectetur ornare, ultrices ullamcorper

.mod-example style='background: #00A4A5; padding: 24px;'
  .form-error.emphasized
    p.form-error-message Please fill out the fields below to continue

.mod-example style='background: #00A4A5; padding: 24px;'
  .textfield.error.no-border
    .field
      label for='first_name1' Donec
      input type='text' id='email1' placeholder='Fusce quis elit at turpis'
  .error-message.visible Maecenas ullamcorper turpis quis elit volutpat

.mod-example style='background: #00A4A5; padding: 24px;'
  .selectfield.error.no-border
    .field
      label for='select1' Ullamcorper
      .selectbox
        select id='select1'
          option Nam metus massa
          option Phasellus nisi est
          option Long-term disability insurance
  .error-message.visible Maecenas ullamcorper turpis quis elit volutpat

.mod-example style='background: #00A4A5; padding: 24px;'
  .selectbox.no-border.error
    select
      option Nam metus massa
      option Phasellus nisi est
      option Nullam mollis turpis eget mattis congue. Fusce vitae turpis quis mauris maximus tincidunt vel sit amet nibh.
  .error-message.visible Quis elit volutpat