Cards.CSS

dabblet.css

/**
 * Cards.CSS
 */

/*Icon*/

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*Typography*/


/*Import Roboto*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

/*Import CJK fallback*/

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
:root {
  --primary-color: #3F51B5;
  --accent-color: #FF4081;
}

* {
  font-family: 'Roboto', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Hiragino Sans GB', 'Microsoft YaHei', 'STHeiti', 'SimHei', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, .87);
  margin: 0;
  padding: 0;
}

a:focus,
a:not(:focus) {
  color: var(--accent-color);
  outline: none;
  text-decoration:none;
  border: none;
}

h1,
h2,
h3,
h4 {
  color: rgba(0, 0, 0, .54);
  max-width: 30em;
  font-weight: 400;
}

h1,
h2 {
  max-height: 1.18em;
  overflow: hidden;
}

h1 {
  font-size: 112px;
  font-weight: 300;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 56px;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 45px;
  line-height: 48px;
}

h4 {
  font-size: 34px;
  line-height: 40px;
}

h5,
h6,
cite,
em,
p,
span,
q {
  max-width: 60em;
  font-weight: 400;
  color: rgba(0, 0, 0, .87);
  font-style: normal;
}

h5 {
  font-size: 24px;
  line-height: 32px;
}

h6 {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.005em;
}

cite {
  font-size: 16px;
  line-height: 24px;
}

em {
  font-weight: 500;
  line-height: 24px;
}

p,
span {
  line-height: 20px;
}

q {
  font-size: 12px;
  color: rgba(0, 0, 0, .54);
  letter-spacing: 0.02em;
}

q:before,
q:after {
  content: none;
}

button {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  max-width: 60em;
}


/*Icon*/

.icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/*Desktop*/

@media only screen and (orientation: landscape) and (min-width: 1280px) {
  * {
    font-size: 13px;
  }
  cite {
    font-size: 15px;
  }
}


/*Button*/

button,
button:focus,
select {
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  min-width: 72px;
  margin: 8px;
  border-radius: 2px;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
}

button.dense,
select.dense {
  height: 32px;
  line-height: 32px;
  font-size: 13px;
}

button[disabled],
button[disabled]:hover,
button[disabled]:focus {
  color: rgba(0, 0, 0, .26);
  cursor: default;
}


/*Ripple*/

