A person or organization identity with an accessible image name. Use cem-media-preview when the media needs a caption.
Full examples and variation matrix · Property playground · Automated stories
Default slot replaces initials. Label names the complete image identity. Attribute presence enables boolean options, including the text “false”. Inert payload options take effect in the consuming component shown in the gallery. Native descendants retain keyboard behavior.
{slice @name=label | Ada Lovelace}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=initials | AL}{cem-field @label="initials" @value="{$datadom.slices.initials}" @slice=initials @slice-event=input @slice-value="$target.value"}
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=hidden | absent}{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{slice @name=content | fallback}{fieldset @role=group @aria-label="content" @slice=content @slice-event=change @slice-value="$target.value" | {legend | content}{cem-radio @name="property-content" @value="fallback" @label="fallback" @checked={if datadom.slices.content == "fallback" {true} else {null}}}{cem-radio @name="property-content" @value="projected" @label="projected" @checked={if datadom.slices.content == "projected" {true} else {null}}}}
{cem-avatar @label="{$datadom.slices.label}" @initials="{$datadom.slices.initials}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {cem:if @test='datadom.slices.content == "projected"' | {strong | Projected content}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-avatar/cem-avatar.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}