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 +}