button:before {
  background: rgba(0, 0, 0, .12);
  opacity: 1;
  content: '';
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  padding-top: 0;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

button:focus:before {
  animation: ripple 0.75s;
}

button[disabled]:before {
  display: none;
}

button:before {
  transform: translateY(-.5em);
}

button.dense:before {
  transform: translateY(-.75em);
}


/*Flat Button*/

button.flat {
  background: none;
  min-width: 88px;
}

button.flat:not([disabled]):hover {
  background: rgba(0, 0, 0, .06);
}

button.flat:focus {
  background: rgba(0, 0, 0, .12);
}


/*Raised Button*/

button.raised {
  background: var(--primary-color);
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  transition: box-shadow .12s;
  color: #FFF;
}

button.raised:after {
  background: #000;
  opacity: 0;
  transition: opacity .12s;
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

button.raised:hover:not([disabled]):after,
button.raised:focus:after {
  opacity: .12;
}

button.raised:focus {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .19), 0 6px 3px 0 rgba(0, 0, 0, .23);
}

button.raised[disabled] {
  background: rgba(0, 0, 0, .12);
  color: rgba(0, 0, 0, .26);
}

button.raised:not([disabled]):before {
  background: rgba(255, 255, 255, .12);
}


/*Ripple Animation*/

@keyframes ripple {
  0% {
    padding-top: 0;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  50% {
    padding-top: 100%;
    width: 100%;
    height: 0;
    top: -50%;
    left: 0;
    opacity: 1;
  }
  100% {
    padding-top: 200%;
    width: 200%;
    height: 0;
    top: -150%;
    left: -50%;
    opacity: 0;
  }
}

@keyframes rippleMini {
  0% {
    padding-top: 0;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  75% {
    padding-top: 100%;
    width: 100%;
    height: 0;
    top: -50%;
    left: 0;
    opacity: 1;
  }
  100% {
    padding-top: 100%;
    width: 100%;
    height: 0;
    top: -50%;
    left: 0;
    opacity: 0;
  }
}


/*Dropdown Buttons*/

select {
  background: none;
  padding: 0 16px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  padding-bottom: 0;
  position: relative;
}

select:hover {
  background: #FFF;
}

select:focus {
  background: #FFF;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
}

select[disabled] {
  display: none;
}


/*Icon Toggle*/

button.icon,
button.material-icons {
  min-width: 36px;
  width: 36px;
  margin: 0;
  padding: 0 6px;
  background: none;
  color: rgba(0, 0, 0, .54);
  font-size: 24px;
  border-radius: 50%;
  overflow: visible;
}

button.icon:before,
button.material-icons:before {
  transform: translateY(50%);
}


/*FAB*/

button.FAB {
  background: var(--accent-color);
  width: 56px;
  height: 56px;
  line-height: 60px;
  padding: 0 16px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .16), 0 3px 3px 0 rgba(0, 0, 0, .23);
  transition: box-shadow .12s;
  overflow: visible;
  color: #FFF;
}

button.FAB:focus {
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .19), 0 6px 3px 0 rgba(0, 0, 0, .23);
}

button.FAB:focus:before {
  animation: rippleMini .5s;
}

button.FAB.mini {
  width: 40px;
  height: 40px;
  padding: 0 8px;
  line-height: 44px;
}

button.FAB:before {
  background: rgba(255, 255, 255, .12);
}


/*Menus*/

ul.menu {
  display: inline-block;
  margin: 0;
  overflow: hidden;
  font-size: 56px;
  list-style-type: none;
  background: #FFF;
  border-radius: 2px;
  min-width: 1em;
  text-align: left;
  max-height: 0;
  transition: all .36s;
  position: absolute;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  top: 0;
  left: 0;
  z-index: 100;
}

ul.menu.right {
  left: auto;
  right: 0;
}

ul.menu li {
  padding: 0 16px;
}

ul.menu li *,
ul.menu li {
  position: relative;
  min-height: 48px;
  line-height: 44px;
  margin: 0;
  text-decoration:none;
  color:#000;
}

ul.menu li:hover {
  background: rgba(0, 0, 0, .06)
}


/*Ripple*/

ul.menu li *:before {
  background: rgba(0, 0, 0, .12);
  opacity: 1;
  content: '';
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  padding-top: 0;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

ul.menu li *:focus:before {
  animation: ripple 0.75s;
}

*:focus ul.menu {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 8px 0;
  overflow-y: auto;
}

ul.menu+p {
  display: block;
  height: 0;
  padding: 0 16px;
  overflow: hidden;
}


/*Desktop*/

@media only screen and (orientation: landscape) and (min-width: 1280px) {
  *:focus ul.menu {
    padding: 16px 0;
  }
  ul.menu li {
    padding: 0 24px;
  }
}


/*Divider*/

hr {
  border: none;
  height: 1px;
  background: #000;
  color: #000;
  opacity: .12;
}


/*Text fields*/

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="search"],
textarea {
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, .38);
  padding: 16px 0 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  margin-bottom: 8px;
  height: 16px;
  line-height: 16px;
  transition: border .24s, padding .24s;
  overflow: auto;
  appearance: none;
  resize: none;
}

input[type="text"],
input[type="search"],
textarea {
  text-transform: capitalize;
}

input.dense[type="text"],
input.dense[type="password"],
input.dense[type="number"],
input.dense[type="tel"],
input.dense[type="url"],
input.dense[type="email"],
input.dense[type="search"],
textarea.dense {
  height: 16px;
  padding: 12px 0 7px 0;
  margin-bottom: 4px;
  font-size: 13px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  color: rgba(0, 0, 0, .54);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-color);
}

input[type="text"]:required:valid,
input[type="password"]:required:valid,
input[type="number"]:required:valid,
input[type="tel"]:required:valid,
input[type="url"]:required:valid,
input[type="email"]:required:valid,
input[type="search"]:required:valid,
textarea:required:valid {
  color: rgba(0, 0, 0, .87);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--primary-color);
}

