Production-ready UI blocks for landing pages, dashboards, and web apps.
Three short testimonials in ruled columns, each a serif quote with a name and context, under a serif heading that settles in word by word and a sliding-marker pill.
A centred install hero with a serif headline that settles in word by word, an intro, a rounded command pill that copies the install command on click beside a sliding-marker pill, and under it three portrait page previews that blur in as they load and rise at different speeds on scroll, the middle one sitting higher, each with a small caption.
A getting-started section with an eyebrow over a hairline rule, a two-column heading, three monospace-numbered steps under their own hairlines, and an accent button.
Three side-by-side step cards with a media surface anchored to the bottom of each card. Each slot accepts an image, video, or live registry-component asset.
A how-it-works section: serif heading settling in word by word beside the intro and a pill action, three numbered steps whose top rules draw themselves in one after another, and a wide photograph drifting inside its frame to close.
A pricing section with an eyebrow over a hairline rule, a two-column heading, and three plan cards with light prices, checked feature lists, and an accent-highlighted popular tier.
Three pricing tiers with an emphasized popular plan and feature lists.
A three-tier pricing grid whose monthly and yearly toggle swaps both the light figure and the billing note on every card, with the recommended tier outlined in the accent.
A values section: a serif heading that settles in word by word beside the intro and a pill action, then three soft muted cards with a round icon, a serif title and a description that rise into view in turn.
A rotating testimonial: a portrait on the left and a large serif quote on the right blur out and in together every six seconds, pause on hover, and can be chosen directly from a row of round portrait buttons, with a pill action beneath.
Full-bleed hero whose background crossfades to the active item, with an auto-scrolling marquee of clickable thumbnails along the bottom and a giant heading above the strip.
Multi-ticket type selector with quantity controls, availability tracking, and checkout total. Perfect for event ticketing with multiple pass options.
Tabbed membership pricing: feature list, headline price with CTA, and a plan summary panel per tab.
Two photographs split across the same grid so each square can be flipped from before to after on click, with buttons to turn the whole frame over and a counter of how much has been revealed.
Alternating left-right cards connected by a vertical line. Great for creating a narrative flow through related questions.
Two-column layout with company stats on the left and a vertical timeline of milestones on the right. Ideal for company history and growth stories.
Horizontal timeline with year markers and key metrics at each milestone, ideal for showing company growth and history.
A pinned scroll feature section for a heritage house built on the scroll-rail component, set on a dark surface: the heading, intro, an Arrow Pill and an underline link open a century-long timeline that travels sideways as the page scrolls. Each milestone pairs a photograph of its own size and proportion with a very large light year numeral, a short title and one sentence, all hung on a continuous hairline with a dot per year. Older photographs are printed in monochrome or faded tones, each photograph drifts inside its frame, numerals drift against the travel, and text brightens as its milestone reaches the middle. A thin progress line along the bottom fills with the scroll. Reduced motion turns the timeline into a plain horizontal scroll.
A horizontally scrollable dated milestone timeline with alternating cards on a continuous axis.
Vertical timeline with alternating content and numbered dots. Perfect for onboarding or journey-based FAQs.
Vertical timeline archive organized by year and month. Calendar icon with border line connecting entries. Compact text-only format.
Base plan pricing with toggle group buttons for selecting add-ons. Perfect for products with a la carte feature selection.
Three pricing cards under a centred serif heading that settles in word by word, with a pill toggle between paying per session and committing to a season: the serif prices blur out and in as it switches, and each card ends in a sliding-marker pill.
Hero section with token price card showing live market stats. Price change indicator, market cap, volume, and circulating supply grid. Trending up/down icons.
Responsive grid of linked tool cards with descriptions and tag badges. Excellent for developer tools showcase, API documentation, or SDK listings.
A two-column directory of free tools, each card a linked row with a tinted icon tile, a name and one line on what it does, closed by a seal button to the full list.
Three tinted topic cards, each stamped with how many pieces sit behind it, the topic name, and an image filling the lower half, alongside a link out to the full topic index.
A topic hub card whose left third is a photo panel with the topic title set on a scrim over it, next to a two-column body: a short summary on one side and the posts belonging to the topic listed by title alone on the other.
A categorised FAQ whose topic rail is derived from the questions themselves and carries live counts, switching the accordion beside it and resetting it to the first answer on every change.
Visual category grid showing tour types like adventure, cultural, beach, and safari with images and tour counts. Perfect for travel agencies organizing trips by experience style.
A setup section listing four numbered steps with who owns each one, against a column that sticks while they scroll and floats a live step tracker on an image tile.
A web-analytics console: sidebar + search topbar, a live realtime strip, an hourly sessions area chart, a daily-goal radial gauge, a channel-audience radar chart, a new-vs-returning line chart, and a sortable top-pages table.
Program grid with images, duration, frequency, skill level, and enrollment buttons. Perfect for fitness program catalogs and workout plan selection.
A learning section leading with an image tile that floats a live help centre search, then listing the videos, guides, and sessions behind it as linked hairline rows across two columns.
Searchable episode transcript with clickable timestamps, speaker labels, and download option. Perfect for podcast accessibility features and content discovery.
Before/after photo grid showcasing member transformations with weight loss stats and testimonial quotes. Perfect for fitness success stories and gym marketing.
Tourism footer with destination image cards, trip type links, support info, trust badges, and booking CTA. Perfect for travel agencies and vacation booking platforms.
Grid showcase of travel guides with photos, specialties, languages spoken, ratings, and tour counts. Perfect for tour companies highlighting their expert local guides.
Travel diary with dated entries, location info, weather, and photo galleries. Perfect for travel blogs and adventure stories.
Dashboard-style stat cards with colored trend badges showing up, down, or neutral changes. Perfect for quarterly reports and growth metrics.
Four-column news card grid with gradient overlays, category badges, and author info.
Ranked list of trending destinations showing position numbers, thumbnails, trend percentages, and hot indicators. Perfect for showcasing popular or rising travel destinations with social proof.
Ranked trending topics list with hashtags, post counts, growth percentages, and category badges. Perfect for sidebar widgets showing what is trending.
Asymmetric showcase: a tall image hero on the left paired with two stacked workflow assets on the right — recipe card and trigger/action pair.
Full-width trigger picker with search, category filters, and a 12-app grid. Drop-in app marketplace showcase for any automation product.
Itemized pricing card showing costs for flights, accommodation, transfers, meals, and activities with discount badges. Perfect for transparent pricing on trip detail pages.
Visual day-by-day trip timeline with numbered day badges, location images, and time-based activity schedules. Perfect for tour operators presenting detailed multi-day travel itineraries.
A festival hero for graphic design in public space whose headline is a trivision board built on the text22 component: the statement is cut into vertical triangular slats that turn one after another in a wave, flipping from a paper face to an ink face to an accent face, each carrying the next statement, with shading as faces turn away, and crisp, even seams between the slats. An eyebrow sits above, a ruled row below holds the intro, an Arrow Pill and an underline link. Pauses on hover and offscreen; with reduced motion the statement changes in place.