ProfileCard

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Avatar } from '@nizivo/react/avatar';
import { Button } from '@nizivo/react/button';
import { ProfileCard } from '@nizivo/react/unstable/profile-card';

export function ProfileCardExample(): JSX.Element {
  return (
    <div style={{ maxInlineSize: 320 }}>
      <ProfileCard
        name="Alex Rivera"
        avatar={<Avatar name="Alex Rivera" size="xl" decorative />}
        description="Product designer · Lisbon"
        stats={[
          { label: 'Posts', value: '142' },
          { label: 'Followers', value: '8.2k' },
          { label: 'Following', value: '312' },
        ]}
        action={
          <Button variant="primary" aria-pressed={false} fullWidth>
            Follow
          </Button>
        }
      />
    </div>
  );
}

ImportCopy Anchor Link

import { ProfileCard } from '@nizivo/react/unstable/profile-card';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/profile-card.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript of its own; the action you pass may have some. How to choose.

ContentCopy Anchor Link

name is the card's heading (headingLevel, 3 by default), avatar an xl Avatar, decorative since the name follows, and description what they do. stats (up to three) is a description list, each read as "Posts, 142". action is one full-width action: for Follow, a Button with aria-pressed that becomes "Following".

The coverCopy Anchor Link

The design's cover is the Aurora shader: pass cover={<ShaderSurface />} (ShaderSurface). Without it the cover is drawn with CSS gradients; cover takes any picture in its place, hidden from assistive technology.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

ProfileCardProps type

import type { ProfileCardProps } from '@nizivo/react/unstable/profile-card'

The props of ProfileCard, listed above.

ProfileStat type

import type { ProfileStat } from '@nizivo/react/unstable/profile-card'

One count: "142 Posts".

Name	Type	Default	Description
labelrequired	ReactNode	–
valuerequired	ReactNode	–

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-profile-card, .nz-profile-card-action, .nz-profile-card-avatar, .nz-profile-card-cover, .nz-profile-card-description, .nz-profile-card-name, .nz-profile-card-stat, .nz-profile-card-stat-label, .nz-profile-card-stat-value, .nz-profile-card-stats, .nz-shader-surface.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.