box: add

demo.html

@@ -340,6 +340,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
             </div>
 
+            <div class="page">
+                <div class="row">
+                    <div class="col">
+                        <h1>Box</h1>
+                        <p>
+                            Sunt vitae recusandae laborum. Qui consequatur
+                            laudantium illo corporis. Quia quidem occaecati
+                            corporis libero a saepe.
+                        </p>
+                    </div>
+                    <div class="col">
+                        <div class="box">
+                            <h2>Box title</h2>
+                            <p>Box content.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <footer>
                 <p>
                     Ubuntu e Canonical sono marchi registrati da Canonical

scss/_box.scss

+/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+div.box {
+    padding: 1.5em;
+    border: 1px solid mix(#fff, $color_warm_gray, 60%);
+    border-radius: 0.3em;
+    box-shadow: inset 0 0 0.2em rgba(0, 0, 0, 0.2);
+
+    & > *:first-child {
+        margin-top: 0 !important;
+    }
+
+    & > *:last-child {
+        margin-bottom: 0 !important;
+    }
+}

scss/theme.scss

@@ -18,6 +18,7 @@
 @import "base";
 
 @import "buttons";
+@import "box";
 
 @import "cookiepolicy";
 @import "navbar";