From 2e286063dcfd6b7bba2b32ac72229e6ba6232478 Mon Sep 17 00:00:00 2001
From: Labayna Neil Brian Narido <neilbrian.nl@gmail.com>
Date: Fri, 14 Feb 2020 18:57:21 +0800
Subject: [PATCH 1/2] Update User guide

---
 docs/userGuide/syntax/boxes.mbdf | 35 ++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
index 6b18935742..a449edd027 100644
--- a/docs/userGuide/syntax/boxes.mbdf
+++ b/docs/userGuide/syntax/boxes.mbdf
@@ -219,6 +219,38 @@ As <code>light</code> and <code>seamless</code> are mutually exclusive styles, <
 </span>
 </include>
 
+**You can remove the background, icon and borders of preset styles.**
+
+<box type="info">
+Custom styles (<code>background-color</code>, <code>border-color</code>, <code>border-left-color</code>, <code>icon</code>) as introduced in the previous section, takes precedence over and are not affected by <code>no-background</code>, <code>no-border</code>, <code>no-icon</code>
+</box>
+
+
+<include src="outputBox.md" boilerplate >
+<span id="code">
+
+```html
+<box no-icon no-background type="success">
+    success box without a tick icon and backgound
+</box>
+
+<box no-border type="definition" light>
+    definition type box, light style without border
+</box>
+```
+</span>
+
+<span id="output">
+<box no-icon no-background type="success">
+    success box without a tick icon and backgound
+</box>
+
+<box no-border type="definition" light>
+    definition type box, light style without border
+</box>
+</span>
+</include>
+
 **You can also use icons and resize them accordingly.**
 
 <include src="outputBox.md" boilerplate >
@@ -264,6 +296,9 @@ header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>heading <br> (de
 type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
 light | `Boolean` | `false` | Uses a light color scheme for the box.
 seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated.
+no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. 
+no-backgound | `Boolean` | `false` | Removes background, except if styled by `backgound-color` option.
+no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option.
 
 <span id="short" class="d-none">
 ```html

From 0d916d98c6855530201c87f053685681d70d71fa Mon Sep 17 00:00:00 2001
From: Labayna Neil Brian Narido <neilbrian.nl@gmail.com>
Date: Sun, 16 Feb 2020 11:19:24 +0800
Subject: [PATCH 2/2] Update user guide

---
 docs/userGuide/syntax/boxes.mbdf | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
index a449edd027..ed7c8c216e 100644
--- a/docs/userGuide/syntax/boxes.mbdf
+++ b/docs/userGuide/syntax/boxes.mbdf
@@ -299,6 +299,9 @@ seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` i
 no-border | `Boolean` | `false` | Removes border, except if styled by `border-color` or `border-left-color`. 
 no-backgound | `Boolean` | `false` | Removes background, except if styled by `backgound-color` option.
 no-icon | `Boolean` | `false` | Removes icon, except if icon is displayed via `icon` option.
+type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
+light | `Boolean` | `false` | Uses a light color scheme for the box.
+seamless | `Boolean` | `false` | Uses a seamless style for the box. If `light` is specified, this style will not be activated.
 
 <span id="short" class="d-none">
 ```html