Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.1 Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
A heading two for hierarchy
The drop cap above is a magazine-style oversized first letter floated into the opening paragraph. Below it, the typographic hierarchy continues into headings (h2, h3), paragraphs, and inline emphasis. Strong text carries weight, italic text carries voice, and inline code carries technical detail.
A heading three
Bullet lists and numbered lists work too:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt
And ordered:
- First, the data model
- Then, the component contract
- Finally, the rendered output
Multi-column passages
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
A 2-column block is good for shorter passages where parallel ideas benefit from side-by-side reading. Below, 3 columns for denser, magazine-like text flow.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.
Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui.
Images with text wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.2 Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui.
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna.
Sidebar inserts
These sit in the page gutter beside the surrounding text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Pull quotes
A standard pull quote interrupts the flow of prose with a moment of emphasis:
“The shape of the data is the same; the storage layer is incidental.”
And a larger variant, for cover-line treatment:
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”
Callouts
Asides emphasised to slow the reader down. Five tones:
A note
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna.
A reflection
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Information
Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.
A warning
Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes.
A success
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Scripture quotes (for theological articles)
“Rejoicing in hope; patient in tribulation; continuing instant in prayer.”
Recipe blocks (also available in any article type)
A recipe-style ingredients list and method block can appear in any article type. On the recipe page type, the metadata card also renders at the top of the page; here we just demo the inline blocks.
For the demo
- 2 cupsloremipsum
- 300 gdolor sit amet
- a pinchconsectetur adipiscing
- to tastesaltsea salt preferred
Method
- 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- 2
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
- 3
Vestibulum id ligula porta felis euismod semper.3 Cras mattis consectetur purus sit amet fermentum.
Raw HTML escape hatch
For embeds that no standard block covers:
Closing prose
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.
Below this paragraph the Footnote list and Bibliography sections render automatically from the article’s metadata.
Footnotes
- 1.
Lorem ipsum text descends from Cicero’s De Finibus Bonorum et Malorum (45 BC). Common usage in typesetting since the 1500s.
- 2.
CSS
shape-outsidehas been supported across browsers since around 2017. Combined withfloatit produces magazine-style text wraps. - 3.
Drop caps are illuminated capitals from medieval manuscripts, brought into print typography by mid-20th-century magazine design.
Bibliography
- Bringhurst, R.(2013). The Elements of Typographic Style. Hartley & Marks Publishers.Reference for magazine layout typography.
- Tufte, E.(2006). Beautiful Evidence. Graphics Press.
- MDN — CSS shape-outside.LinkBrowser reference for the text-wrap shape technique.