Axismundi

Material Design 3 social CMS

Prose & raw HTML

This page shows how Axismundi renders raw HTML that arrives outside WordPress block wrappers — Custom HTML blocks, Markdown imports, federated ActivityPub content, and hand-authored markup. Each section names the element as an escaped tag (<tag>) beside its live rendering.

Inline Text Elements

<a> renders as an inline link. <strong> renders as strong emphasis, and <em> renders as emphasis.

<code> renders as inline code. <mark> renders as highlighted text. <del> renders as deleted text, and <ins> renders as inserted text. <small> renders as small print.

<abbr title=""> renders as HTML, and <kbd> renders keyboard input such as Ctrl + K.

Scientific and Technical Text

<sub> renders H2O. <sup> renders x2. <var> renders the variable n, and <samp> renders program output such as Permission denied.

Quotation

<q> renders an inline quotation such as design follows content.

<blockquote> creates an emphasized quotation block with its own spacing, color, and citation area. Raw HTML is not an edge case for a social CMS — it is the surface where imported, federated, and hand-authored content first lands.

Axismundi Showcase

Lists

<ul> renders an unordered list, and lists may nest:

  • First unordered item.
  • Second item with a nested list:
    • Nested item.
    • Another nested item.

<ol> renders an ordered list:

  1. Prepare the content.
  2. Review the rendering.
  3. Publish.

<dl>, <dt>, and <dd> render a definition list:

Token
A named design value used across the theme.
Surface
A background layer with a semantic color role.

Code Blocks

<pre> preserves whitespace and scrolls horizontally when a line runs past the content column:

function renderCustomHtml( content ) {
  // Raw HTML should stay readable, even on a long line that exceeds the column width.
  return content.trim();
}

Tables

<table>, <caption>, <thead>, <tbody>, and <tfoot> are styled as structured data with header contrast and a readable footer:

Common HTML elements and their roles.
Element Purpose
<th> Header cell, emphasized and contrasted.
<td> Data cell holding an ordinary value, or a longer description that should wrap inside the column instead of breaking the layout.
Summary Footer row.

Figures and Media

<figure> and <figcaption> pair media with a caption:

A river winding through a forested valley
<figcaption> renders supporting caption text beneath the image.

<details> and <summary> render a native disclosure:

Show more about disclosures

The hidden content appears when the disclosure is opened, and collapses again when it is closed.

Mixed Korean and English

Mixed-script content checks how Korean text such as 한글 본문 typography and English phrases like <code>, “custom HTML”, and “ActivityPub” wrap together inside one paragraph without breaking line rhythm.

이 단락은 한글 우선 문단입니다. 테마는 한글의 단어 단위 줄바꿈을 유지하면서, inline English terms like “federated content”와 “block theme”이 섞여도 행간과 자간이 안정적으로 보여야 합니다. design-system-documentation 같은 긴 토큰도 좁은 화면에서 레이아웃을 밀어내면 안 됩니다.