<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Styleguide for Whiteout Mail Client</title> <link rel="stylesheet" href="../dist/css/all.min.css"> <style> body { margin: 0 auto; padding: 20px; max-width: 800px; } </style> </head> <body> <h1>Styleguide for Whiteout Mail Client</h1> <h2>1) Buttons</h2> <h3>Regular Buttons</h3> <p> <button class="btn">Label</button> <a class="btn" href="#" data-icon="">Send securely and invite</a> <button class="btn" disabled>Disabled Button</button> <a class="btn" aria-disabled="true" data-icon-append="" href="#">Disabled Link</a> </p> <h3>Icon Buttons</h3> <p> <button class="btn-icon"></button> <button class="btn-icon"></button> <button class="btn-icon"></button> <button class="btn-icon" disabled></button> </p> <h2>2) Labels</h2> <p> <span class="label">Max Mustermann</span> <span class="label label-primary" data-icon-append="">Max Mustermann</span> <span class="label label-light">1</span> </p> <h2>3) Mail List</h2> <ul class="mail-list"> <li class="mail-list-active mail-list-attachment"> <h3>welcome@whiteout.io</h3> <div class="head"> <p class="subject"> Welcome Nico </p> <time> Wednesday </time> </div> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis. </p> </li> <li> <h3>welcome@whiteout.io</h3> <div class="head"> <p class="subject"> Welcome Nico </p> <time> Wednesday </time> </div> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis. </p> </li> <li class="mail-list-attachment mail-list-unread"> <h3>welcome@whiteout.io</h3> <div class="head"> <p class="subject"> Welcome Nico </p> <time> Wednesday </time> </div> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis. </p> </li> <li class="mail-list-replied"> <h3>welcome@whiteout.io</h3> <div class="head"> <p class="subject"> Welcome Nico </p> <time> Wednesday </time> </div> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis. </p> </li> </ul> </body> </html>