.mod-highlighted-field style='max-width: 600px;'
  .textfield
    .field
      label.i-lock for='number' In rhoncus orci et ex
      input type='text' id='number' placeholder='000-00-0000'
  .detail Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue.

.mod-highlighted-field style='max-width: 600px;'
  .selectfield
    .field
      label for='select1' Vulputate
      .selectbox
        select id='select1'
          option Aliquam nisl nibh
          option Lacinia et diam ut
          option Morbi quis dui consequat
  .detail Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue.

.mod-highlighted-field style='max-width: 600px;'
  .toggle
    .header
      label
        span Nam accumsan quam eu blandit rhoncus. Suspendisse sed sem sagittis, ultricies erat ut, pretium neque. Vestibulum lacinia.
    .content
      label.toggler
        input type='radio' name='example5'
        span.button Sit
      label.toggler
        input type='radio' name='example5'
        span.button Ut
  .detail Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue.

.mod-highlighted-field style='max-width: 600px;'
  .textfield.focused
    .field
      label.i-lock for='number' Aenean gravida velit
      input type='text' id='number' placeholder='000-00-0000'
  .detail Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue.

.example style='padding: 30px; background-color: #00a4a5;'
  .mod-highlighted-field style='max-width: 600px;'
    .textfield
      .field
        label.i-lock for='number' Lorem Ipsum Dolor
        input type='text' id='number' placeholder='000-00-0000'
    .detail.light.discount
      span orci et ex
      span.big
        | 10
        sup %
      span
        | ut euismod
        br
        | diam tincidunt