Editorial & Typographic Blocks for shadcn/ui
Three-column magazine layout using Pretext's layout() to measure precise pixel heights per column and equalize them, something CSS alone cannot do without reflow. Includes masthead bar, ghost background word 'FORM', large drop cap on intro paragraph, full-width blockquote pull quote, three columns with Roman numeral labels, and a typographic footer.
Essay
On Proportion, Rhythm,
and the Weight of Type
By Marcus Veldtman · Photography: Arno Brisse
import MagazineEditorialColumns from "@/components/creative-tim/blocks/magazine-editorial-columns"
export default function Page() {
return <MagazineEditorialColumns />
}
Magazine-style article block using Pretext's layoutNextLine() to route body text line-by-line around a right-floated photograph. Each line's available width narrows while in the image zone and returns to full column width below it, achieving true text-wrap with pixel-perfect canvas-measured typography.
The Architecture
of the Printed Word
Continued on page 24 →
import MagazineTextWrap from "@/components/creative-tim/blocks/magazine-text-wrap"
export default function Page() {
return <MagazineTextWrap />
}
Dark editorial feature spread. Giant 'SCALE' and 'VOICE' words flank the layout at near-zero opacity, a 90°-rotated 'LANGUAGE' word runs vertically on the left margin, and 'FORM' is overlaid on a cropped photo. Both text columns rendered with Pretext's layoutNextLine() + prepareWithSegments() as individually positioned absolute spans for pixel-precise typography. Ghosted 'EDITORIAL' anchors the bottom.
On the typographer's most radical gesture
import MagazineOversizedWords from "@/components/creative-tim/blocks/magazine-oversized-words"
export default function Page() {
return <MagazineOversizedWords />
}
Vogue-inspired editorial spread built around a dominant letter 'B'. The letter is rasterized to an OffscreenCanvas at runtime to extract a polygon hull of its exact typographic silhouette. Pretext's layoutNextLine() flows body text line-by-line to the right of the letter, with each line's left boundary carved by the hull so text hugs the letterform. The upper-right quadrant reserves space for a static editorial title ('bauhaus revival') by adding a second blocker interval during the title zone.
import MagazineBigLetter from "@/components/creative-tim/blocks/magazine-big-letter"
export default function Page() {
return <MagazineBigLetter />
}
Editorial magazine layout with a full-bleed castle photograph anchored to the bottom of the section. Three equal columns flow above the image, each stopping organically where the castle silhouette rises to meet the text.
Essay · Heritage
Stone & Strategy
How the great fortifications of medieval Europe shaped a continent, and why their lessons endure into the present age
import MagazineImageColumns from "@/components/creative-tim/blocks/magazine-image-columns"
export default function Page() {
return <MagazineImageColumns />
}
These examples are made using the open-source MIT framework Pretext.