Stats & values
About Collage
A label and heading, three values side by side, then a staggered collage of three photos with short texts and two buttons.
Layout and motion from the Titen template — see it in contextBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | About us | Small muted line above the heading; it rises 7px after 0.4s. |
| title | string | Thoughtful architecture… | Heading (h2, up to 48rem); its words rise out of a blur the first time it scrolls into view. |
| values | { title, description }[] | 3 values | Stacked on phones, three columns from 768px; titles are h3. [] hides them. |
| collage | [first, second, wide] — { image: { src, alt }, text } | 3 photos | Each photo with its text: the first text above its photo, the second photo above its text, the wide photo above the last text and the buttons. alt "" marks a photo as decorative. |
| actions | { label, href }[] | More about us, Our projects | Up to two buttons under the last text: filled, then outlined with an arrow that turns 45° on hover. |
| className | string | — | Classes for the <section>. |
- The collage is one column on phones; from 768px the first two photos pair up, staggered (the first text above its photo, the second photo above its text), over the wide block; from 1024px all three share one row, the pair taking the first half and the wide block the second.
- Photos keep Titen's heights — 350 / 428 / 494px, 350 / 440 / 529px and 333 / 697 / 497px (phones / 768px / 1024px) — rounded-xl and object-cover.
- Motion from Titen: the heading rises word by word out of a 7px blur (text-appear, 0.05s apart, spring 320 / 58), the label 7px after 0.4s, and each value, the pair and the wide block rise 18px once half in view (scroll-reveal, spring 320 / 55); with reduced motion everything is in place at once.
- Titen's photos are decorative; here they take alt text (pass "" for a decorative one).
