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

Basic usage

<ds-avatar 
  name="Hans Alba"
  image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg" />

Sizes

<ds-avatar online size="small" name="Hans Peter"></ds-avatar>
<ds-avatar online size="base" name="Hans Peter"></ds-avatar>
<ds-avatar online size="large" name="Hans Peter"></ds-avatar>
<ds-avatar online size="x-large" name="Hans Peter"></ds-avatar>
<ds-avatar online size="x-large"></ds-avatar>
<ds-avatar online size="large"></ds-avatar>
<ds-avatar online size="base"></ds-avatar>
<ds-avatar online size="small"></ds-avatar>

Broken Image

<ds-avatar 
  name="Peter Sommerfield"
  image="http://not-valid-image-link.org/image-does-not-exist.jpg" 
/>

Anonymus

<ds-avatar 
  image="http://not-valid-image-link##.org/image-does-not-exist.jpg" 
/>

Online Status

<ds-avatar 
  name="Hans Alba"
  image="https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg"
  online 
/>
`,10)]))}const d=i(l,[["render",e],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/data-display/Avatar/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]},{"level":2,"title":"Broken Image","slug":"broken-image","link":"#broken-image","children":[]},{"level":2,"title":"Anonymus","slug":"anonymus","link":"#anonymus","children":[]},{"level":2,"title":"Online Status","slug":"online-status","link":"#online-status","children":[]}],"git":{"createdTime":1772365170000,"updatedTime":1772365170000,"contributors":[{"name":"Ulf Gebhardt","email":"ulf.gebhardt@webcraft-media.de","commits":1}]},"readingTime":{"minutes":0.43,"words":130},"filePathRelative":"styleguide/src/system/components/data-display/Avatar/demo.md","localizedDate":"March 1, 2026","excerpt":"

Basic usage

\\n
<ds-avatar \\n  name=\\"Hans Alba\\"\\n  image=\\"https://s3.amazonaws.com/uifaces/faces/twitter/lisovsky/128.jpg\\" />
\\n
"}');export{d as comp,r as data};