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:

And ordered:

  1. First, the data model
  2. Then, the component contract
  3. 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.

A 2-column block is good for shorter passages where parallel ideas benefit from side-by-side reading. Below, 3 columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna.

Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.

Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Images with text wrap

Wrap-right demo image.
Image floated right; body wraps left.

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.

Wrap-left demo image.
Same component, floated left, smaller width.

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.

Full-bleed demo image.
Full-width image; no text wrap. Breaks the column flow entirely.

Sidebar inserts

These sit in the page gutter beside the surrounding text.

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.

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.

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.

Pull quotes

The shape of the data is the same; the storage layer is incidental.

A made-up sourceOn article system architecture

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CiceroDe Finibus Bonorum et Malorum, 45 BC

Callouts

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 quote

Rejoicing in hope; patient in tribulation; continuing instant in prayer.

Romans 12:12(NKJV)

Recipe blocks

The ingredients + method blocks can appear in any article type. On the Recipe page type, the metadata card also renders at the top.

For the demo

  • 2 cupsloremipsum
  • 300 gdolor sit amet
  • a pinchconsectetur adipiscing
  • to tastesaltsea salt preferred

Method

  1. 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  2. 2

    Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.

    Method step image.
  3. 3

    Vestibulum id ligula porta felis euismod semper.3 Cras mattis consectetur purus sit amet fermentum.

Raw HTML escape hatch

Raw HTML rendered via dangerouslySetInnerHTML — use sparingly.

Closing prose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Below this paragraph the Footnote list and Bibliography sections render automatically from the article’s metadata.

Footnotes

  1. 1.

    Lorem ipsum text descends from Cicero’s De Finibus Bonorum et Malorum (45 BC).

  2. 2.

    CSS shape-outside has been supported across browsers since around 2017. Combined with float it produces magazine-style text wraps.

  3. 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.