Recipe
Podcast Card
A loud podcast episode card composing surface, display, chip, media item, icon, and button primitives into a reusable audio-content layout. Demonstrates that the same primitive building blocks compose across media types — travel, jobs, and now audio.
Preview
Build Loud FM EP 42
DESIGN
SYSTEMS
THAT SCALE
Practical strategies for building design systems that grow with your product.
Kai NguyenHost
On Air
Code
Structural template. See the example source for the full implementation.
Imports
import {
NbButton,
NbButtonTrailingIcon,
NbChip,
NbCluster,
NbDisplay,
NbHalftone,
NbIcon,
NbIconButton,
NbSection,
NbStack,
NbStatusDot,
NbSticker,
NbStickerFace,
NbSurface,
NbText,
} from '@ng-brutalism/ui';Composition skeleton
<article nbSurface>
<header nbSection>
<div nbCluster>
...
</div>
</header>
<section nbSection>
<div nbStack>
...
</div>
</section>
<section nbSection divider="top">
<div nbCluster>
...
</div>
</section>
<footer nbSection>
<div nbCluster>
...
</div>
</footer>
</article>Click 'Show more' to view additional details.
Template
<div nbCluster justify="center" padding="lg" class="podcast-stage">
<div nbSurface clip tone="cream" border="strong" shadow="hard" radius="xl">
<!-- Header: podcast chip + menu -->
<div nbSection padding="lg">
<div nbCluster gap="md" align="center" justify="between">
<span nbChip tone="pink" radius="md" class="uppercase font-bold">
<span nbIcon src="/podcast-card/microphone.svg" decorative></span>
Podcast
</span>
<button aria-label="Episode menu">•••</button>
</div>
</div>
<!-- Brand row -->
<div nbSection padding="lg">
<div nbCluster gap="md" align="center">
<img src="/podcast-card/bfm-logo.png" alt="Build Loud FM logo" />
<span nbText weight="extrabold">Build Loud FM</span>
</div>
</div>
<!-- Episode badge -->
<div nbSection padding="lg">
<span nbChip tone="yellow" radius="md" class="uppercase font-bold">
EP 42
</span>
</div>
<!-- Hero title -->
<div nbSection padding="lg">
<h1 nbDisplay class="uppercase">
Design<br />Systems<br />That Scale
</h1>
</div>
<!-- Metadata chips -->
<div nbSection padding="lg">
<div nbChipGroup gap="sm" radius="sm" shadow="none" transform="uppercase">
<span nbChip tone="mint" class="text-xs">
<span nbIcon src="/podcast-card/clock.svg" decorative></span>
45 MIN
</span>
<span nbChip tone="lavender" class="text-xs">
<span nbIcon src="/podcast-card/sparkle.svg" decorative></span>
NEW
</span>
<span nbChip tone="pink" class="text-xs">
<span nbIcon src="/podcast-card/user.svg" decorative></span>
UX
</span>
</div>
</div>
<!-- Description -->
<div nbSection padding="lg">
<p nbText size="md" weight="medium" tone="muted">
Practical strategies for building design systems that grow with your product.
</p>
</div>
<!-- Host section -->
<div nbSection divider="top" padding="lg">
<div nbCluster gap="lg" align="center">
<img src="/podcast-card/avatar.png" alt="Kai Nguyen"
class="w-16 h-16 rounded-full" />
<div nbStack gap="xs">
<span nbText size="lg" weight="bold">Kai Nguyen</span>
<span nbText size="sm" tone="muted">Host</span>
<span class="flex items-center gap-1.5">
<span nbStatusDot state="online"></span>
<span nbText size="xs" weight="bold" class="uppercase">On Air</span>
</span>
</div>
</div>
<div nbHalftone shape="rectangle" [rows]="3" [columns]="13"
[size]="8" [gapX]="28" [gapY]="27"
class="absolute left-6 top-6 -z-10"></div>
</div>
<!-- Audio player (waveform asset) -->
<div nbSection padding="lg">
<img src="/podcast-card/timeline.png" alt="Episode player" class="w-full" />
</div>
<!-- Footer actions -->
<div nbSection padding="lg">
<div nbCluster gap="md" justify="between">
<button nbButton tone="lavender" size="xl" radius="md" class="flex-1">
<span nbText size="3xl" weight="black" transform="uppercase" tracking="wide">
Listen Now
</span>
<span nbButtonTrailingIcon shape="circle" tone="inverse" size="md"
icon="/podcast-card/arrow.svg"></span>
</button>
<button nbIconButton shape="square" size="xl" radius="md" tone="background"
icon="/podcast-card/bookmark.svg" aria-label="Save episode"></button>
</div>
</div>
<!-- Overflowing decorations -->
<nb-sticker shape="star" tone="lavender" [rotate]="10">
<nb-sticker-face />
</nb-sticker>
<nb-sticker shape="splat" tone="pink" decorative [rotate]="-12"></nb-sticker>
</div>
</div>Click 'Show more' to view additional details.
Primitives used
- nbSurface— bordered card shell and audio player panels
- nbStack— vertical rhythm for metadata and host sections
- nbCluster— inline metadata chips and host identity row
- nbSection— padded content regions with borders
- nbDisplay— episode title mega heading
- nbText— description, host name, role, and status copy
- nbChip— podcast badge, episode number, and metadata tags
- nbStatusDot— live "on air" indicator next to the host
- nbIcon— microphone, clock, sparkle, user, bookmark, and arrow icons
- nbButton— listen now call to action
- nbButtonTrailingIcon— CTA arrow affordance inside the button
- nbIconButton— bookmark / save episode action
- nbSticker— overflowing star and splat decorations
- nbStickerFace— smiling face inside the star sticker
- nbHalftone— dotted halftone flourish in the host row
Layout breakdown
How it is composed
nbSurfaceOuter card shell and inner audio player panel — cream tone, hard shadow, clip.nbSectionEach distinct content band (header, brand, episode badge, title, meta, host, player, footer) is a padded section. The host and footer sections use top dividers.nbStackVertical rhythm for host identity (name, role, on-air status).nbClusterInline metadata chips, host identity row, and footer action row.nbDisplayEpisode title mega heading.nbChipPodcast badge, episode number, and metadata tags (duration, new, category).nbButtonListen Now primary call to action.nbStickerOverflowing star and splat decorative elements.nbHalftoneDotted halftone flourish behind the host row.