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

Text sizes

Use different sizes to create hierarchy.

<ds-text size="x-large">The quick brown fox (x-large)</ds-text>
<ds-text size="large">The quick brown fox (large)</ds-text>
<ds-text size="base">The quick brown fox (base)</ds-text>
<ds-text size="small">The quick brown fox (small)</ds-text>

Text colors

Use colors to highlight or deemphasize.

<ds-text>The quick brown fox</ds-text>
<ds-text color="soft">The quick brown fox</ds-text>
<ds-text color="softer">The quick brown fox</ds-text>
<ds-text color="primary">The quick brown fox</ds-text>
<ds-text color="success">The quick brown fox</ds-text>
<ds-text color="danger">The quick brown fox</ds-text>
<ds-text color="warning">The quick brown fox</ds-text>

Text align

Align text to left, center or right.

<ds-text>The quick brown fox</ds-text>
<ds-text align="center">The quick brown fox</ds-text>
<ds-text align="right">The quick brown fox</ds-text>

Text uppercase

Display text in uppercase.

<ds-text uppercase>The quick brown fox</ds-text>

Nesting styles

Nested text components use their parents format by default.

<ds-text color="primary" size="large">
  The quick <ds-text bold>brown</ds-text> fox
</ds-text>

`,15)]))}const d=i(h,[["render",l],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/typography/Text/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Text sizes","slug":"text-sizes","link":"#text-sizes","children":[]},{"level":2,"title":"Text colors","slug":"text-colors","link":"#text-colors","children":[]},{"level":2,"title":"Text align","slug":"text-align","link":"#text-align","children":[]},{"level":2,"title":"Text uppercase","slug":"text-uppercase","link":"#text-uppercase","children":[]},{"level":2,"title":"Nesting styles","slug":"nesting-styles","link":"#nesting-styles","children":[]}],"git":{"createdTime":1775422481000,"updatedTime":1775422481000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.72,"words":215},"filePathRelative":"styleguide/src/system/components/typography/Text/demo.md","localizedDate":"April 5, 2026","excerpt":"

Text sizes

\\n

Use different sizes to create hierarchy.

\\n

<ds-text size=\\"x-large\\">The quick brown fox (x-large)</ds-text>\\n<ds-text size=\\"large\\">The quick brown fox (large)</ds-text>\\n<ds-text size=\\"base\\">The quick brown fox (base)</ds-text>\\n<ds-text size=\\"small\\">The quick brown fox (small)</ds-text>

\\n

"}');export{d as comp,r as data};