Inline typography with authored content or a text fallback. Heading treatment is visual; use a native heading when document structure requires one. Compose with cem-card.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=kind | none}{fieldset @role=group @aria-label=kind @slice=kind @slice-event=change @slice-value="$target.value" | {legend | kind}{cem-radio @name=property-kind @value=none @label=none @checked={if datadom.slices.kind == "none" {true} else {null}}}{cem-radio @name=property-kind @value=project @label=project @checked={if datadom.slices.kind == "project" {true} else {null}}}{cem-radio @name=property-kind @value=resource @label=resource @checked={if datadom.slices.kind == "resource" {true} else {null}}}{cem-radio @name=property-kind @value=output @label=output @checked={if datadom.slices.kind == "output" {true} else {null}}}}
{slice @name=text | Text fallback}{cem-field @label="text" @value="{$datadom.slices.text}" @slice=text @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=variant | body}{fieldset @role=group @aria-label="variant" @slice=variant @slice-event=change @slice-value="$target.value" | {legend | variant}{cem-radio @name="property-variant" @value="body" @label="body" @checked={if datadom.slices.variant == "body" {true} else {null}}}{cem-radio @name="property-variant" @value="caption" @label="caption" @checked={if datadom.slices.variant == "caption" {true} else {null}}}{cem-radio @name="property-variant" @value="heading" @label="heading" @checked={if datadom.slices.variant == "heading" {true} else {null}}}{cem-radio @name="property-variant" @value="data" @label="data" @checked={if datadom.slices.variant == "data" {true} else {null}}}}
{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}}}}
{cem-text @kind={datadom.slices.kind} @text="{$datadom.slices.text}" @variant="{$datadom.slices.variant}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @hidden={if datadom.slices.hidden == "present" {true} else {null}} | }{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-text/cem-text.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}}