diff --git a/styleguide/src/system/components/typography/Heading/Heading.vue b/styleguide/src/system/components/typography/Heading/Heading.vue
index f7131612f..9e000d931 100644
--- a/styleguide/src/system/components/typography/Heading/Heading.vue
+++ b/styleguide/src/system/components/typography/Heading/Heading.vue
@@ -4,8 +4,10 @@
class="ds-heading"
:class="[
`ds-heading-${size || tag}`,
+ align && `ds-heading-align-${align}`,
primary && `ds-heading-primary`,
- soft && `ds-heading-soft`
+ soft && `ds-heading-soft`,
+ noMargin && `ds-heading-no-margin`
]"
>
@@ -59,6 +61,25 @@ export default {
soft: {
type: Boolean,
default: false
+ },
+ /**
+ * Remove Margin
+ * `true, false`
+ */
+ noMargin: {
+ type: Boolean,
+ default: false
+ },
+ /**
+ * Text Align
+ * `left, center, right`
+ */
+ align: {
+ type: String,
+ default: null,
+ validator: value => {
+ return value.match(/(left|center|right)/)
+ }
}
}
}
diff --git a/styleguide/src/system/components/typography/Heading/demo.md b/styleguide/src/system/components/typography/Heading/demo.md
index a329aaf09..53133840c 100644
--- a/styleguide/src/system/components/typography/Heading/demo.md
+++ b/styleguide/src/system/components/typography/Heading/demo.md
@@ -31,4 +31,23 @@ Use primary headings for important headlines, like a page title. Use soft headin
```
The quick brown fox
The quick brown fox
-```
\ No newline at end of file
+```
+
+## No Margin
+
+You can remove the margin easily
+
+```
+The quick brown fox
+The quick brown fox
+```
+
+## Text Align
+
+Align text
+
+```
+The quick brown fox
+The quick brown fox
+The quick brown fox
+```
diff --git a/styleguide/src/system/components/typography/Heading/style.scss b/styleguide/src/system/components/typography/Heading/style.scss
index caa253b81..47bad6012 100644
--- a/styleguide/src/system/components/typography/Heading/style.scss
+++ b/styleguide/src/system/components/typography/Heading/style.scss
@@ -40,4 +40,18 @@
.ds-heading-h6 {
font-size: $font-size-small;
-}
\ No newline at end of file
+}
+
+.ds-heading-no-margin {
+ margin: 0;
+}
+
+.ds-heading-align-left {
+ text-align: left
+}
+.ds-heading-align-center {
+ text-align: center
+}
+.ds-heading-align-right {
+ text-align: right
+}