https://framer.com/m/Pretextlayout-LRK0IZ.js

Io / Enhancements / PretextLayoutFramer

PretextLayoutFramer

PretextLayoutFramer sets a body of text as a printed page — columns, rules, a drop cap and a pull quote — and flows it across as many pages as the copy needs.

Enhancements31 controlsprint layouteditorial type

Examples

Live specimens for every control the component exposes.

Default

Body copy goes in as one string and the component breaks it into columns and pages. Headings, quote and body each take their own font; these specimens run Playfair Display over Public Sans.

Columns

One, two or three columns. These two show the extremes; colGap and the gutters decide how much air sits between them, maxPageHeight where a page breaks.

1 column

3 columns

Editorial detail

The drop cap, the rules between columns and the rules around the page can each be turned off on their own.

drop cap off

column rules off

page rules off

Props

The controls exposed on the instance panel.

PropTypeBehaviour
bodySlotlayersA layer dropped in to replace the body. Editor only.
pullquoteSlotlayersA layer used as the pull quote. Editor only.
slotHublayersShared slot source for the above.
slotConfigsobjectHow those slots are placed in the flow.
mediaItemsarrayImages placed into the flow.
bodyTextstringThe copy itself, as one string. Ships with sample text.
columnsenum1, 2 or 3 columns.
maxPageHeightnumberHeight at which the copy breaks to a new page, 300 to 3000 pixels.
pageGapnumberSpace between those pages.
mainFontfontBody type.
h1FontfontType for H1. h2Font through h6Font follow the same pattern.
h2FontfontType for level-2 headings.
h3FontfontType for level-3 headings.
h4FontfontType for level-4 headings.
h5FontfontType for level-5 headings.
h6FontfontType for level-6 headings.
codeFontfontType for code passages.
quoteFontfontType for the pull quote.
paragraphSpacingnumberSpace between paragraphs.
imgSideenumWhich side inline images sit on.
imgMaxWidthPctnumberHow wide those images may run, as a percentage of the column.
alphaWrapbooleanWraps text around the shape of a cut-out image rather than its box.
showDropCapbooleanSets the first letter as a drop cap.
dropCapLinesnumberHow many lines tall that drop cap is.
showColumnRulesbooleanDraws hairlines between columns.
showPageRulesbooleanDraws the rules that frame the page.
textColorcolorBody text colour.
accentColorcolorColour for rules, the drop cap and the quote.
gutterHnumberHorizontal margin inside the page.
gutterVnumberVertical margin inside the page.
colGapnumberSpace between columns.
PropTypeBehaviour
bodySlotlayersA layer dropped in to replace the body. Editor only.
pullquoteSlotlayersA layer used as the pull quote. Editor only.
slotHublayersShared slot source for the above.
slotConfigsobjectHow those slots are placed in the flow.
mediaItemsarrayImages placed into the flow.
bodyTextstringThe copy itself, as one string. Ships with sample text.
columnsenum1, 2 or 3 columns.
maxPageHeightnumberHeight at which the copy breaks to a new page, 300 to 3000 pixels.
pageGapnumberSpace between those pages.
mainFontfontBody type.
h1FontfontType for H1. h2Font through h6Font follow the same pattern.
h2FontfontType for level-2 headings.
h3FontfontType for level-3 headings.
h4FontfontType for level-4 headings.
h5FontfontType for level-5 headings.
h6FontfontType for level-6 headings.
codeFontfontType for code passages.
quoteFontfontType for the pull quote.
paragraphSpacingnumberSpace between paragraphs.
imgSideenumWhich side inline images sit on.
imgMaxWidthPctnumberHow wide those images may run, as a percentage of the column.
alphaWrapbooleanWraps text around the shape of a cut-out image rather than its box.
showDropCapbooleanSets the first letter as a drop cap.
dropCapLinesnumberHow many lines tall that drop cap is.
showColumnRulesbooleanDraws hairlines between columns.
showPageRulesbooleanDraws the rules that frame the page.
textColorcolorBody text colour.
accentColorcolorColour for rules, the drop cap and the quote.
gutterHnumberHorizontal margin inside the page.
gutterVnumberVertical margin inside the page.
colGapnumberSpace between columns.

Usage

Guidance carried over from the component definition.

Reach for PretextLayoutFramer

Long-form copy should read as a printed page rather than a web column.

The piece needs a drop cap, column rules or a pull quote to carry its voice.

Headings, quotes and body each need their own typeface.

Images should sit beside the text and let it wrap around them.

Reach for something else

The content is markdown you want rendered as-is — use MarkdownNext.

You need a single styled paragraph or heading — use TextPro.

The text should reveal on scroll rather than sit still.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.