.mod-steps-list
  h2 Proin aliquam tortor et aliquam dignissim
  ol
    li
      .image
        img src='holder.js/120x150?auto=yes'
      .content
        h6 Aenean ac bibendum nisi
        p
          | In rhoncus orci et ex fermentum, ut euismod diam tincidunt. Vivamus eu aliquet sapien, non fringilla enim. Ut scelerisque nulla at sem suscipit, at porta mi tincidunt. Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero vitae augue consequat aliquet. Fusce euismod bibendum orci at placerat. Vivamus ultricies augue in tortor pharetra convallis. Maecenas gravida ex a sed vulputate, sodales cursus risus blandit.
          em< Suspendisse molestie vel sapien
    li
      .image
        img src='holder.js/120x150?auto=yes'
      .content
        h6 Donec placerat ipsum a nulla
        p Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor sed vestibulum. Nunc mattis molestie libero, sed vulputate ipsum aliquet vitae. Proin pharetra felis et odio porttitor, et egestas tortor laoreet. Sed dapibus orci id sapien placerat, a consequat augue efficitur. Donec dui est, aliquet at enim ac, egestas consectetur orci. Aliquam nisl nibh, lacinia et diam ut, mattis facilisis lectus.
    li
      .image
        img src='holder.js/120x150?auto=yes'
      .content
        h6 Vestibulum lacinia
        p Morbi quis dui consequat, consectetur massa nec, blandit tellus. Nam accumsan quam eu blandit rhoncus. Suspendisse sed sem sagittis, ultricies erat ut, pretium neque. Vestibulum lacinia dignissim convallis. Nam consequat maximus turpis, vestibulum tristique metus aliquam eget. Aenean gravida velit suscipit imperdiet aliquam. Maecenas efficitur accumsan hendrerit.

h2 Nam metus massa, tempor vel tortor
.mod-steps-list.colored
  ol
    li
      strong Sed lobortis et quam at rhoncus
      | 10.0%
    li
      strong Vestibulum ante ipsum
      | 10.0%
    li
      strong Placerat
      | 10.0%

h2 Phasellus nisi est, posuere ut elit
.mod-steps-list.colored.legend
  ol
    li
      strong Vestibulum ante ipsum primis
      | 10.0%
    li
      strong Donec lobortis dui
      | 10.0%
    li
      strong Mauris
      | 10.0%
    li
      strong Pretium
      | 10.0%

.mod-steps-list
  ul
    li
      .image
        img src='holder.js/200x200?auto=yes'
      .content
        h6 Aenean ac bibendum nisi
        p Donec placerat ipsum a nulla maximus tincidunt
    li
      .image
        img src='holder.js/200x200?auto=yes'
      .content
        h6 Phasellus in laoreet quam
        p Integer suscipit orci odio, vel volutpat turpis ultrices at
    li
      .image
        img src='holder.js/200x200?auto=yes'
      .content
        h6 Curabitur ex nibh
        p Proin non accumsan dui. Ut pulvinar leo non iaculis condimentum.