import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as n,o as s}from"./app-C6w_Pklu.js";const t={};function d(l,e){return s(),a("div",null,e[0]||(e[0]=[n(`

Heading tag

Use different heading tags to create structure (defaults to h1).

<ds-heading>The quick brown fox</ds-heading>
<ds-heading tag="h2">The quick brown fox</ds-heading>
<ds-heading tag="h3">The quick brown fox</ds-heading>
<ds-heading tag="h4">The quick brown fox</ds-heading>
<ds-heading tag="h5">The quick brown fox</ds-heading>
<ds-heading tag="h6">The quick brown fox</ds-heading>

Heading sizes

In case you need a different size you can set it independently from the heading tag.

<ds-heading size="h1">The quick brown fox</ds-heading>
<ds-heading size="h2">The quick brown fox</ds-heading>
<ds-heading size="h3">The quick brown fox</ds-heading>
<ds-heading size="h4">The quick brown fox</ds-heading>
<ds-heading size="h5">The quick brown fox</ds-heading>
<ds-heading size="h6">The quick brown fox</ds-heading>

Heading variants

Use primary headings for important headlines, like a page title. Use soft headings for less important headlines.

<ds-heading primary>The quick brown fox</ds-heading>
<ds-heading soft>The quick brown fox</ds-heading>

No Margin

You can remove the margin easily

<ds-heading no-margin>The quick brown fox</ds-heading>
<ds-heading no-margin>The quick brown fox</ds-heading>

Text Align

Align text

<ds-heading align="left">The quick brown fox</ds-heading>
<ds-heading align="center">The quick brown fox</ds-heading>
<ds-heading align="right">The quick brown fox</ds-heading>
`,15)]))}const r=i(t,[["render",d],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/typography/Heading/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Heading tag","slug":"heading-tag","link":"#heading-tag","children":[]},{"level":2,"title":"Heading sizes","slug":"heading-sizes","link":"#heading-sizes","children":[]},{"level":2,"title":"Heading variants","slug":"heading-variants","link":"#heading-variants","children":[]},{"level":2,"title":"No Margin","slug":"no-margin","link":"#no-margin","children":[]},{"level":2,"title":"Text Align","slug":"text-align","link":"#text-align","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.83,"words":248},"filePathRelative":"styleguide/src/system/components/typography/Heading/demo.md","localizedDate":"March 1, 2026","excerpt":"

Heading tag

\\n

Use different heading tags to create structure (defaults to h1).

\\n
<ds-heading>The quick brown fox</ds-heading>\\n<ds-heading tag=\\"h2\\">The quick brown fox</ds-heading>\\n<ds-heading tag=\\"h3\\">The quick brown fox</ds-heading>\\n<ds-heading tag=\\"h4\\">The quick brown fox</ds-heading>\\n<ds-heading tag=\\"h5\\">The quick brown fox</ds-heading>\\n<ds-heading tag=\\"h6\\">The quick brown fox</ds-heading>
\\n
"}');export{r as comp,o as data};