diff --git a/dist/chota.css b/dist/chota.css
index 0813bd9..d63268f 100644
--- a/dist/chota.css
+++ b/dist/chota.css
@@ -2,6 +2,7 @@
 :root {
     --primary-color: #1a9f60;
     --lightGrey-color: #d2d6dd;
+    --darkGrey-color: #84868b;
     --grid-maxWidth: 120rem;
     --grid-gutter: 2rem;
     --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -129,9 +130,11 @@ abbr[title] {
 img {
     max-width: 100%;
 }
-fieldset,
+fieldset {
+    border: 1px solid var(--lightGrey-color); 
+}
 iframe {
-    border: 1px solid var(--lightGrey-color);
+    border: 0;
 }
 .container {
     max-width: var(--grid-maxWidth);
@@ -232,112 +235,120 @@ iframe {
     }
 }
 fieldset {
-    padding: 0.5rem 2rem;
+  padding: 0.5rem 2rem;
 }
 legend {
-    text-transform: uppercase;
-    font-size: 0.8em;
-    letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  letter-spacing: 0.1rem;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
 select,
 textarea,
-textarea[type=text] {
-    font-family: inherit;
-    padding: 0.7rem 1rem;
-    border-radius: 4px;
-    border: 1px solid var(--lightGrey-color);
-    font-size: 1em;
-    transition: all 0.2s ease;
-    display: block;
-    width: 100%;
+textarea[type="text"] {
+  font-family: inherit;
+  padding: 0.7rem 1rem;
+  border-radius: 4px;
+  border: 1px solid var(--lightGrey-color);
+  font-size: 1em;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
 select:hover,
 textarea:hover,
-textarea[type=text]:hover {
-    border-color: #aaa;
+textarea[type="text"]:hover {
+  border-color: #aaa;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
 select:focus,
 textarea:focus,
-textarea[type=text]:focus {
-    outline: none;
-    border-color: var(--primary-color);
+textarea[type="text"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
 }
 select {
-    -webkit-appearance: none;
-    background: #fafafa no-repeat 100%;
-    background-size: 1ex;
-    background-origin: content-box;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
+  -webkit-appearance: none;
+  background: #fafafa no-repeat 100%;
+  background-size: 1ex;
+  background-origin: content-box;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }
 [type="checkbox"],
 [type="radio"] {
-    width: 1.6rem;
-    height: 1.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }
 /* BUTTONS */
 .button,
-[type=button],
-[type=reset],
-[type=submit],
+[type="button"],
+[type="reset"],
+[type="submit"],
 button {
-    padding: 1rem 2.5rem;
-    color: #333;
-    background: #e6e6e6;
-    border-radius: 4px;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    text-align: center;
-    transition: opacity 0.2s ease;
-    text-decoration: none;
-    transform: scale(1);
-    display: inline-block;
+  padding: 1rem 2.5rem;
+  color: #333;
+  background: #e6e6e6;
+  border-radius: 4px;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  text-align: center;
+  transition: opacity 0.2s ease;
+  text-decoration: none;
+  transform: scale(1);
+  display: inline-block;
 }
 .button + .button {
-    margin-left: 1rem;
+  margin-left: 1rem;
 }
 .button:hover,
-[type=button]:hover,
-[type=reset]:hover,
-[type=submit]:hover,
+[type="button"]:hover,
+[type="reset"]:hover,
+[type="submit"]:hover,
 button:hover {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 .button:active,
-[type=button]:active,
-[type=reset]:active,
-[type=submit]:active,
+[type="button"]:active,
+[type="reset"]:active,
+[type="submit"]:active,
 button:active {
-    transform: scale(0.98);
+  transform: scale(0.98);
 }
 input[disabled],
 button[disabled],
 input[disabled]:hover,
 button[disabled]:hover {
-    opacity: 0.4;
-    cursor: not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 .button.primary,
-[type=submit] {
-    color: #fff;
-    background-color: #000;
-    background: var(--primary-color);
+.button.secondary,
+[type="submit"] {
+  color: #fff;
+  background-color: #000;
+  background: var(--primary-color);
+}
+.button.secondary {
+  background: var(--darkGrey-color);
 }
 .button.outline {
-    background-color: transparent;
-    border: 1px solid var(--lightGrey-color);
+  background-color: transparent;
+  border: 1px solid var(--lightGrey-color);
 }
 .button.outline.primary {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+.button.outline.secondary {
+  border-color: var(--darkGrey-color);
+  color: var(--darkGrey-color);
 }
 .button.clear {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--primary-color);
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
 }
 .nav {
     display: -ms-flexbox;
@@ -407,6 +418,9 @@ button[disabled]:hover {
     padding-top: 0;
     padding-bottom: 0;
 }
+.nav .brand img {
+    padding-right: 1rem;
+}
 .nav .button {
     margin: auto 1rem;
 }
@@ -449,6 +463,26 @@ button[disabled]:hover {
     -ms-flex: 1;
         flex: 1;
 }
+.tag {
+  display: inline-block;
+  border: 1px solid var(--lightGrey-color);
+  text-transform: uppercase;
+  color: var(--darkGrey-color);
+  padding: 0.5rem;
+  line-height: 1;
+  letter-spacing: 0.5px;
+}
+.tag.is-small {
+  padding: 0.4rem;
+  font-size: 0.75em;
+}
+.tag.is-large {
+  padding: 0.7rem;
+  font-size: 1.125em;
+}
+.tag+.tag {
+  margin-left: 1rem;
+}
 .pull-right {
     float: right;
 }
diff --git a/dist/chota.min.css b/dist/chota.min.css
index 5299d78..f3280d4 100644
--- a/dist/chota.min.css
+++ b/dist/chota.min.css
@@ -1,2 +1,2 @@
 /*! chota.css | MIT License | github.com/jenil/chota */
-:root{--primary-color: #1a9f60;--lightGrey-color: #d2d6dd;--grid-maxWidth: 120rem;--grid-gutter: 2rem;--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:"Segoe UI","Helvetica Neue",san-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--primary-color);text-decoration:none}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{border:0;background-color:var(--lightGrey-color);height:1px;margin:1rem 0}table{width:100%;border:0;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,"Consolas","Lucida Console",monospace}code,kbd,pre{background-color:#f7f7f7}code,kbd{white-space:pre-wrap;border-radius:4px;color:#c62424;padding:.2em .4em;padding:0 .4rem;font-size:90%}pre{font-size:1em;padding:1rem;overflow-x:auto}pre code{background:0 0;padding:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}img{max-width:100%}fieldset,iframe{border:1px solid var(--lightGrey-color)}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:96%;padding:0 calc(var(--grid-gutter)/2)}.row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.col{-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));max-width:calc((100%/(12/1)) - var(--grid-gutter))}.col-2{-ms-flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));max-width:calc((100%/(12/2)) - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));max-width:calc((100%/(12/3)) - var(--grid-gutter))}.col-4{-ms-flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));max-width:calc((100%/(12/4)) - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));max-width:calc((100%/(12/5)) - var(--grid-gutter))}.col-6{-ms-flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));max-width:calc((100%/(12/6)) - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));max-width:calc((100%/(12/7)) - var(--grid-gutter))}.col-8{-ms-flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));max-width:calc((100%/(12/8)) - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));max-width:calc((100%/(12/9)) - var(--grid-gutter))}.col-10{-ms-flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));max-width:calc((100%/(12/10)) - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));max-width:calc((100%/(12/11)) - var(--grid-gutter))}.col-12{-ms-flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));max-width:calc((100%/(12/12)) - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}fieldset{padding:.5rem 2rem}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:0;border-color:var(--primary-color)}select{-webkit-appearance:none;background:#fafafa no-repeat 100%;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>")}[type=checkbox],[type=radio]{width:1.6rem;height:1.6rem}.button,[type=button],[type=reset]{color:#333}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;background:#e6e6e6;border-radius:4px;border:0;font-size:1.5rem;line-height:1;text-align:center;transition:opacity .2s ease;text-decoration:none;transform:scale(1);display:inline-block}button{color:#333}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.primary,[type=submit]{color:#fff;background-color:#000;background:var(--primary-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;-ms-flex-align:stretch;align-items:stretch}.nav img{max-height:3rem}.nav,.nav>.container{display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.nav-left{-ms-flex-pack:start;justify-content:flex-start}.nav-right{-ms-flex-pack:end;justify-content:flex-end}.nav-center{-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}}.nav .brand,.nav a{text-decoration:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:1rem 2rem;color:#555}.nav .active:not(.button){color:#000;color:var(--primary-color)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;-ms-flex:0 1 auto;flex:0 1 auto;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.tabs.is-full a{-ms-flex:1;flex:1}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.is-center,.is-horizontal-align,.is-left,.is-right{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.is-center,.is-left,.is-right{-ms-flex-align:center;align-items:center}.is-left,.is-right{-ms-flex-pack:end;justify-content:flex-end}.is-left{-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.clearfix{content:"";display:table;clear:both}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}}
\ No newline at end of file
+:root{--primary-color: #1a9f60;--lightGrey-color: #d2d6dd;--darkGrey-color: #84868b;--grid-maxWidth: 120rem;--grid-gutter: 2rem;--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:"Segoe UI","Helvetica Neue",san-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--primary-color);text-decoration:none}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,"Consolas","Lucida Console",monospace}code,kbd,pre{background-color:#f7f7f7}code,kbd{white-space:pre-wrap;border-radius:4px;color:#c62424;padding:.2em .4em;padding:0 .4rem;font-size:90%}pre{font-size:1em;padding:1rem;overflow-x:auto}pre code{background:0 0;padding:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}img{max-width:100%}fieldset{border:1px solid var(--lightGrey-color);padding:.5rem 2rem}hr,iframe,table{border:0}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:96%;padding:0 calc(var(--grid-gutter)/2)}.row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.col{-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));max-width:calc((100%/(12/1)) - var(--grid-gutter))}.col-2{-ms-flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));max-width:calc((100%/(12/2)) - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));max-width:calc((100%/(12/3)) - var(--grid-gutter))}.col-4{-ms-flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));max-width:calc((100%/(12/4)) - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));max-width:calc((100%/(12/5)) - var(--grid-gutter))}.col-6{-ms-flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));max-width:calc((100%/(12/6)) - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));max-width:calc((100%/(12/7)) - var(--grid-gutter))}.col-8{-ms-flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));max-width:calc((100%/(12/8)) - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));max-width:calc((100%/(12/9)) - var(--grid-gutter))}.col-10{-ms-flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));max-width:calc((100%/(12/10)) - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));max-width:calc((100%/(12/11)) - var(--grid-gutter))}.col-12{-ms-flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));max-width:calc((100%/(12/12)) - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:0;border-color:var(--primary-color)}select{-webkit-appearance:none;background:#fafafa no-repeat 100%;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>")}[type=checkbox],[type=radio]{width:1.6rem;height:1.6rem}.button,[type=button],[type=reset]{color:#333}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;background:#e6e6e6;border-radius:4px;border:0;font-size:1.5rem;line-height:1;text-align:center;transition:opacity .2s ease;text-decoration:none;transform:scale(1);display:inline-block}button{color:#333}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.primary,.button.secondary,[type=submit]{color:#fff;background-color:#000;background:var(--primary-color)}.button.secondary{background:var(--darkGrey-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.outline.secondary{border-color:var(--darkGrey-color);color:var(--darkGrey-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;-ms-flex-align:stretch;align-items:stretch}.nav img{max-height:3rem}.nav,.nav>.container{display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.nav-left{-ms-flex-pack:start;justify-content:flex-start}.nav-right{-ms-flex-pack:end;justify-content:flex-end}.nav-center{-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}}.nav .brand,.nav a{text-decoration:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:1rem 2rem;color:#555}.nav .active:not(.button){color:#000;color:var(--primary-color)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .brand img{padding-right:1rem}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;-ms-flex:0 1 auto;flex:0 1 auto;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.tabs.is-full a{-ms-flex:1;flex:1}.tag{display:inline-block;border:1px solid var(--lightGrey-color);text-transform:uppercase;color:var(--darkGrey-color);padding:.5rem;line-height:1;letter-spacing:.5px}.tag.is-small{padding:.4rem;font-size:.75em}.tag.is-large{padding:.7rem;font-size:1.125em}.tag+.tag{margin-left:1rem}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.is-center,.is-horizontal-align,.is-left,.is-right{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.is-center,.is-left,.is-right{-ms-flex-align:center;align-items:center}.is-left,.is-right{-ms-flex-pack:end;justify-content:flex-end}.is-left{-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.clearfix{content:"";display:table;clear:both}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}}
\ No newline at end of file
diff --git a/src/_base.css b/src/_base.css
index 605ec22..da48b3e 100644
--- a/src/_base.css
+++ b/src/_base.css
@@ -1,6 +1,7 @@
 :root {
     --primary-color: #1a9f60;
     --lightGrey-color: #d2d6dd;
+    --darkGrey-color: #84868b;
     --grid-maxWidth: 120rem;
     --grid-gutter: 2rem;
     --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -155,7 +156,10 @@ img {
     max-width: 100%;
 }
 
-fieldset,
-iframe {
-    border: 1px solid var(--lightGrey-color);
+fieldset {
+    border: 1px solid var(--lightGrey-color); 
 }
+
+iframe {
+    border: 0;
+}
\ No newline at end of file
diff --git a/src/_form.css b/src/_form.css
index 846c3d5..3410b2b 100644
--- a/src/_form.css
+++ b/src/_form.css
@@ -1,123 +1,133 @@
 fieldset {
-    padding: 0.5rem 2rem;
+  padding: 0.5rem 2rem;
 }
 
 legend {
-    text-transform: uppercase;
-    font-size: 0.8em;
-    letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  letter-spacing: 0.1rem;
 }
 
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
 select,
 textarea,
-textarea[type=text] {
-    font-family: inherit;
-    padding: 0.7rem 1rem;
-    border-radius: 4px;
-    border: 1px solid var(--lightGrey-color);
-    font-size: 1em;
-    transition: all 0.2s ease;
-    display: block;
-    width: 100%;
+textarea[type="text"] {
+  font-family: inherit;
+  padding: 0.7rem 1rem;
+  border-radius: 4px;
+  border: 1px solid var(--lightGrey-color);
+  font-size: 1em;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
 }
 
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
 select:hover,
 textarea:hover,
-textarea[type=text]:hover {
-    border-color: #aaa;
+textarea[type="text"]:hover {
+  border-color: #aaa;
 }
 
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
 select:focus,
 textarea:focus,
-textarea[type=text]:focus {
-    outline: none;
-    border-color: var(--primary-color);
+textarea[type="text"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
 }
 
 select {
-    -webkit-appearance: none;
-    background: #fafafa no-repeat 100%;
-    background-size: 1ex;
-    background-origin: content-box;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
+  -webkit-appearance: none;
+  background: #fafafa no-repeat 100%;
+  background-size: 1ex;
+  background-origin: content-box;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }
 
 [type="checkbox"],
 [type="radio"] {
-    width: 1.6rem;
-    height: 1.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }
 
 /* BUTTONS */
 .button,
-[type=button],
-[type=reset],
-[type=submit],
+[type="button"],
+[type="reset"],
+[type="submit"],
 button {
-    padding: 1rem 2.5rem;
-    color: #333;
-    background: #e6e6e6;
-    border-radius: 4px;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    text-align: center;
-    transition: opacity 0.2s ease;
-    text-decoration: none;
-    transform: scale(1);
-    display: inline-block;
+  padding: 1rem 2.5rem;
+  color: #333;
+  background: #e6e6e6;
+  border-radius: 4px;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  text-align: center;
+  transition: opacity 0.2s ease;
+  text-decoration: none;
+  transform: scale(1);
+  display: inline-block;
 }
 
 .button + .button {
-    margin-left: 1rem;
+  margin-left: 1rem;
 }
 
 .button:hover,
-[type=button]:hover,
-[type=reset]:hover,
-[type=submit]:hover,
+[type="button"]:hover,
+[type="reset"]:hover,
+[type="submit"]:hover,
 button:hover {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 
 .button:active,
-[type=button]:active,
-[type=reset]:active,
-[type=submit]:active,
+[type="button"]:active,
+[type="reset"]:active,
+[type="submit"]:active,
 button:active {
-    transform: scale(0.98);
+  transform: scale(0.98);
 }
 
 input[disabled],
 button[disabled],
 input[disabled]:hover,
 button[disabled]:hover {
-    opacity: 0.4;
-    cursor: not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 .button.primary,
-[type=submit] {
-    color: #fff;
-    background-color: #000;
-    background: var(--primary-color);
+.button.secondary,
+[type="submit"] {
+  color: #fff;
+  background-color: #000;
+  background: var(--primary-color);
+}
+
+.button.secondary {
+  background: var(--darkGrey-color);
 }
 
 .button.outline {
-    background-color: transparent;
-    border: 1px solid var(--lightGrey-color);
+  background-color: transparent;
+  border: 1px solid var(--lightGrey-color);
 }
 
 .button.outline.primary {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.button.outline.secondary {
+  border-color: var(--darkGrey-color);
+  color: var(--darkGrey-color);
 }
 
 .button.clear {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--primary-color);
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
 }
diff --git a/src/_nav.css b/src/_nav.css
index 63fd939..c262e4b 100644
--- a/src/_nav.css
+++ b/src/_nav.css
@@ -64,6 +64,10 @@
     padding-bottom: 0;
 }
 
+.nav .brand img {
+    padding-right: 1rem;
+}
+
 .nav .button {
     margin: auto 1rem;
 }
diff --git a/src/_tag.css b/src/_tag.css
new file mode 100644
index 0000000..8285684
--- /dev/null
+++ b/src/_tag.css
@@ -0,0 +1,23 @@
+.tag {
+  display: inline-block;
+  border: 1px solid var(--lightGrey-color);
+  text-transform: uppercase;
+  color: var(--darkGrey-color);
+  padding: 0.5rem;
+  line-height: 1;
+  letter-spacing: 0.5px;
+}
+
+.tag.is-small {
+  padding: 0.4rem;
+  font-size: 0.75em;
+}
+
+.tag.is-large {
+  padding: 0.7rem;
+  font-size: 1.125em;
+}
+
+.tag+.tag {
+  margin-left: 1rem;
+}
\ No newline at end of file
diff --git a/src/chota.css b/src/chota.css
index 44416a5..249fff2 100644
--- a/src/chota.css
+++ b/src/chota.css
@@ -6,5 +6,6 @@
 @import "_nav.css";
 @import "_card.css";
 @import "_tab.css";
+@import "_tag.css";
 
 @import "_util.css";
diff --git a/test/components.html b/test/components.html
index bb2dea1..b425d56 100644
--- a/test/components.html
+++ b/test/components.html
@@ -14,6 +14,9 @@
 </head>
 
 <body>
+  <div class="container">
+    <h1>Nav</h1>
+  </div>
   <nav class="nav">
     <div class="container">
       <div class="nav-left">
@@ -30,6 +33,8 @@
     </div>
   </nav>
   <br>
+  <hr>
+  <br>
   <nav class="nav">
     <div class="nav-left">
       <a class="brand" href="#">Logo</a>
@@ -44,244 +49,269 @@
     </div>
   </nav>
   <div class="container">
-    <h1>Nav</h1>
-    <nav class="nav">
-      <div class="nav-center">
-        <a href="#!1.html">Link 1</a>
-        <a href="#!2.html">Link 2</a>
-        <a href="#!3.html" class="active">Link 3</a>
-        <a href="#!" class="button primary">Button</a>
-      </div>
-    </nav>
-    <br><hr><br>
-    <nav class="nav">
-      <div class="nav-left">
-        <a class="brand" href="#">Brand</a>
-      </div>
-      <div class="nav-right">
-        <div class="tabs">
+    <section>
+      <br>
+      <hr>
+      <br>
+      <nav class="nav">
+        <div class="nav-center">
           <a href="#!1.html">Link 1</a>
           <a href="#!2.html">Link 2</a>
           <a href="#!3.html" class="active">Link 3</a>
+          <a href="#!" class="button primary">Button</a>
+        </div>
+      </nav>
+      <br>
+      <hr>
+      <br>
+      <nav class="nav">
+        <div class="nav-left">
+          <a class="brand" href="#">
+            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> Brand</a>
+        </div>
+        <div class="nav-right">
+          <div class="tabs">
+            <a href="#!1.html">Link 1</a>
+            <a href="#!2.html">Link 2</a>
+            <a href="#!3.html" class="active">Link 3</a>
+          </div>
+        </div>
+      </nav>
+      <br>
+      <hr>
+      <br>
+      <nav class="nav">
+        <div class="nav-left">
+          <a class="brand" href="#">
+            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
+          </a>
+          <div class="tabs">
+            <a href="#!1.html">Link 1</a>
+            <a href="#!2.html">Link 2</a>
+            <a href="#!3.html">Link 3</a>
+          </div>
+        </div>
+      </nav>
+      <br>
+      <hr>
+      <br>
+    </section>
+    <section>
+      <h1>Tabs</h1>
+      <div class="tabs">
+        <a class="active" href="#!1.html">Tab 1</a>
+        <a href="#!2.html">Tab 2</a>
+        <a href="#!3.html">Tab 3</a>
+      </div>
+      <br>
+      <hr>
+      <br>
+      <div class="tabs is-full">
+        <a class="active" href="#!1.html">Tab 1</a>
+        <a href="#!2.html">Tab 2</a>
+        <a href="#!3.html">Tab 3</a>
+      </div>
+    </section>
+    <section>
+      <h1>Card</h1>
+      <div class="row is-center">
+        <div class="col-4">
+          <div class="card">
+            <header>
+              <h4>Card title</h4>
+            </header>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
+            <footer class="is-right">
+              <a href="#!" class="button primary">Submit</a>
+              <a href="#!" class="button">Cancel</a>
+            </footer>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="card">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
+            <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis,
+              debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
+          </div>
         </div>
       </div>
-    </nav>
-    <br><hr><br>
-    <nav class="nav">
-      <div class="nav-left">
-        <a class="brand" href="#">
-          <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
-        </a>
-        <div class="tabs">
-          <a href="#!1.html">Link 1</a>
-          <a href="#!2.html">Link 2</a>
-          <a href="#!3.html">Link 3</a>
+    </section>
+    <section>
+      <h1>Tag</h1>
+      <p><span class="tag">One</span><span class="tag">Two</span><span class="tag">Three</span><span class="tag is-small">Small</span><span class="tag is-large">Large</span></p>
+    </section>
+    <section>
+      <h1>Grid</h1>
+      <div class="row">
+        <div class="col">
+          <div class="card is-center">.col</div>
         </div>
       </div>
-    </nav>
-    <br><hr><br>
-    
-    <h1>Tabs</h1>
-    <div class="tabs">
-      <a class="active" href="#!1.html">Tab 1</a>
-      <a href="#!2.html">Tab 2</a>
-      <a href="#!3.html">Tab 3</a>
-    </div>
-    <br> <hr> <br>
-    <div class="tabs is-full">
-      <a class="active" href="#!1.html">Tab 1</a>
-      <a href="#!2.html">Tab 2</a>
-      <a href="#!3.html">Tab 3</a>
-    </div>
-    <h1>Card</h1>
-    <div class="row is-center">
-      <div class="col-4">
-        <div class="card">
-          <header>
-            <h4>Card title</h4>
-          </header>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-          <footer class="is-right">
-            <a href="#!" class="button primary">Submit</a>
-            <a href="#!" class="button">Cancel</a>
-          </footer>
+      <div class="row">
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
         </div>
       </div>
-      <div class="col-6">
-        <div class="card">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-          <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis, debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
+      <div class="row">
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
         </div>
       </div>
-    </div>
-    <h1>Grid</h1>
-    <div class="row">
-      <div class="col">
-        <div class="card is-center">.col</div>
+      <div class="row">
+        <div class="col-2">
+          <div class="card is-center">.col-2</div>
+        </div>
+        <div class="col-2">
+          <div class="card is-center">.col-2</div>
+        </div>
+        <div class="col-2">
+          <div class="card is-center">.col-2</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <div class="card is-center">.col</div>
+      <div class="row">
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
       </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
+      <div class="row">
+        <div class="col-4">
+          <div class="card is-center">.col-4</div>
+        </div>
+        <div class="col-4">
+          <div class="card is-center">.col-4</div>
+        </div>
+        <div class="col-4">
+          <div class="card is-center">.col-4</div>
+        </div>
       </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
+      <div class="row">
+        <div class="col-5">
+          <div class="card is-center">.col-5</div>
+        </div>
+        <div class="col-5">
+          <div class="card is-center">.col-5</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-6">
+          <div class="card is-center">.col-6</div>
+        </div>
+        <div class="col-6">
+          <div class="card is-center">.col-6</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-7">
+          <div class="card is-center">.col-7</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-8">
+          <div class="card is-center">.col-8</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-9">
+          <div class="card is-center">.col-9</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-10">
+          <div class="card is-center">.col-10</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-11">
+          <div class="card is-center">.col-11</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-12">
+          <div class="card is-center">.col-12</div>
+        </div>
       </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-2">
-        <div class="card is-center">.col-2</div>
-      </div>
-      <div class="col-2">
-        <div class="card is-center">.col-2</div>
-      </div>
-      <div class="col-2">
-        <div class="card is-center">.col-2</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-4">
-        <div class="card is-center">.col-4</div>
-      </div>
-      <div class="col-4">
-        <div class="card is-center">.col-4</div>
-      </div>
-      <div class="col-4">
-        <div class="card is-center">.col-4</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-5">
-        <div class="card is-center">.col-5</div>
-      </div>
-      <div class="col-5">
-        <div class="card is-center">.col-5</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-6">
-        <div class="card is-center">.col-6</div>
-      </div>
-      <div class="col-6">
-        <div class="card is-center">.col-6</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-7">
-        <div class="card is-center">.col-7</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-8">
-        <div class="card is-center">.col-8</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-9">
-        <div class="card is-center">.col-9</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-10">
-        <div class="card is-center">.col-10</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-11">
-        <div class="card is-center">.col-11</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12">
-        <div class="card is-center">.col-12</div>
-      </div>
-    </div>
+    </section>
   </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 8001591..4fd6528 100644
--- a/test/index.html
+++ b/test/index.html
@@ -465,8 +465,10 @@
             <p>
               <a href="#" class="button">a.button</a>
               <a href="#" class="button primary">a.button.primary</a>
+              <a href="#" class="button secondary">a.button.secondary</a>
               <a href="#" class="button outline">a.button.outline</a>
               <a href="#" class="button outline primary">a.button.outline.primary</a>
+              <a href="#" class="button outline secondary">a.button.outline.secondary</a>
               <a href="#" class="button clear">a.button.clear</a>
             </p>
           </fieldset>