Atlas Forms
Article
The article control renders long-form content with full Markdown support. Use it for help text, policy content, step-by-step instructions, and any structured prose that needs headings, lists, code blocks, and links alongside form fields.
Minimal Example
{
"id": "privacy-notice",
"type": "article",
"width": "full",
"settings": {
"content": "## Privacy Notice\n\nBy submitting this form you agree to our [Privacy Policy](https://example.com/privacy).\n\nWe collect the following data:\n- Full name\n- Email address\n- Company details"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
content | string | — | Markdown content string. Supports standard CommonMark plus GFM tables and task lists. |
src | string | — | URL to an external Markdown file. Takes precedence over content when both are set. |
maxHeight | string (CSS) | — | If set, makes the article scrollable at this height |
showBorder | boolean | false | Render a card-style border around the article |
padding | string (CSS) | "0" | Padding inside the article container |
Supported Markdown Features
| Feature | Syntax | Renders as |
|---|---|---|
| Headings | # H1, ## H2, ### H3 | HTML heading elements |
| Bold / italic | **bold**, *italic* | Strong / em |
| Links | [text](url) | Anchor with rel="noopener" |
| Unordered list | - item | ul / li |
| Ordered list | 1. item | ol / li |
| Task list | - [ ] unchecked, - [x] checked | Checkbox list (read-only) |
| Code inline | `code` | code element |
| Code block | Triple backtick with language | Syntax-highlighted code block |
| Table | GFM pipe table syntax | HTML table |
| Blockquote | > text | blockquote element |
| Horizontal rule | --- | hr element |
Scrollable Policy Panel
For terms and conditions or lengthy policies, constrain the height so the article scrolls without pushing the submit button off screen:
{
"id": "terms-article",
"type": "article",
"width": "full",
"settings": {
"content": "## Terms of Service\n\n### 1. Acceptance\nBy using this service...\n\n### 2. User Obligations\n...\n\n### 10. Governing Law\n...",
"maxHeight": "350px",
"showBorder": true,
"padding": "16px"
}
},
{
"id": "terms-accepted",
"type": "checkbox",
"label": "I have read and accept the Terms of Service",
"validation": { "required": true }
}Dynamic Content from Context
The src setting loads Markdown from an external URL. Combine with a context template expression to load tenant-specific content:
{
"id": "tenant-policy",
"type": "article",
"settings": {
"src": "{{context.tenant.policyUrl}}",
"maxHeight": "400px",
"showBorder": true
}
}Article vs HTML Control
| Scenario | Article | HTML Control |
|---|---|---|
| Simple prose, lists, headings | Best — clean Markdown | Verbose HTML required |
| Rich formatted content with custom styling | Limited to Markdown | Best — full HTML |
| Dynamic content from a CMS | Best if CMS exports Markdown | Best if CMS exports HTML |
| Code examples with syntax highlighting | Best — fenced code blocks | Requires pre/code markup |
| User-generated content | Both safe — sanitised | Both safe — sanitised |