Typography
Dory provides standard Markdown typography plus a few layout helpers for rich text pages.
Headings#
Markdown headings map to the display scale. Inline formatting covers emphasis, code, links, keys and highlights.
# ## ### ####
Bold, italic, inline code, a link, ⌘K, and a highlight.
Blockquotes hold asides and quotes.
Paragraphs#
Standard Markdown paragraphs are styled with consistent spacing.
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a second paragraph, separated by a blank line.
Inline Code#
Use backticks for inline code. This is styled distinctly from surrounding text.
`code`
Use backticks for inline code.
Links#
Use standard Markdown link syntax for hyperlinks:
[link](url)
Horizontal Rule#
Use --- for a horizontal divider:
---
Line Break#
Use <br/> to insert explicit line breaks without starting a new paragraph:
<br/>
First line
Second line on a new line
Bold and Italic#
**bold** *italic*
Bold text and italic text and bold italic.
Row and Col#
Use <Row> and <Col> to create multi-column layouts for prose content:
<Row> <Col>
Left column content
This text appears on the left side.
Right column content
This text appears on the right side.
Row Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | 1 | Number of columns in the grid. |
className | string | — | Additional CSS classes. |
Col Props
| Prop | Type | Default | Description |
|---|---|---|---|
sticky | boolean | false | Makes the column sticky on large screens (xl:sticky top-24). Useful for code/example columns. |
rows | number | 1 | Number of CSS grid rows this column spans. |
gap | number | 4 | Spacing between items inside the column. |
Sticky Column Example
MDX
<Row>
<Col>
Long prose content that scrolls...
</Col>
<Col sticky>
Code example that stays visible while scrolling.
</Col>
</Row>
Was this page helpful?