FontLab patterns — moved

The reference is now organized by what you want to build. These links preserve earlier bookmarks. Start with the field guide.

FontLab patterns

Lead paragraph

This sentence introduces the page in one calm breath.

{ .fl-lead }

Wide image

! Describe the evidence a reader needs ( image-url ){ .fl-wide }

Margin aside

! Describe the supporting evidence ( image-url ){ .fl-aside }

Full-bleed image

! Describe the full-width product evidence ( image-url ){ .fl-bleed }

UI specimen wrapper

< div class = "fl-ui" >

< button class = "btn btn-primary" type = "button" > Primary action </ button >

</ div >

UI row

< div class = "fl-ui" >

< div class = "fl-ui-row" > …related components… </ div >

</ div >

UI stack

< div class = "fl-ui" >

< div class = "fl-ui-stack" > …related components… </ div >

</ div >

Showcase grid

feature-grid

Measure

Rhythm

Restraint

< div class = "fl-showcase-grid" >

< div class = "fl-card" > … </ div >

< div class = "fl-card" > … </ div >

</ div >

FontLab card

Quiet frame

< div class = "fl-card" >

< h3 class = "card-title" > Quiet frame </ h3 >

< p > One short, complete claim. </ p >

</ div >

FontLab hero

< div class = "hero fl-hero" >

< div class = "hero-content" > …one idea and one action… </ div >

</ div >

FontLab hero title

< h2 class = "fl-hero__title" > A genuine section title </ h2 >