Notes and alerts¶

Put a note where the reader needs it. A quiet aside supplies context; a warning changes the next action. Words carry the meaning, with colour and icons reinforcing it. Static examples do not announce themselves as urgent live alerts.

The examples use the shared theme and setup. Keep the .fltheme-components wrapper around Basecoat and du- component markup.

Admonitions · MaterialX¶

MaterialX renders this pattern from Markdown. The source panel contains the actual authoring syntax, including attribute lists where they apply. Keep the renderer extensions enabled on the destination.

Keep the original

Save a copy of the source files before you compare a converted family.

What to compare

Inspect names, outlines, spacing, kerning and family structure.

HTML · compiled output

<div class="admonition note">
<p class="admonition-title">Keep the original</p>
<p>Save a copy of the source files before you compare a converted family.</p>
</div>
<details class="tip">
<summary>What to compare</summary>
<p>Inspect names, outlines, spacing, kerning and family structure.</p>
</details>

Markdown · authored source

!!! note "Keep the original"

    Save a copy of the source files before you compare a converted family.

??? tip "What to compare"

    Inspect names, outlines, spacing, kerning and family structure.

Syntax and variants in MaterialX

Alert · Basecoat¶

Give an important message a persistent place in the reading flow.

Behaviour and access. Pair the message with a heading and text. Use role="alert" only for urgent updates, not every static notice; do not rely on colour.

Export complete

Your font is ready to inspect.

HTML · compiled output

<div class="fltheme-components">
<div class="alert"><h2>Export complete</h2><section>Your font is ready to inspect.</section></div>
</div>

Syntax and variants in Basecoat

Alert · daisyUI¶

Status: supported; specimen: static state preview. Alerts carry four states: info, success, warning, and error. These in-flow examples are already present when the page loads, so they do not claim live-region behaviour. In a product, use role="status" for a dynamically updated polite message. Reserve role="alert" for an urgent message inserted or changed in response to an event. Do not repeat the same update in both an alert and a toast.

Note — the reading column is fixed at 40rem.

Success — the build finished cleanly.

Warning — this image will break the measure.

Error — a linked asset returned 404.

HTML · compiled output

<div class="fltheme-components">
<div class="fl-ui fl-ui-stack">
<div class="du-alert du-alert-info" role="note"><span>Note &mdash; the reading column is fixed at 40rem.</span></div>
<div class="du-alert du-alert-success"><span>Success &mdash; the build finished cleanly.</span></div>
<div class="du-alert du-alert-warning"><span>Warning &mdash; this image will break the measure.</span></div>
<div class="du-alert du-alert-error"><span>Error &mdash; a linked asset returned 404.</span></div>
</div>
</div>

Syntax and variants in daisyUI

Admonitions: authoring details¶

Admonition icons¶

The icon reinforces the written title; it never carries severity alone. Keep the renderer's icon for each semantic family so meaning remains consistent between pages and themes.

Changing the title¶

Write a short, specific title when the default type is too vague.

Unsaved font changes

Export or save the font before replacing this source.

HTML · compiled output

<div class="admonition warning">
<p class="admonition-title">Unsaved font changes</p>
<p>Export or save the font before replacing this source.</p>
</div>

Markdown · authored source

!!! warning "Unsaved font changes"
    Export or save the font before replacing this source.

Nested admonitions¶

Nest only when the inner note qualifies the outer message. More than one level usually means the section needs rewriting.

Export settings

These settings apply to the current export.

Keep a preset

Save repeated settings as a named preset.

HTML · compiled output

<div class="admonition note">
<p class="admonition-title">Export settings</p>
<p>These settings apply to the current export.</p>
<div class="admonition tip">
<p class="admonition-title">Keep a preset</p>
<p>Save repeated settings as a named preset.</p>
</div>
</div>

Markdown · authored source

!!! note "Export settings"
    These settings apply to the current export.

    !!! tip "Keep a preset"
        Save repeated settings as a named preset.

Removing the title¶

An empty title is acceptable for one short aside whose meaning is complete in the first sentence. Do not remove a title merely to save vertical space.

Variable fonts need an fvar table.

HTML · compiled output

<div class="admonition note">
<p>Variable fonts need an <code>fvar</code> table.</p>
</div>

Markdown · authored source

!!! note ""
    Variable fonts need an `fvar` table.

Collapsible blocks¶

Use a collapsible block for optional detail, never for a warning or a required step. Its summary must describe what opening it reveals.

Show the optional naming check

Confirm that family and style names match the export preset.

HTML · compiled output

<details class="tip">
<summary>Show the optional naming check</summary>
<p>Confirm that family and style names match the export preset.</p>
</details>

Markdown · authored source

??? tip "Show the optional naming check"
    Confirm that family and style names match the export preset.

Inline blocks¶

Inline admonitions suit a short aside beside related prose on wide screens. They must return to normal flow when space narrows, and surrounding text must still make sense before and after the aside.

Scope

This setting affects the current file only.

Continue with the main instruction after the aside. Keep inline content brief enough that it does not turn the reading column into two competing columns.

HTML · compiled output

<div class="admonition info inline end">
<p class="admonition-title">Scope</p>
<p>This setting affects the current file only.</p>
</div>
<p>Continue with the main instruction after the aside. Keep inline content brief
enough that it does not turn the reading column into two competing columns.</p>

Markdown · authored source

!!! info inline end "Scope"
    This setting affects the current file only.

Continue with the main instruction after the aside. Keep inline content brief
enough that it does not turn the reading column into two competing columns.

Custom icons and colors¶

FontLab customises the semantic system centrally, not per page. Authors may choose the approved info, success, warning, error, secondary, or neutral role; they must not add a literal colour, replace a paired foreground, or make a new severity through local CSS.

Classic admonitions¶

The classic !!! type form is the default for a visible authored aside. It is live in this site and preferred when the reader should see the content without an extra action.

Prior to version¶

Older renderer-specific workarounds are reference history, not authoring guidance for this pinned stack. Use the current classic syntax shown above.

Prior to version¶

Do not copy legacy overrides into a page. The tracked MaterialX bridge owns the current behaviour and derives it from the active daisyUI theme.

Style overrides¶

Project-wide overrides belong in the MaterialX bridge stylesheet. A page may select semantic type and title, but it may not change surface, foreground, border, icon colour, or spacing locally.