diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 8b381316..39906d79 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -9,6 +9,7 @@
@import "./sass/footer"
@import "./sass/specific"
@import "./sass/example"
+@import "./sass/bsa"
html
\::-moz-selection
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index a8636c55..b42d0a84 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -7686,6 +7686,86 @@ html.route-index #carbon {
border-right: none;
}
+.bsa {
+ padding: 2rem;
+}
+
+#_default_ .default-ad {
+ background-color: #00d1b2;
+ border-radius: 2px;
+ color: #fff;
+ display: inline-block;
+ font-size: 12px;
+ padding: 0 4px;
+ text-transform: uppercase;
+ vertical-align: top;
+}
+
+#_default_ > a {
+ background-color: white;
+ border-radius: 5px;
+ box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+ display: block;
+ margin-top: 15px;
+ max-width: 400px;
+ padding: 15px;
+ padding-left: 70px;
+ position: relative;
+}
+
+#_default_ > a:hover, #_default_ > a:focus {
+ box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+}
+
+#_default_ > a:active {
+ box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
+}
+
+#_default_ > a span {
+ display: block;
+}
+
+#_default_ > a .default-image {
+ display: block;
+ left: 15px;
+ height: 40px;
+ position: absolute;
+ top: 15px;
+ width: 40px;
+}
+
+#_default_ > a .default-image img {
+ display: block;
+ height: 40px;
+ width: 40px;
+}
+
+#_default_ > a .default-title {
+ color: #363636;
+ font-weight: 700;
+}
+
+@media screen and (min-width: 769px) {
+ #_default_ {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 0 60px;
+ position: relative;
+ }
+ #_default_ .default-ad {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ #_default_ > a {
+ margin: 0 20px;
+ }
+}
+
html ::-moz-selection {
background: #00d1b2;
color: #fff;
diff --git a/docs/sass/bsa.sass b/docs/sass/bsa.sass
new file mode 100644
index 00000000..d996e304
--- /dev/null
+++ b/docs/sass/bsa.sass
@@ -0,0 +1,57 @@
+.bsa
+ padding: 2rem
+
+#_default_
+ .default-ad
+ background-color: $primary
+ border-radius: 2px
+ color: $primary-invert
+ display: inline-block
+ font-size: 12px
+ padding: 0 4px
+ text-transform: uppercase
+ vertical-align: top
+ & > a
+ background-color: $white
+ border-radius: $radius-large
+ box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+ display: block
+ margin-top: 15px
+ max-width: 400px
+ padding: 15px
+ padding-left: 70px
+ position: relative
+ &:hover,
+ &:focus
+ box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+ &:active
+ box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+ span
+ display: block
+ .default-image
+ display: block
+ left: 15px
+ height: 40px
+ position: absolute
+ top: 15px
+ width: 40px
+ img
+ display: block
+ height: 40px
+ width: 40px
+ .default-title
+ color: $text-strong
+ font-weight: $weight-bold
+
++tablet
+ #_default_
+ display: flex
+ justify-content: center
+ padding: 0 60px
+ position: relative
+ .default-ad
+ position: absolute
+ right: 0
+ top: 0
+ & > a
+ margin: 0 20px