https://framer.com/m/MarkdownNext-ORx9tF.js
MarkdownNext
MarkdownNext renders a markdown string against the theme type scale. Headings, links, rules and code all resolve from fontJSON and the colour tokens, so long-form content matches the rest of the system.
Examples
Live specimens for every control the component exposes.
Default
A markdown string in, themed typography out. Nothing about the type is hardcoded.
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
Variant
UI tightens the scale for product surfaces. Editorial opens it up for reading.
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
UI
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
Editorial
Heading mapping
compressed pulls every heading down a step, so an embedded document does not compete with the page title.
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
standard
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
compressed
Colour
Text, secondary, link, rules and code backgrounds are separate token slots.
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
primary link
Rendering markdown
A second level heading
Body copy resolves from the theme fontJSON, so headings, links and
inline code all track the type scale rather than hardcoded sizes.
- Lists pick up the theme text colour
- Rules and blockquotes use the border tokens
warning link
Image placement
imageAlign and imageWidth place an image inside the flow. Left or right at less than full width lets the following copy run alongside it; centre at 100% breaks the column.
The paragraph after an image is where placement shows itself. At less than full width and aligned to one side, the copy runs up beside the picture and closes underneath it. At full width the image takes the whole column and the text simply resumes below.
A second paragraph keeps the wrap going long enough to read.
imageAlign Left · imageWidth 42
The paragraph after an image is where placement shows itself. At less than full width and aligned to one side, the copy runs up beside the picture and closes underneath it. At full width the image takes the whole column and the text simply resumes below.
A second paragraph keeps the wrap going long enough to read.
imageAlign Center · imageWidth 100
The paragraph after an image is where placement shows itself. At less than full width and aligned to one side, the copy runs up beside the picture and closes underneath it. At full width the image takes the whole column and the text simply resumes below.
A second paragraph keeps the wrap going long enough to read.
imageAlign Right · imageWidth 42
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for MarkdownNext
Long-form content arrives as markdown from a CMS or an API.
Headings and body must track the theme type scale.
An embedded document should not compete with the page title.
Links, rules and code need to follow the colour tokens.
Reach for something else
The copy is a single styled string — use TextPro.
The content needs canvas-editable rich text.
You need a float layout — that comes from the magical-md skill.
Io — UI Basics
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.