AuthorBand

The about-the-author band.

DesktopPhone

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",
	}}
/>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { AuthorBand } from "@sdxc/ui/landing";

Renders the portrait and the copy column: one column on a phone with the portrait capped at 20rem, then a 5/7 split from the lg container with both columns starting at the same top edge.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`portrait`	`RemixNode`	Yes	The author's photo or illustration: an `<img>` or inline SVG, cropped to 3:4.
`eyebrow`	`RemixNode`	No	A short label above the title, such as "About the author".
`title`	`RemixNode`	Yes	The band's statement, rendered at chapter display size through the ambient heading depth.
`description`	`RemixNode`	No	The bio; `<strong>` fragments draw in the heading ink.
`name`	`RemixNode`	Yes	The author's name in the byline.
`jobTitle`	`RemixNode`	No	The author's role or credential line, such as "Type designer, Lisbon".
`credentials`	`RemixNode`	No	Proof points under the bio, usually a `CheckList`.
`social`	`readonly SocialLink[]`	No	Profile links shown as icon buttons in the byline.
`signature`	`RemixNode`	No	A handwritten signature as inline SVG drawn in `currentColor`, set above the name.
`video`	`Video`	No	An intro video card under the byline.

Also accepts everything in Omit<LandingSection.Props, "children" | "title" | "align">.