1. Grid System Stress Test
A — Full-width (span=30)
B — Two halves (15/15)
C — Thirds (10/10/10)
D — Asymmetric push (5+20 / 5 gap / 5+5)
E — Five items (6 cols each)
2. Typography
TextBlock — narrow, dropcap
Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
TextBlock — wide, lead
This first paragraph should appear larger as a lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Second paragraph returns to normal size. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Inline Heading Test
Content continues after heading. This is a link and this is bold.
- List item one
- List item two
PullQuote — no cite
Every frame tells a story, if you know where to look.
PullQuote — with cite
To photograph is to hold one's breath, when all faculties converge to capture fleeting reality.
Verse — editorial + sans
— Test Attribution
3. Case Study Blocks
Hero — Image Variant
Testing hero with image, 3 meta items, and badge.
MetaGrid — 4 cols
MetaGrid — 2 cols
StatCards — 5 items
ImageGrid — 4 columns
ImageGrid — 1 column, no rounding
VideoEmbed — Vimeo
FullBleed with caption and maxHeight
ProjectCredits — long list
Crédits du projet
- RéalisationDamien Rayuela
- ProductionStudio Lumière
- Direction PhotoSophie Martin
- MontageLucas Petit
- SonMarie Dubois
- Musique originaleCollectif Audio
NextPrevProject — both links
NextPrevProject — prev only
4. Spacing Scale
xs sm md lg xl 2xl