component

University hero

Running live. Go ahead and touch it.

A reference-led university introduction with synchronized left copy and a photographic carousel on the right.

See it in the design system

How it behaves

  • The right image and left headline advance together
  • Autoplay pauses on hover, focus, off-screen, or with the pause button
  • Arrow buttons, keyboard, and swipe change slides
  • Reduced motion keeps the first slide still

Find more that moves like this

Kind
component
Blueprint
library-kit 1.0.20
Moves by
autoplay, swipe, entrance

Import

import { UniversityHero } from "@/components/shared/hero/university-hero";

Props

PropWhat it does
slidesHeadline and image data for each carousel slide
eyebrowSmall line above the headline
actionLabel, actionHrefApplication action and destination
awardYear, awardTitleSmall award caption at the bottom right
intervalAutoplay milliseconds. Defaults to 5000
headingAsh1 or h2. Defaults to h2
classNameStyles for the outer element

Your agent builds it. You take the credit.

University hero ships inside the Library Kit blueprint. These instructions tell your agent to take only this piece.

Version
1.0.20
Files
100
Dependencies
20
Assets
14

Paste this into Claude Code, Codex, Cursor, or whichever agent you trust today.

  • Building a blueprint runs its code, so use an isolated environment.
  • License: UNLICENSED.
  • Masonry cards embed live previews from /library/{id}/preview paths on the original site. Supply your own items and preview pages, or the cards show only their background color.
  • The agent panel on this page shows an example with placeholder numbers. Pass the real facts of your own published blueprint.
  • The university hero follows a user-supplied third-party design image. Its institution name, rankings, awards, and admissions action are illustrative, and the #apply link needs a real destination before release. The carousel reuses project image assets, not the reference photograph.
  • The department accordion follows a user-supplied third-party visual reference whose reuse rights have not been cleared. Its department descriptions are illustrative, and its campus photograph was generated for this project. Replace the copy with institution-specific content for production use.
  • The academic news, admissions footer, and founder message follow user-supplied third-party design references whose reuse rights have not been cleared. Their Eduvet branding, dates, founder identity, contact details, and copy are illustrative. The five photographs were generated for this project. Replace the sample facts and connect real destinations and a subscribe handler before production use.
website

Pallet Ross

A creative network landing page where one set of cards travels through pinned scroll stages, from arc to cascade to grid.

website

Sixpay

A fintech homepage with detail panels in the navbar, a phone between tilted photos, rotating feature tabs, and a looping carousel of customer stories.

websiteNew

Eduvet University

A university homepage with a split photo hero, founder message, campus gallery, interactive departments, news, and an admissions preview.

component

Agent handoff

Everything a coding agent needs to rebuild a piece: a prompt that types itself, MCP setup for six clients, and the blueprint links.