Patterns
Audio tile
View in FigmaAudio tile for a briefing or podcast module, fed by CMS-serializable audio data and boolean display flags.
Install
npx shadcn@latest add @alix/audioTilePreview
0:000:00
Usage
import AudioTile, { type AudioTileProps } from "@/components/audioTile";
const fromCMS: AudioTileProps = await getAudioTile("operational-resilience");
<AudioTile {...fromCMS} />
<AudioTile
audio={{
src: "/audio/operational-resilience-briefing.mp3",
label: "Operational resilience briefing",
}}
showIcon
/>Examples
01
Docked under a caption
Turn the icon mark off (showIcon={false}) when a text tile sits above the player, so the tall empty stage doesn't read as a mistake.
Operational resilience briefing
A 12-minute partner briefing on sequencing liquidity, controls, and communications under pressure.
0:000:00
<Grid columns={1} gap="none" className="mx-auto w-full max-w-md">
<TextTileDefault
bgColor="primary"
sectionTitle={{
title: "Operational resilience briefing",
description: "A 12-minute partner briefing on sequencing liquidity, controls, and communications under pressure.",
align: "start",
}}
buttonGroup={{}}
/>
<AudioTile
audio={{
src: "/audio/operational-resilience-briefing.mp3",
label: "Operational resilience briefing",
}}
showIcon={false}
/>
</Grid>02
Beside a written summary
In a two-column module the icon mark stays on, giving the recording a face next to the text tile that introduces it.
Quarterly portfolio review
Where value creation stalled, and the three operating moves the team is making this quarter.
0:000:00
<Grid columns={2} gap="none" className="mx-auto w-full max-w-3xl">
<TextTileDefault
bgColor="primary"
sectionTitle={{
title: "Quarterly portfolio review",
description: "Where value creation stalled, and the three operating moves the team is making this quarter.",
align: "start",
}}
buttonGroup={{ primaryAction: { children: "Read the transcript" } }}
/>
<AudioTile
audio={{
src: "/audio/quarterly-portfolio-review.mp3",
label: "Quarterly portfolio review",
}}
/>
</Grid>When to use it
Use it for
- Give a CMS-fed briefing or podcast recording a full tile face inside a media grid.
- Pair it with a text tile so a written summary sits beside or above the player.
- Drop the icon mark (showIcon={false}) when the tile docks under a caption in a bottom layout.
Reach for something else
- A bare inline player in running copy — use AudioPlayer directly instead.
- A full text-and-audio section from serializable CMS data — use TextAndAudioBlock instead.
- Transcript controls or custom metadata — compose AudioPlayer and Surface directly instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| audio | { src: string; label?: string } | — | Serializable AudioPlayer data. `src` is the audio URL; `label` names the player for assistive tech. |
| showIcon | boolean | true | Shows the centered audio icon above the player. The text-and-audio block turns this off in its bottom layout. |
| escape hatch | compose lower layer | — | For transcript controls, custom metadata, or player behavior, compose AudioPlayer and Surface directly. |