Sections
Text and audio block
View in FigmaText-and-audio section — a text tile paired with an audio tile, positioned right or below.
Install
npx shadcn@latest add @alix/textAndAudioBlockPreview
Turnaround briefing
A short audio brief on the first decisions that stabilize a complex situation.
0:000:00
Usage
import TextAndAudioBlock, { type TextAndAudioProps } from "@/components/textAndAudioBlock";
const fromCMS: TextAndAudioProps = await getBlock("turnaround-audio");
<TextAndAudioBlock {...fromCMS} />
<TextAndAudioBlock
mediaPosition="right"
minHeight="md"
media={{
audio: { src: "/audio/turnaround-briefing.mp3", label: "Turnaround briefing" },
showIcon: true,
}}
textTile={{
bgColor: "primary",
sectionTitle: {
title: "Turnaround briefing",
description: "A short audio brief on stabilizing a complex situation.",
align: "start",
},
buttonGroup: {
primaryAction: {
children: "Read transcript",
rightIcon: <ArrowRight />,
render: <a href="/insights/turnaround-briefing" />,
},
},
}}
/>Examples
01
Stacked below the text
Set mediaPosition to bottom and the player runs full-width under the tile — the icon stage drops so the band stays shallow; shown here on a sand surface.
Quarterly outlook
Twelve minutes on the decisions shaping the quarter ahead for management teams.
0:000:00
<TextAndAudioBlock
mediaPosition="bottom"
minHeight="none"
media={{ audio: { src: "/audio/quarterly-outlook.mp3", label: "Quarterly outlook" } }}
textTile={{
bgColor: "sand",
sectionTitle: {
title: "Quarterly outlook",
description: "Twelve minutes on the decisions shaping the quarter ahead.",
align: "start",
},
buttonGroup: {
primaryAction: {
children: "Read transcript",
rightIcon: <ArrowRight />,
render: <a href="/insights/quarterly-outlook" />,
},
},
}}
/>02
A large-statement lead-in
The text column can be a single statement — the section title's largeText variant on a grey-gradient surface introduces the recording as a pull quote.
The clearest read on a business comes from the people running it day to day.
0:000:00
<TextAndAudioBlock
mediaPosition="right"
minHeight="md"
media={{ audio: { src: "/audio/field-notes.mp3", label: "Field notes" }, showIcon: true }}
textTile={{
bgColor: "greyGradient",
sectionTitle: {
variant: "largeText",
description: "The clearest read on a business comes from the people running it day to day.",
align: "start",
},
buttonGroup: {},
}}
/>When to use it
Use it for
- A section pairing a spoken briefing or podcast episode with its introductory copy and a transcript link.
- Two layouts from one prop: right for a two-column tile pairing, bottom for a shallow full-width band.
- CMS-fed audio — a src and label spread straight in as flat AudioTile data.
Reach for something else
- A bare recording with no surrounding copy — use AudioTile, or AudioPlayer for just the transport.
- An image or video alongside the text — use TextAndMediaBlock.
- Custom player controls, chapters, or richer metadata — compose Grid, TextTileDefault, and your own tile.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mediaPosition | "right" | "bottom" | — | Layout discriminant. `right` renders text beside AudioTile; `bottom` stacks audio below and hides the tile icon. |
| media | { audio: { src: string; label?: string }; showIcon?: boolean } | — | Serializable AudioTile data. |
| textTile.sectionTitle | SectionTitleProps | — | The tile's content — title, description, align, or the largeText variant for one bold statement. |
| textTile.bgColor | "default" | "transparent" | "primary" | "secondary" | "sand" | "greyGradient" | "goldGradient" | — | Surface treatment for the text tile. |
| textTile.buttonGroup | { primaryAction?; secondaryAction? } | — | Up to two actions as Button props minus `variant` — the tile maps the variant to its surface. Use `render: <a href />` for a link-shaped action. |
| minHeight | "none" | "md" | "lg" | "xl" | "2xl" | "lg" | Minimum section height from the shared scale. |
| escape hatch | compose lower layer | — | For transcripts, custom player controls, or richer audio metadata, compose Grid, TextTileDefault, and AudioTile directly. |