import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as s,o as a}from"./app-h9l50wZ_.js";const t={};function d(l,e){return a(),n("div",null,e[0]||(e[0]=[s(`<h2 id="heading-tag" tabindex="-1"><a class="header-anchor" href="#heading-tag"><span>Heading tag</span></a></h2><p>Use different heading tags to create structure (defaults to h1).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-heading&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading tag=&quot;h2&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading tag=&quot;h3&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading tag=&quot;h4&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading tag=&quot;h5&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading tag=&quot;h6&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="heading-sizes" tabindex="-1"><a class="header-anchor" href="#heading-sizes"><span>Heading sizes</span></a></h2><p>In case you need a different size you can set it independently from the heading tag.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-heading size=&quot;h1&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading size=&quot;h2&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading size=&quot;h3&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading size=&quot;h4&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading size=&quot;h5&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading size=&quot;h6&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="heading-variants" tabindex="-1"><a class="header-anchor" href="#heading-variants"><span>Heading variants</span></a></h2><p>Use primary headings for important headlines, like a page title. Use soft headings for less important headlines.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-heading primary&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading soft&gt;The quick brown fox&lt;/ds-heading&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="no-margin" tabindex="-1"><a class="header-anchor" href="#no-margin"><span>No Margin</span></a></h2><p>You can remove the margin easily</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-heading no-margin&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading no-margin&gt;The quick brown fox&lt;/ds-heading&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="text-align" tabindex="-1"><a class="header-anchor" href="#text-align"><span>Text Align</span></a></h2><p>Align text</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-heading align=&quot;left&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading align=&quot;center&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>
<span class="line"><span>&lt;ds-heading align=&quot;right&quot;&gt;The quick brown fox&lt;/ds-heading&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,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":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.83,"words":248},"filePathRelative":"styleguide/src/system/components/typography/Heading/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Heading tag</h2>\\n<p>Use different heading tags to create structure (defaults to h1).</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;ds-heading&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-heading tag=\\"h2\\"&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-heading tag=\\"h3\\"&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-heading tag=\\"h4\\"&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-heading tag=\\"h5\\"&gt;The quick brown fox&lt;/ds-heading&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-heading tag=\\"h6\\"&gt;The quick brown fox&lt;/ds-heading&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{r as comp,o as data};
