Light Dark System

Content Block

<zn-content-block> | ContentBlock
Since 1.0 experimental

Short summary of the component’s intended use.

Text formatted message goes here.
HTML formatted message goes here.
© 2025 Example Corp. All trademarks are property of their respective owners. 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
>
  <div slot="text">Text formatted message goes here.</div>
  <div slot="html">HTML <b>formatted</b> message <span style="color: cornflowerblue;">goes</span> here.</div>
  <div slot="footer" style="padding: 10px;">
    <small>
      &copy; 2025 Example Corp. All trademarks are property of their respective owners.
    </small>
  </div>
</zn-content-block>

Examples

Basic Text

Text formatted message goes here.
 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
>
  <div slot="text">Text formatted message goes here.</div>
</zn-content-block>

Toggle Text & HTML

Text formatted message goes here.
HTML formatted message goes here. 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
>
  <div slot="text">Text formatted message goes here.</div>
  <div slot="html">HTML <b>formatted</b> message <span style="color: cornflowerblue;">goes</span> here.</div>
</zn-content-block>

Subject

When a subject is available it is always shown in the header after the sender — expanded or collapsed — in place of the truncated body preview. When subject is empty, subject-placeholder is shown dimmed in its place. Omit both attributes to fall back to the body preview (e.g. notes).

Text formatted message goes here.
Text formatted message goes here.
 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
  subject="Re: Help with my order"
>
  <div slot="text">Text formatted message goes here.</div>
</zn-content-block>

<zn-content-block
  time="16 Jun 2025, 13:05"
  sender="John Smith"
  avatar="JS"
  subject=""
  subject-placeholder="This message has no subject."
>
  <div slot="text">Text formatted message goes here.</div>
</zn-content-block>

Attachments

Attachments render in a row at the bottom of the content and are only visible while the block is expanded. Use zn-chat-message-attachment, which assigns itself to the attachments slot. When a block has attachments, a paperclip icon and count are shown in the header after the preview text.

Text formatted message goes here.
 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
>
  <div slot="text">Text formatted message goes here.</div>
  <zn-chat-message-attachment href="/" name="filename1.txt" download></zn-chat-message-attachment>
  <zn-chat-message-attachment href="/" name="filename2.png" download></zn-chat-message-attachment>
</zn-content-block>

Content Footer

Basic Footer

Text formatted message goes here.
© 2025 Example Corp. All trademarks are property of their respective owners. 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
>
  <div slot="text">Text formatted message goes here.</div>
  <div slot="footer" style="padding: 10px;">
    <small>
      &copy; 2025 Example Corp. All trademarks are property of their respective owners.
    </small>
  </div>
</zn-content-block>

Footer with Attachments

Text formatted message goes here.
 

<zn-content-block
  time="16 Jun 2025, 13:00"
  sender="John Smith"
  avatar="JS"
>
  <div slot="text">Text formatted message goes here.</div>
  <div slot="footer">
    <zn-collapsible caption="Attachments 2" flush>
      <zn-sp divide no-gap flush style="max-height: 241px; overflow-y: auto;">
        <a href="/" target="_blank" download>
          <zn-tile caption="filename1.txt"
                   description="10mb"
                   inline>
            <zn-icon slot="image" src="attach_file" size="20"></zn-icon>
          </zn-tile>
        </a>
        <a href="/" target="_blank" download>
          <zn-tile caption="filename2.png"
                   description="100kb"
                   inline>
            <zn-icon slot="image" src="attach_file" size="20"></zn-icon>
          </zn-tile>
        </a>
      </zn-sp>
    </zn-collapsible>
  </div>
</zn-content-block>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.51/dist/components/content-block/content-block.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.51/dist/components/content-block/content-block.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/content-block/content-block.js';

Slots

Name Description
attachments Attachments displayed at the bottom of the content when the block is expanded. Use zn-chat-message-attachment, which auto-assigns itself to this slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
subject The message subject, shown in the header after the sender. string ''
subjectPlaceholder
subject-placeholder 		Placeholder shown dimmed in place of the subject when subject is empty (e.g. “This message has no subject.”). Omit both for content without a subject line (e.g. notes). string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
attachments The attachments row at the bottom of the content.
header-attachments The attachment count indicator in the header.

Learn more about customizing CSS parts.