Open in a new tab
View code
tsx
<AuthorBand
	portrait={<img src={portrait} alt="Odile Varga at her drafting table" />}
	eyebrow="About the author"
	title="Written by a type designer who ships code"
	description={
		<>
			Odile Varga has drawn typefaces for fifteen years and built design systems for ten.
			She wrote The Measure for <strong>the engineers who set the type</strong>.
		</>
	}
	credentials={
		<CheckList>
			<CheckRow>Drew the Larch and Merrow type families</CheckRow>
			<CheckRow>Built the design system behind three public banks</CheckRow>
			<CheckRow>Has taught her typography workshop to 2,000 people</CheckRow>
		</CheckList>
	}
	name="Odile Varga"
	jobTitle="Type designer, Lisbon"
	signature={<svg viewBox="0 0 160 56" aria-hidden="true">…</svg>}
	social={[
		{ href: "https://odile.type", label: "Website", icon: <GlobeIcon /> },
		{ href: "https://odile.type/feed", label: "Newsletter", icon: <RssIcon /> },
		{ href: "mailto:hello@odile.type", label: "Email", icon: <MailIcon /> },
	]}
	video={{
		thumbnail: <img src={still} alt="" />,
		title: "Why type is code",
		duration: "2:13",
		href: "/videos/intro",
	}}
/>