Profile & Social Primitives

Profile-building primitives for avatar headers, social link groups, and decorative section headings

Overview

These primitives cover the most common profile-page building blocks: a centered hero, a social link cluster, and a decorative heading treatment. They stay focused on rendering while leaving content strategy, icon sourcing, and section structure to the consumer.

ProfileHero

ProfileHero renders a centered avatar, name, and subtitle for a person or creator profile page.

Contract

interface Props {
  name: string;
  subtitle: string;
  avatarSrc: string;
  avatarAlt: string;
}

Example usage

<ProfileHero
  name="Matt Riley"
  subtitle="Senior Software Engineer in Leeds, West Yorkshire"
  avatarSrc="https://github.com/matt-riley.png"
  avatarAlt="Matt Riley's GitHub avatar"
/>

Live example

Matt Riley

Senior Software Engineer in Leeds, West Yorkshire

SocialLinks renders a navigation landmark containing external profile links with hover and focus affordances.

Contract

interface Props {
  links: Array<{
    href: string;
    icon: string;
    label: string;
  }>;
}

Example usage

const links = [
  { href: "https://github.com/matt-riley", icon: "GitHub", label: "GitHub profile" },
  { href: "https://linkedin.com/in/matthewjriley", icon: "LinkedIn", label: "LinkedIn profile" },
  { href: "https://bsky.app/profile/mattriley.dev", icon: "Bluesky", label: "Bluesky profile" },
];

<SocialLinks links={links} />

Live example

DecoratedHeading

DecoratedHeading renders stylized SVG text for section labels and other decorative headings.

Contract

interface Props {
  text: string;
}

Example usage

<DecoratedHeading text="Projects" />
<DecoratedHeading text="Experience" />

Live examples

Composition Example

Putting the primitives together

<ProfileHero
  name="Matt Riley"
  subtitle="Senior Software Engineer in Leeds, West Yorkshire"
  avatarSrc="https://github.com/matt-riley.png"
  avatarAlt="Matt Riley's GitHub avatar"
/>

<SocialLinks links={profileLinks} />

<h2 id="projects-heading" class="sr-only">Projects</h2>
<Section labelledBy="projects-heading">
  <DecoratedHeading text="Projects" />
  <!-- Project content here -->
</Section>

Consumer Responsibilities

Accessibility

Provide meaningful avatarAlt text for the profile image.
Set each social label so the navigation remains understandable without the visual icon text.
Pair DecoratedHeading with a semantic heading when the text labels a section.

Rendering boundaries

SocialLinks passes each href straight through to the rendered <a href> with no package-level URL validation. Supply vetted external URLs, ideally https://, or wrap the primitive with your own validation before rendering.

The primitive also renders the icon string as visible text inside an aria-hidden wrapper. The accessible name comes from label, not the icon value. If you need SVG or component-based icons, compose a wrapper around the same link data contract rather than treating this primitive as a raw HTML injection point.