"ui mailbox"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/marcobiedermann/pen/EuFDh?limit=all&page=2&q=uikit" /> <style class="cp-pen-styles">@charset "utf-8"; /* CSS Document */ /* ---------- ENTYPO ---------- */ /* ---------- http://www.entypo.com/ ---------- */ /* ---------- http://weloveiconfonts.com/ ---------- */ @import url(http://weloveiconfonts.com/api/?family=entypo); /* ---------- ERIC MEYER'S RESET CSS ---------- */ /* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */ @import url(https://meyerweb.com/eric/tools/css/reset/reset.css); /* ---------- FONTAWESOME ---------- */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* ---------- GENERAL ---------- */ body { background-color: #32bba9; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; } a { text-decoration: none; } .clearfix { *zoom: 1; } /* For IE 6/7 */ .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /* ---------- Mailbox ---------- */ .count { background-color: #3090bd; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; color: #ecf0f1; display: inline-block; font-size: 12px; line-height: 24px; height: 24px; min-width: 12px; margin-top: 8px; padding: 0 6px; text-align: center; } #mailbox { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 50px auto; width: 340px; } #mailbox header { background-color: #4f4245; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; color: #ecf0f1; font-weight: bold; height: 50px; line-height: 50px; text-align: center; } #mailbox ul { background-color: #ecf0f1; } #mailbox ul li { border-bottom: 1px solid #a6a8a9; color: #776b6c; height: 40px; line-height: 40px; padding: 0 24px; } #mailbox ul li:hover { background-color: #56a3c7; color: #ecf0f1; } #mailbox ul li:hover a { color: #ecf0f1; } #mailbox ul li span[class*="entypo"] { display: inline-block; padding-right: 18px; width: 16px; } #mailbox ul li a { color: #3e4146; } #mailbox ul li span[class*="count"] { float: right; } #mailbox footer { background-color: #ecf0f1; color: #3e4146; height: 50px; line-height: 50px; padding-left: 24px; } #mailbox footer a { color: #3e4146; } #mailbox footer span[class*="entypo"] { padding-left: 8px; }</style></head><body> <html lang="en-US"> <head> <meta charset="utf-8"> <title>Mailbox UI</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"> <!--[if lt IE 9]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="mailbox"> <header> <h3>Mailbox</h3> </header> <ul> <li class="clearfix"> <span class="entypo-inbox"></span> <a href="#">Inbox</a> <span class="count">1337</span> </li> <li class="clearfix"> <span class="entypo-star"></span> <a href="#">Favorites</a> <span class="count">4</span> </li> <li class="clearfix"> <span class="entypo-paper-plane"></span> <a href="#">Sent</a> <span class="count">132</span> </li> <li class="clearfix"> <span class="entypo-flag"></span> <a href="#">Flagged</a> <span class="count">3</span> </li> <li class="clearfix"> <span class="entypo-trash"></span> <a href="#">Deleted</a> <span class="count">42</span> </li> </ul> <footer> <p><a href="#">More</a><span class="entypo-down-open"></span></p> </footer> </div> <!-- end mailbox --> </body> </html> </body></html>

Related: See More

Rubik Presentation Page

Questions / Comments: