MDX showcase — every block we use in articles

A reference article that exercises every typographic style and embeddable component available to authors writing for the Resources section.

This page is the canonical reference for what an article on Atlaned can contain. If a block isn’t shown here, it isn’t supported — file an issue or extend the MDX components folder and add it here too.

Headings and prose

Headings render with tightened tracking and the #0E1B3D navy used across the marketing site. Body copy is set at 17.5px with comfortable 1.75 line-height — long enough lines stay readable without feeling sparse.

Inline formatting

You can mark text as bold for emphasis, italic for titles or terms, and combine them as bold italic when you really need to. Inline code spans get a soft slate background, and links to other articles inherit the brand accent color and underline only on hover.

Fourth-level heading

Used sparingly — usually only inside long verification manuals where step-by-step procedures need a deeper outline.

Lists

Unordered lists for parallel items:

  • A .gef file from a CPT sounding
  • An Atlaned project with CPT analysis enabled
  • Optional: a custom column-mapping profile

Ordered lists when sequence matters:

  1. Drop the file onto the Soundings panel.
  2. Confirm the parsed channels (qc, fs, u2).
  3. Pick a classification method.
  4. Export to PDF or AGS.

Nested lists work too:

  • Classification methods
    • Robertson 1990 (default)
    • Robertson 2009
    • Schneider
  • Output formats
    • PDF (typeset log)
    • AGS 4.x
    • CSV

Blockquote

The best soil interpretation is the one a reviewer can reproduce from your raw file in under a minute.

— internal review guideline

Blockquotes pick up the kind-themed accent on their left border, so a tutorial blockquote tints differently from a verification-manual blockquote.

Callouts

Use callouts to surface guidance that should not blend into surrounding paragraphs.

Code

Inline code: use Cmd + K to open the command palette, then type import gef.

Fenced code blocks get syntax highlighted by Shiki using the github-light theme:

import { parseGef } from '@atlaned/cpt';

const sounding = await parseGef(file);
const profile  = sounding.classify('robertson-1990');

console.log(profile.layers.length); // → 7

Plain text blocks for tabular data or shell output:

Depth     qc       fs       u2
0.50      1.21     0.018    0.012
1.00      1.84     0.022    0.015
1.50      2.30     0.027    0.018

Tables

Standard markdown tables work for small comparison data:

MethodYearOutputNotes
Robertson 19901990SBT zones 1–9Default. Widely accepted.
Robertson 20092009SBTn zonesNormalized for stress level.
Schneider2008Behavior typesBetter for fine-grained mixed soils.
Ramsey2010Hybrid zonesUse when pore-pressure data is clean.

For dense key/value reference data, prefer the <KeyValue> component:

Sounding metadata

Project ID
NL-2025-AMS-014
Sounding
CPT-07
Depth
0.00 – 18.40 m
Method
Robertson 1990
Operator
A. de Vries

Images

A figure with caption — use this instead of raw markdown images when the visual needs context:

A laptop displaying analytical charts on a desk
Atlaned running a layered bearing-capacity analysis on a freshly imported CPT sounding.

Plain markdown images still work and pick up the rounded corners and subtle ring from the prose styles:

A satellite-style map of a coastal project area

Video

YouTube embeds use the privacy-enhanced domain and are fully responsive (16:9):

A two-minute walkthrough of the importer. Start at 0:30 to skip the intro.

You can also jump to a specific timestamp by passing start (seconds):

Horizontal rule

Use --- to break a long article into clearly separate sections:


After the rule, prose continues with the same styling — the rule itself is a hairline zinc-200 line, no extra spacing chrome.

Putting it together

A real article will mix all of the above: a short lede, a few ## sections with prose and lists, one or two callouts where the reader needs warning or context, a code block or two, and a closing pointer to the next article in the series.

When in doubt, read this page — if your draft uses a block that isn’t on this page, that block doesn’t exist yet. Add it here first, then use it in your article.

Revision history

Helpful?

Last updated .

  1. First version of the reference article.