input.dense[type="text"]:focus,
input.dense[type="password"]:focus,
input.dense[type="number"]:focus,
input.dense[type="tel"]:focus,
input.dense[type="url"]:focus,
input.dense[type="email"]:focus,
input.dense[type="search"]:focus,
textarea.dense:focus,
input.dense[type="text"]:required:valid,
input.dense[type="password"]:required:valid,
input.dense[type="number"]:required:valid,
input.dense[type="tel"]:required:valid,
input.dense[type="url"]:required:valid,
input.dense[type="email"]:required:valid,
input.dense[type="search"]:required:valid,
textarea.dense:required:valid {
  padding-bottom: 6px;
}

input[type="text"][disabled],
input[type="password"][disabled],
input[type="number"][disabled],
input[type="tel"][disabled],
input[type="url"][disabled],
input[type="email"][disabled],
input[type="search"][disabled],
textarea[disabled] {
  border-bottom: 1px dotted rgba(0, 0, 0, .12);
}

input[type="text"]:not(:focus):invalid,
input[type="password"]:not(:focus):invalid,
input[type="number"]:not(:focus):invalid,
input[type="tel"]:not(:focus):invalid,
input[type="url"]:not(:focus):invalid,
input[type="email"]:not(:focus):invalid,
input[type="search"]:not(:focus):invalid,
textarea:not(:focus):invalid {
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 6px;
  color: rgba(0, 0, 0, .87);
}

textarea {
  min-height: 16px;
  max-height: 48px;
  height: auto;
  line-height: 16px;
}


/*checkbox*/

input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10;
  opacity: 0;
}

