diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 2c725d71..cadf2324 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -1816,6 +1816,7 @@ a.box:active {
 }
 
 .button.is-link:focus, .button.is-link.is-focused {
+<<<<<<< HEAD
   border-color: transparent;
   color: #fff;
 }
@@ -1910,16 +1911,22 @@ a.box:active {
 }
 
 .button.is-info:focus, .button.is-info.is-focused {
+=======
+>>>>>>> Add link color
   border-color: transparent;
   color: #fff;
 }
 
+<<<<<<< HEAD
 .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
 =======
+=======
+.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
+>>>>>>> Add link color
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 >>>>>>> Add show code
 =======
@@ -1931,6 +1938,140 @@ a.box:active {
 >>>>>>> Use link instead of primary
 }
 
+<<<<<<< HEAD
+.button.is-info:active, .button.is-info.is-active {
+  background-color: #118fe4;
+=======
+.button.is-link:active, .button.is-link.is-active {
+  background-color: #2366d1;
+>>>>>>> Add link color
+  border-color: transparent;
+  color: #fff;
+}
+
+<<<<<<< HEAD
+.button.is-info[disabled] {
+  background-color: #209cee;
+=======
+.button.is-link[disabled] {
+  background-color: #3273dc;
+>>>>>>> Add link color
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.button.is-link.is-inverted {
+  background-color: #fff;
+  color: #209cee;
+}
+
+.button.is-link.is-inverted:hover {
+  background-color: #f2f2f2;
+}
+
+.button.is-link.is-inverted[disabled] {
+  background-color: #fff;
+  border-color: transparent;
+<<<<<<< HEAD
+<<<<<<< HEAD
+  box-shadow: none;
+<<<<<<< HEAD
+  color: #209cee;
+=======
+=======
+  -webkit-box-shadow: none;
+          box-shadow: none;
+>>>>>>> Improve snippet
+=======
+  box-shadow: none;
+>>>>>>> Use link instead of primary
+  color: #3273dc;
+>>>>>>> Add show code
+}
+
+.button.is-link.is-loading:after {
+  border-color: transparent transparent #fff #fff !important;
+}
+
+.button.is-link.is-outlined {
+  background-color: transparent;
+  border-color: #209cee;
+  color: #209cee;
+}
+
+<<<<<<< HEAD
+.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
+  background-color: #209cee;
+  border-color: #209cee;
+  color: #fff;
+}
+
+.button.is-info.is-outlined.is-loading:after {
+  border-color: transparent transparent #209cee #209cee !important;
+=======
+.button.is-link.is-outlined:hover, .button.is-link.is-outlined:focus {
+  background-color: #3273dc;
+  border-color: #3273dc;
+  color: #fff;
+}
+
+.button.is-link.is-outlined.is-loading:after {
+  border-color: transparent transparent #3273dc #3273dc !important;
+>>>>>>> Add link color
+}
+
+.button.is-link.is-outlined[disabled] {
+  background-color: transparent;
+<<<<<<< HEAD
+  border-color: #209cee;
+  box-shadow: none;
+  color: #209cee;
+=======
+  border-color: #3273dc;
+  box-shadow: none;
+  color: #3273dc;
+>>>>>>> Add show code
+}
+
+.button.is-link.is-inverted.is-outlined {
+  background-color: transparent;
+  border-color: #fff;
+  color: #fff;
+}
+
+.button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined:focus {
+  background-color: #fff;
+  color: #3273dc;
+}
+
+.button.is-link.is-inverted.is-outlined[disabled] {
+  background-color: transparent;
+  border-color: #fff;
+  box-shadow: none;
+  color: #fff;
+}
+
+.button.is-info {
+  background-color: #209cee;
+  border-color: transparent;
+  color: #fff;
+}
+
+.button.is-info:hover, .button.is-info.is-hovered {
+  background-color: #1496ed;
+  border-color: transparent;
+  color: #fff;
+}
+
+.button.is-info:focus, .button.is-info.is-focused {
+  border-color: transparent;
+  color: #fff;
+}
+
+.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+}
+
 .button.is-info:active, .button.is-info.is-active {
   background-color: #118fe4;
   border-color: transparent;
@@ -1955,21 +2096,8 @@ a.box:active {
 .button.is-info.is-inverted[disabled] {
   background-color: #fff;
   border-color: transparent;
-<<<<<<< HEAD
-<<<<<<< HEAD
   box-shadow: none;
-<<<<<<< HEAD
   color: #209cee;
-=======
-=======
-  -webkit-box-shadow: none;
-          box-shadow: none;
->>>>>>> Improve snippet
-=======
-  box-shadow: none;
->>>>>>> Use link instead of primary
-  color: #3273dc;
->>>>>>> Add show code
 }
 
 .button.is-info.is-loading:after {
@@ -1994,15 +2122,9 @@ a.box:active {
 
 .button.is-info.is-outlined[disabled] {
   background-color: transparent;
-<<<<<<< HEAD
   border-color: #209cee;
   box-shadow: none;
   color: #209cee;
-=======
-  border-color: #3273dc;
-  box-shadow: none;
-  color: #3273dc;
->>>>>>> Add show code
 }
 
 .button.is-info.is-inverted.is-outlined {
@@ -2811,6 +2933,19 @@ a.box:active {
 >>>>>>> Use link instead of primary
 }
 
+.input.is-link,
+.textarea.is-link {
+  border-color: #3273dc;
+}
+
+.input.is-link:focus, .input.is-link.is-focused, .input.is-link:active, .input.is-link.is-active,
+.textarea.is-link:focus,
+.textarea.is-link.is-focused,
+.textarea.is-link:active,
+.textarea.is-link.is-active {
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+}
+
 .input.is-info,
 .textarea.is-info {
   border-color: #209cee;
@@ -2823,6 +2958,7 @@ a.box:active {
 .textarea.is-info.is-active {
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
 =======
@@ -2835,6 +2971,9 @@ a.box:active {
 =======
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 >>>>>>> Use link instead of primary
+=======
+  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+>>>>>>> Add link color
 }
 
 .input.is-success,
@@ -3158,6 +3297,7 @@ a.box:active {
 }
 
 .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active {
+<<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 }
 
@@ -3178,10 +3318,20 @@ a.box:active {
           box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 >>>>>>> Improve snippet
 =======
+=======
+>>>>>>> Add link color
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
 >>>>>>> Use link instead of primary
 }
 
+.select.is-info select {
+  border-color: #209cee;
+}
+
+.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
+  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+}
+
 .select.is-success select {
   border-color: #23d160;
 }
@@ -3406,6 +3556,7 @@ a.box:active {
 }
 
 .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta {
+<<<<<<< HEAD
   border-color: transparent;
   box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
   color: #fff;
@@ -3430,6 +3581,8 @@ a.box:active {
 }
 
 .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
+=======
+>>>>>>> Add link color
   border-color: transparent;
 <<<<<<< HEAD
 <<<<<<< HEAD
@@ -3448,6 +3601,35 @@ a.box:active {
   color: #fff;
 }
 
+<<<<<<< HEAD
+.file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
+  background-color: #118fe4;
+=======
+.file.is-link:active .file-cta, .file.is-link.is-active .file-cta {
+  background-color: #2366d1;
+>>>>>>> Add link color
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-info .file-cta {
+  background-color: #209cee;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta {
+  background-color: #1496ed;
+  border-color: transparent;
+  color: #fff;
+}
+
+.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
+  border-color: transparent;
+  box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25);
+  color: #fff;
+}
+
 .file.is-info:active .file-cta, .file.is-info.is-active .file-cta {
   background-color: #118fe4;
   border-color: transparent;
@@ -9224,6 +9406,7 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .hero.is-info {
 =======
 @media screen and (max-width: 768px) {
@@ -9246,11 +9429,37 @@ label.panel-block:hover {
 .hero.is-link {
 >>>>>>> Add link color
 =======
+=======
+>>>>>>> Add link color
 .hero.is-link {
 =======
 .hero.is-info {
 >>>>>>> Add show code
+<<<<<<< HEAD
 >>>>>>> Add show code
+=======
+=======
+.hero.is-info {
+=======
+@media screen and (max-width: 768px) {
+  .hero.is-primary .nav-toggle span {
+    background-color: #fff;
+  }
+  .hero.is-primary .nav-toggle:hover {
+    background-color: rgba(10, 10, 10, 0.1);
+  }
+  .hero.is-primary .nav-toggle.is-active span {
+    background-color: #fff;
+  }
+  .hero.is-primary .nav-menu .nav-item {
+    border-top-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+.hero.is-link {
+>>>>>>> Add link color
+>>>>>>> Add link color
+>>>>>>> Add link color
   background-color: #3273dc;
   color: #fff;
 }
@@ -9273,6 +9482,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
+<<<<<<< HEAD
 @media screen and (max-width: 1023px) {
 <<<<<<< HEAD
   .hero.is-link .navbar-menu {
@@ -9303,6 +9513,26 @@ label.panel-block:hover {
 .hero.is-info .navbar-link.is-active {
 >>>>>>> Add show code
   background-color: #2366d1;
+=======
+.hero.is-link .nav {
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+@media screen and (max-width: 768px) {
+  .hero.is-link .nav-menu {
+    background-color: #3273dc;
+  }
+}
+
+.hero.is-link a.nav-item,
+.hero.is-link .nav-item a:not(.button) {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.hero.is-link a.nav-item:hover, .hero.is-link a.nav-item.is-active,
+.hero.is-link .nav-item a:not(.button):hover,
+.hero.is-link .nav-item a:not(.button).is-active {
+>>>>>>> Add link color
   color: #fff;
 }
 
@@ -9338,16 +9568,38 @@ label.panel-block:hover {
 }
 
 @media screen and (max-width: 768px) {
+<<<<<<< HEAD
 <<<<<<< HEAD
   .hero.is-link.is-bold .navbar-menu {
 =======
   .hero.is-info.is-bold .navbar-menu {
 >>>>>>> Add show code
+=======
+  .hero.is-link.is-bold .nav-menu {
+>>>>>>> Add link color
     background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
   }
 }
 
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+@media screen and (max-width: 768px) {
+  .hero.is-link .nav-toggle span {
+    background-color: #fff;
+  }
+  .hero.is-link .nav-toggle:hover {
+    background-color: rgba(10, 10, 10, 0.1);
+  }
+  .hero.is-link .nav-toggle.is-active span {
+    background-color: #fff;
+  }
+  .hero.is-link .nav-menu .nav-item {
+    border-top-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+>>>>>>> Add link color
 .hero.is-info {
   background-color: #209cee;
   color: #fff;
@@ -9424,10 +9676,20 @@ label.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-info .nav-menu {
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
     background-color: #3273dc;
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
+=======
+=======
+=======
+    background-color: #209cee;
+>>>>>>> Add link color
+>>>>>>> Add link color
+>>>>>>> Add link color
   }
 }
 
@@ -9480,6 +9742,7 @@ label.panel-block:hover {
 
 @media screen and (max-width: 768px) {
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   .hero.is-info.is-bold .navbar-menu {
     background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
@@ -9488,9 +9751,22 @@ label.panel-block:hover {
     background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
 >>>>>>> Add link color
 =======
+=======
+>>>>>>> Add link color
   .hero.is-info.is-bold .navbar-menu {
+<<<<<<< HEAD
     background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
+=======
+    background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
+=======
+  .hero.is-info.is-bold .nav-menu {
+    background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
+<<<<<<< HEAD
 >>>>>>> Add show code
+=======
+>>>>>>> Add link color
+>>>>>>> Add link color
+>>>>>>> Add link color
   }
 }
 
diff --git a/docs/extensions.html b/docs/extensions.html
index d5a3ff4c..d5bead57 100644
--- a/docs/extensions.html
+++ b/docs/extensions.html
@@ -89,7 +89,7 @@ extensions:
   {% include navbar.html id="Extensions" %}
 </div>
 
-<section class="hero is-primary">
+<section class="hero is-info">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">