Recipe

Open to Work Card

A loud profile card composition for portfolios, hiring pages, and creator profiles. Composes surface, media frame, chips, icon actions, button, and decorative sticker primitives into a real personal profile card — proof that ng-brutalism builds product UI, not just isolated demos.

13primitives
100%Composed
Source ↗Open Docs

Preview

Neo-brutalist illustration of Khang Tran
Open to work

Khang
Tran

Software Engineer
AngularTypeScriptNode.js

Building loud, accessible, and expressive Angular interfaces with sharp developer experience.

Code

Structural template. See the example source for the full implementation.

Imports
import {
  NbButton,
  NbButtonTrailingIcon,
  NbChip,
  NbChipGroup,
  NbCluster,
  NbDisplay,
  NbIconButton,
  NbMediaFrame,
  NbSection,
  NbSplit,
  NbStack,
  NbStatusDot,
  NbSticker,
  NbStickerFace,
  NbSurface,
  NbText,
  NbTypography,
} from '@ng-brutalism/ui';
Click 'Show more' to view additional details.
Composition skeleton
<article nbSurface>
  <div nbSplit>
    <div nbMediaFrame>
      ...
    </div>

    <section nbStack>
      ...
    </section>
  </div>

  <section nbSection>
    <div nbStack>
      ...
    </div>
  </section>

  <footer nbSection divider="top">
    <div nbSplit>
      ...
    </div>
  </footer>
</article>
Click 'Show more' to view additional details.
Template
<div nbCluster justify="center" padding="xl" class="otw-stage">
<article nbSurface tone="cream" border="strong" shadow="hard" radius="xl"
         class="relative max-w-[860px]">
  <!-- Decorative star sticker overflowing the corner -->
  <nb-sticker shape="star" tone="pink" decorative [rotate]="10"
              class="absolute -top-7 -right-4 z-20">
    <nb-sticker-face />
  </nb-sticker>

  <!-- Top: portrait + identity -->
  <div nbSplit ratio="1:1" gap="xl" padding="lg" collapse="sm" align="start">
    <div nbMediaFrame ratio="3/4" tone="pink" border="strong" radius="lg" shadow="none">
      <img src="/open-to-work/khang-avatar.png" alt="Illustration of Nora Chen" />
    </div>

    <div nbStack gap="none" align="start">
      <span nbChip tone="mint" radius="md" class="font-bold uppercase">
        <span nbStatusDot state="online"></span>
        Open to work
      </span>

      <h1 nbDisplay size="lg" fluid class="mt-8 mb-0 uppercase whitespace-nowrap">Nora<br />Chen</h1>

      <div nbStack gap="xs" align="start">
        <span nbText size="2xl" weight="bold" underline="bar"
              underlineGap="xs" underlineWidth="md"
              style="--nb-underline-color: var(--otw-pink)">
          Product Designer
        </span>
      </div>

      <!-- Decorative dotted grid (docs-local CSS, radial-gradient dots) -->
      <span class="otw-dots block" aria-hidden="true"></span>
    </div>
  </div>

  <!-- Skills + bio -->
  <div nbSection padding="lg">
    <div nbStack gap="lg" align="start">
      <div nbChipGroup gap="sm" radius="sm" shadow="hard"
           transform="uppercase" tracking="wide">
        <span nbChip nbTypography font="display" tone="blue">UX</span>
        <span nbChip nbTypography font="display" tone="lavender">Design Systems</span>
        <span nbChip nbTypography font="display" tone="pink">Figma</span>
      </div>

      <p nbText size="lg" weight="medium" measure="md">
        Designing intuitive, accessible, and delightful experiences that make an impact.
      </p>
    </div>
  </div>

  <!-- Footer: socials + CTA -->
  <div nbSection divider="top" padding="lg">
    <div nbSplit ratio="1:1" gap="lg" collapse="sm" align="center">
      <div nbCluster gap="sm" align="center">
        <button nbIconButton shape="circle" size="lg" shadow="none" tone="mint"
                icon="/open-to-work/linkedin-icon.png" aria-label="Nora Chen on LinkedIn"></button>
        <button nbIconButton shape="circle" size="lg" shadow="none" tone="lavender"
                icon="/open-to-work/twitter-icon.png" aria-label="Nora Chen on Twitter"></button>
        <button nbIconButton shape="circle" size="lg" shadow="none" tone="pink"
                icon="/open-to-work/globe-icon.png" aria-label="Nora Chen personal site"></button>
        <button nbIconButton shape="circle" size="lg" shadow="none" tone="yellow"
                icon="/open-to-work/email-icon.png" aria-label="Email Nora Chen"></button>
      </div>

      <button nbButton tone="yellow" size="xl" radius="md" fullWidth class="sm:w-auto">
        <span nbText size="xl" weight="black" transform="uppercase" tracking="wide">
          View Profile
        </span>
        <span nbButtonTrailingIcon shape="circle" tone="inverse" size="md"
              icon="/open-to-work/arrow-icon.svg"></span>
      </button>
    </div>
  </div>
</article>
</div>
Click 'Show more' to view additional details.

Primitives used

  • nbSurface— bordered card shell
  • nbSplit— portrait/identity and socials/CTA two-column layouts
  • nbStack— vertical rhythm for identity and skills/bio
  • nbCluster— wrapping social icon button row
  • nbSection— padded skills/bio and divided footer regions
  • nbMediaFrame— pink portrait frame with object-fit cover
  • nbDisplay— huge uppercase name heading
  • nbText— role label, bio, and CTA label
  • nbChip— open-to-work status and skill tags
  • nbIconButton— circular social action buttons
  • nbButton— view profile call to action
  • nbButtonTrailingIcon— circular arrow affordance inside the CTA
  • nbSticker— overflowing star decoration with a smiling face

Layout breakdown

How it is composed
nbSurfaceOuter card shell — cream tone, xl radius, hard shadow, and clip.
nbSplitTwo-column layout: portrait frame on the left, identity stack on the right. Also used in the footer for socials vs CTA.
nbStackVertical rhythm for name, role label, and skill/bio content.
nbClusterWrapping row for social icon buttons.
nbSectionPadded skill/bio region and divided footer region.
nbMediaFramePink portrait frame with object-fit cover ratio.
nbDisplayLarge uppercase name heading.
nbChipOpen-to-work status badge and skill tags.
nbButtonView Profile primary call to action.
nbStickerOverflowing star decoration with a smiling face.