input[type="checkbox"] + label:before {
  background: none;
  position: relative;
  z-index: 5;
  display: inline-block;
  left: -4px;
  width: 24px;
  height: 24px;
  content: "";
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

input[type="checkbox"]:disabled + label:before {
  content: "";
  color: rgba(0, 0, 0, .12)
}

input[type="checkbox"]:checked + label:before {
  content: "";
}

input[type="checkbox"] + label {
  position: relative;
  left: -22px;
  font-size: 14px;
  line-height: 24px;
  padding: 0;
  margin: 0;
}


/*radio*/

input[type="radio"]:not(:checked),
input[type="radio"]:checked {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10;
  opacity: 0;
}

input[type="radio"] + label:before {
  background: none;
  position: relative;
  z-index: 5;
  display: inline-block;
  left: -4px;
  width: 24px;
  height: 24px;
  content: "";
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

input[type="radio"]:disabled + label:before {
  content: "";
  color: rgba(0, 0, 0, .12)
}

input[type="radio"]:checked + label:before {
  content: "";
}

input[type="radio"] + label {
  position: relative;
  left: -22px;
  font-size: 14px;
  line-height: 24px;
  padding: 0;
  margin: 0;
}

#menu a:focus,
#menu a:not(:focus),
#menu button:focus,
#menu button:not(:focus)
#menu td{
 position:relative;
 overflow:visible;
}

dabblet.html

<table>
  <tr>
    <th></th>
    <th><em>Checkbox</em></th>
    <th><em>Radio</em></th>
  </tr>
  <tr>
    <td><em>Normal</em></td>
    <td>
      <input type="checkbox">
      <label></label>
    </td>
    <td>
      <input type="radio" name="radio">
      <label></label>
    </td>
  </tr>
  <tr>
    <td><em>Checked</em></td>
    <td>
      <input type="checkbox" checked>
      <label></label>
    </td>
    <td>
      <input type="radio" name="radio" checked>
      <label></label>
    </td>
  </tr>
  <tr>
    <td><em>Disabled</em></td>
    <td>
      <input type="checkbox" disabled>
      <label></label>
    </td>
    <td>
      <input type="radio" name="radio" disabled>
      <label></label>
    </td>
  </tr>
  <tr>
    <td><em>Disabled<br/>Checked</em></td>
    <td>
      <input type="checkbox" checked disabled>
      <label></label>
    </td>
    <td>
      <input type="radio" checked disabled>
      <label></label>
    </td>
  </tr>
</table>
<table>
  <tr>
    <th></th>
    <th><em>Normal</em></th>
    <th><em>Required</em></th>
    <th><em>Dense</em></th>
    <th><em>Disabled</em></th>
  </tr>
  <tr>
    <td><em>Text</em></td>
    <td><input type="text"></td>
    <td><input type="text" class="dense" required></td>
    <td><input class="dense" type="text"></td>
    <td><input type="text" class="dense" disabled></td>
  </tr>
  <tr>
    <td><em>Password</em></td>
    <td><input type="password"></td>
    <td><input type="password" class="dense" required></td>
    <td><input type="password" class="dense"></td>
    <td><input type="password" class="dense" disabled></td>
  </tr>
  <tr>
    <td><em>Number</em></td>
    <td><input type="number" value="100"></td>
    <td><input type="number" value="100" class="dense" required></td>
    <td><input type="number" class="dense" value="100" class="dense"></td>
    <td><input type="number" class="dense" value="100" disabled></td>
  </tr>
  <tr>
    <td><em>Tel</em></td>
    <td><input type="tel"></td>
    <td><input type="tel" class="dense" required></td>
    <td><input type="tel" class="dense"></td>
    <td><input type="tel" class="dense" disabled></td>
  </tr>
  <tr>
    <td><em>Url</em></td>
    <td><input type="url"></td>
    <td><input type="url" class="dense" required></td>
    <td><input type="url" class="dense"></td>
    <td><input type="url" class="dense" disabled></td>
  </tr>
  <tr>
    <td><em>Email</em></td>
    <td><input type="email"></td>
    <td><input type="email" class="dense" required></td>
    <td><input type="email" class="dense"></td>
    <td><input type="email" class="dense" disabled></td>
  </tr>
  <tr>
    <td><em>Search</em></td>
    <td><input type="search"></td>
    <td><input type="search" class="dense" required></td>
    <td><input type="search" class="dense"></td>
    <td><input type="search" class="dense" disabled></td>
  </tr>
  <tr>
    <td><em>Text Area</em></td>
    <td><textarea></textarea></td>
    <td><textarea class="dense" required></textarea></td>
    <td><textarea class="dense"></textarea></td>
    <td><textarea class="dense" disabled></textarea>
  </tr>
</table>
<table>
  <tr>
    <th>Dessert (100g serving)</th>
    <th>Calories</th>
    <th>Fat (g)</th>
    <th>Carbs (g)</th>
    <th>Protein (g)</th>
    <th>Sodium (mg)</th>
    <th>Calcium (%)</th>
    <th>Iron (%)</th>
  </tr>
  <tr>
    <td>Frozen yogurt</td>
    <td>159</td>
    <td>6.0</td>
    <td>24</td>
    <td>4.0</td>
    <td>87</td>
    <td>14%</td>
    <td>1%</td>
  </tr>
  <tr>
    <td>Ice cream sandwich</td>
    <td>237</td>
    <td>9.0</td>
    <td>37</td>
    <td>4.3</td>
    <td>129</td>
    <td>8%</td>
    <td>1%</td>
  </tr>
  <tr>
    <td>Eclair</td>
    <td>262</td>
    <td>16.0</td>
    <td>24</td>
    <td>6.0</td>
    <td>337</td>
    <td>6%</td>
    <td>7%</td>
  </tr>
  <tr>
    <td>Cupcake</td>
    <td>305</td>
    <td>3.7</td>
    <td>67</td>
    <td>4.3</td>
    <td>413</td>
    <td>3%</td>
    <td>8%</td>
  </tr>
  <tr>
    <td>Gingerbread</td>
    <td>356</td>
    <td>16.0</td>
    <td>49</td>
    <td>3.9</td>
    <td>327</td>
    <td>7%</td>
    <td>16%</td>
    <td></td>
  </tr>
  <tr>
    <td>Jelly bean</td>
    <td>375</td>
    <td>0.0</td>
    <td>94</td>
    <td>0.0</td>
    <td>50</td>
    <td>0%</td>
    <td>0%</td>
  </tr>
  <tr>
    <td>Lollipop</td>
    <td>392</td>
    <td>0.2</td>
    <td>98</td>
    <td>0</td>
    <td>38</td>
    <td>0%</td>
    <td>2%</td>
  </tr>
  <tr>
    <td>Honeycomb</td>
    <td>408</td>
    <td>3.2</td>
    <td>87</td>
    <td>6.5</td>
    <td>562</td>
    <td>0%</td>
    <td>45%</td>
  </tr>
  <tr>
    <td>Donut</td>
    <td>452</td>
    <td>25.0</td>
    <td>51</td>
    <td>4.9</td>
    <td>326</td>
    <td>2%</td>
    <td>22%</td>
  </tr>
  <tr>
    <td>KitKat</td>
    <td>518</td>
    <td>26.0</td>
    <td>65</td>
    <td>7</td>
    <td>54</td>
    <td>12%</td>
    <td>6%</td>
  </tr>
</table>

<h4>Dividers</h4>
<q>Little dividers</q>
<hr>
<p>Adorable divider</p>
<hr>


<h5>Menus</h5>
<q>Dropdown button can be replaced with using menus, radio button and labels.</q>
<table id="menu">
  <tr>
    <td></td>
    <td><em>Link</em></td>
    <td><em>Text Button</em></td>
    <td><em>Icon Toggle</em></td>
  </tr>
  <tr>
    <td>Code</td>
    <td>&lt;a&gt; Tag</td>
    <td>&lt;button&gt; Tag</td>
    <td>&lt;button&gt; Tag</td>
  </tr>
  <tr>
    <td>Caption</td>
    <td><q></q></td>
    <td><q>Use a &lt;p&gt; Tag with the longest selection text to fix width of menu</q></td>
    <td><q></q></td>
  </tr>
  <tr class="example">
    <td>Example</td>
    <td>
      <a href="#">Menu
        <ul class="menu">
          <li>Yes</li>
          <li>No</li>
          <li>Maybe</li>
        </ul>
      </a>
    </td>
    <td>
      <button>你好
        <ul class="menu">
          <li><a href="#">很高興認識你</a></li>
          <li><a href="#">不見許久</a></li>
          <li><a href="#">吃飯了嗎</a></li>
        </ul>
        <p>很高興認識你<p>
      </button>
    </td>
    <td>
      <button class="icon">&#xE5D4;
        <ul class="menu">
          <li><p>Show all notification content</p></li>
          <li><p>Hide sensitive notification content</p></li>
          <li><p>Hide all notification content</p></li>
        </ul>
      </button>
    </td>
  </tr>
  <tr class="example">
    <td>Example</td>
    <td>
      <a href="#">Menu
        <ul class="menu right">
          <li>Yes</li>
          <li>No</li>
          <li>Maybe</li>
        </ul>
      </a>
    </td>
    <td>
      <button>你好
        <ul class="menu right">
          <li><a href="#">很高興認識你</a></li>
          <li><a href="#">不見許久</a></li>
          <li><a href="#">吃飯了嗎</a></li>
        </ul>
        <p>很高興認識你<p>
      </button>
    </td>
    <td>
      <button class="icon">&#xE5D4;
        <ul class="menu right">
          <li><p>Show all notification content</p></li>
          <li><p>Hide sensitive notification content</p></li>
          <li><p>Hide all notification content</p></li>
        </ul>
      </button>
    </td>
  </tr>
</table>

<h5>Buttons with Text</h5>
<table>
  <tr>
    <td>
      
    </td>
    <td>
      <em>Default Button</em>
    </td>
    <td>
      <em>Dense Button</em>
    </td>
    <td>
      <em>Disabled Button</em>
    </td>
  </tr>
  <tr>
    <td>
      Density
    </td>
    <td>
      <button>
        button
      </button>
    </td>
    <td>
      <button class="dense">
        button
      </button>
    </td>
    <td>
      <button disabled>
        button
      </button>
    </td>
  </tr>
  <tr>
    <td>
      Flat Button
    </td>
    <td>
      <button class="flat">
        button
      </button>
    </td>
    <td>
      <button class="flat dense">
        button
      </button>
    </td>
    <td>
      <button class="flat" disabled>
        button
      </button>
    </td>
  </tr>
  <tr>
    <td>
      Raised Button
    </td>
    <td>
      <button class="raised">
        button
      </button>
    </td>
    <td>
      <button class="raised dense">
        button
      </button>
    </td>
    <td>
      <button class="raised" disabled>
        button
      </button>
    </td>
  </tr>
  <tr>
    <td>
      Dropdown Button
    </td>
    <td>
      <select>
        <option>Arial</option>
        <option>Calibri</option>
        <option>Courier</option>
        <option>Verdana</option>
      </select>
    </td>
    <td>
      <select class="dense">
        <option>State 1</option>
        <option>State 2</option>
        <option>State 3</option>
        <option>State 4</option>
      </select>
    </td>
    <td>
      <select disabled>
        <option>State 1</option>
        <option>State 2</option>
        <option>State 3</option>
        <option>State 4</option>
      </select>
    </td>
  </tr>
</table>
<h5>Buttons with Icon</h5>

<table>
  <tr>
    <td>
      <em>Class</em>
    </td>
    <td>
      <em>"icon"</em>
    </td>
    <td>
      <em>"material-icons"</em>
    </td>
  </tr>
  <tr>
    <td>
      Icon Toggle
    </td>
    <td>
      <button class="icon">star_rate</button>
      <button class="icon">&#xE87D;</button>
    </td>
    <td>
      <button class="material-icons">star_rate</button>
      <button class="material-icons">&#xE87D;</button>
    </td>
  </tr>
  <tr>
    <td>
      Floating Action Button
    </td>
    <td>
      <button class="FAB icon">star_rate</button>
      <button class="FAB icon">&#xE87D;</button>
    </td>
    <td>
      <button class="FAB material-icons">star_rate</button>
      <button class="FAB material-icons">&#xE87D;</button>
    </td>
  </tr>
  <tr>
    <td>
      FAB mini
    </td>
    <td>
      <button class="FAB mini icon">star_rate</button>
      <button class="FAB mini icon">&#xE87D;</button>
    </td>
    <td>
      <button class="FAB mini material-icons">star_rate</button>
      <button class="FAB mini material-icons">&#xE87D;</button>
    </td>
  </tr>
</table>

<table>
  <tr>
    <td>
      <em>Display 4</em>
    </td>
    <td>
      <h1>Light 112sp</h1>
    </td>
  </tr>
  <tr>
    <td>
      <em>Display 3</em>
    </td>
    <td>
      <h2>Regular 56sp</h2>
    </td>
  </tr>
  <tr>
    <td>
      <em>Display 2</em>
    </td>
    <td>
      <h3>Regular 45sp</h3>
    </td>
  </tr>
  <tr>
    <td>
      <em>Display 1</em>
    </td>
    <td>
      <h4>Regular 34sp</h4>
    </td>
  </tr>
  <tr>
    <td>
      <em>Headline</em>
    </td>
    <td>
      <h5>Regular 24sp</h5>
    </td>
  </tr>
  <tr>
    <td>
      <em>Title</em>
    </td>
    <td>
      <h6>Medium 20sp</h6>
    </td>
  </tr>
  <tr>
    <td>
      <em>Subheading</em>
    </td>
    <td>
      <cite>Regular 16sp (Device), Regular 15sp (Desktop)</cite>
    </td>
  </tr>
  <tr>
    <td>
      <em>Body 2</em>
    </td>
    <td>
      <em>Medium 14sp (Device), Medium 13sp (Desktop)</em>
    </td>
  </tr>
  <tr>
    <td>
      <em>Body 1</em>
    </td>
    <td>
      <p>Regular 14sp (Device), Regular 13sp (Desktop)</p>
    </td>
  </tr>
  <tr>
    <td>
      <em>Caption</em>
    </td>
    <td>
      <q>Regular 12sp</q>
    </td>
  </tr>
  <tr>
    <td>
      <em>Button</em>
    </td>
    <td>
      <button>MEDIUM (ALL CAPS) 14sp</button>
    </td>
  </tr>
</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}