Merge pull request #366 from Chng-Zhi-Xuan/363-custom-class-docs

Add guide to use custom classes in components
MarkBind · Jul 25, 2018 · d75fd69 · d75fd69
2 parents a6f49d4 + 6931b84
commit d75fd69
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/docs/userGuide/components/advanced.md b/docs/userGuide/components/advanced.md
@@ -83,3 +83,26 @@ Slot name | Default class | Notes
 --- | --- | ---
 `modal-header` | `modal-title` |
 `modal-footer` | `modal-footer` | Specifying `modal-footer` will override the `ok-text` attribute, and the OK button will not render.
+
+## Insert custom classes into components
+
+Every component documented in our user guide allows you to insert your own defined CSS classes.
+This is done by adding the `add-class` attribute to a component along with the desired class names.
+
+<tip-box border-left-color="#00B0F0">
+  <i style="font-style: normal; font-weight: bold; color: dimgray">Example</i><br>
+  <tip-box type="info" add-class="font-italic text-center text-warning">
+    Easily apply Bootstrap classes without using a wrapper!
+  </tip-box>
+</tip-box>
+
+<tip-box border-left-color="black">
+<i style="font-style: normal; font-weight: bold; color: dimgray">Markup</i>
+
+```html
+<tip-box type="info" add-class="font-italic text-center text-warning">
+  Easily apply Bootstrap classes without using a wrapper!
+</tip-box>
+```
+</tip-box>
+<br>