Mission and Vision Statement
Mission and vision statement section with side-by-side text blocks and an inspirational leadership quote (name, title, portrait) below. Perfect for university about pages.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/mission-and-vision-statement.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/education/education4.tsx instead.
Usage
The file also exports education4Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Education4, education4Demo } from "@/components/blocks/education/education4"; export default function Page() { return <Education4 {...education4Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | none | Small uppercase label above the heading; only rendered when set. |
| heading | ReactNode | none | Section heading above the mission/vision columns. |
| mission | string | none | Mission statement paragraph in the left column. |
| vision | string | none | Vision statement paragraph in the right column. |
| quote | LeadershipQuote | none | Leadership quote card below the mission/vision columns. |
| className | string | none | Extra classes for the outer section element. |
Types
type LeadershipQuote = { quote: string; name: string; title: string; avatar?: { src: string; alt: string }; };
Behavior notes
- Mission and vision are two independent, equal-width columns that stack to a single column on mobile.
- The leadership quote's avatar falls back to initials built from the first letter of up to two space-separated words in quote.name when no avatar image is supplied.
- This is a static, read-only quote card; there is no carousel or rotation between multiple quotes.
More Education Blocks
View all →academy-course-cards
Academy Course Cards
Academy section with an eyebrow, a two-column heading, and three course cards that float a lesson checklist above a category label, title, and lesson count.
institutional-quick-facts
Institutional Quick Facts
Quick facts grid displaying key institutional statistics with a large value, label, and short description per tile.
global-partnerships-grid
Global Partnerships Grid
Global partnerships section showcasing partner institutions with location details and yearly exchange statistics.
social-media-links-grid
Social Media Links Grid
Social media connection section with platform cards showing handle and follower count.
education-social-proof
Education Social Proof
Social proof section pairing key stats (rating, enrollment, completion rate) with a featured student testimonial.
faculty-testimonials-grid
Faculty Testimonials Grid
Grid of faculty testimonials with instructor photos, teaching-philosophy quotes, and years of experience.