Compact Content

An escaped semantic rendering of a short rich-text document.

Short rich-text content

Render a short document with semantic inline formatting and escaped text.

Read the release notes before updating.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-compact-content/ui-compact-content.html"
>

<ui-compact-content
  content="{&quot;type&quot;:&quot;doc&quot;,&quot;content&quot;:[{&quot;type&quot;:&quot;paragraph&quot;,&quot;content&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Read the &quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;release notes&quot;,&quot;marks&quot;:[{&quot;type&quot;:&quot;bold&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; before updating.&quot;}]}]}"
></ui-compact-content>

<script setup>
  import { UiCompactContent } from "@threadlabs/looma";
</script>

<template>
  <UiCompactContent
    :content="{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Read the ' }, { type: 'text', text: 'release notes', marks: [{ type: 'bold' }] }, { type: 'text', text: ' before updating.' }] }] }"
  />
</template>

import { UiCompactContent } from "@threadlabs/looma";

export default function Example() {
  return <UiCompactContent
    content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Read the "},{"type":"text","text":"release notes","marks":[{"type":"bold"}]},{"type":"text","text":" before updating."}]}]}}
  />;
}

/** @jsxImportSource preact */
import { UiCompactContent } from "@threadlabs/looma";

export default function Example() {
  return <UiCompactContent
    content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Read the "},{"type":"text","text":"release notes","marks":[{"type":"bold"}]},{"type":"text","text":" before updating."}]}]}}
  />;
}

<script>
  import { UiCompactContent } from "@threadlabs/looma";
</script>

<UiCompactContent
  content={{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Read the "},{"type":"text","text":"release notes","marks":[{"type":"bold"}]},{"type":"text","text":" before updating."}]}]}}
/>

import { Component } from "@angular/core";
import { UiCompactContent } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCompactContent],
  template: `
    <div
      ui-compact-content
      [content]="{ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Read the ' }, { type: 'text', text: 'release notes', marks: [{ type: 'bold' }] }, { type: 'text', text: ' before updating.' }] }] }"
    ></div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: div

Attributes

Name	Description	Property	Type	Default	Allowed values
`content`	The short rich-text document to render as escaped semantic HTML.	`content`	`object` `type`: `string` (required)	`{ type: 'doc', content: [] }`	`—`

Framework props

Name	Type	Default	Allowed values
`content`	`{ readonly type: string; readonly [name: string]: unknown }` `type`: `string` (required)	`{ type: 'doc', content: [] }`	`—`

Events

No events.

Slots

No slots.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

No shared tokens.