Page History

...

• Can only use up to 3 of these fields at a time:
  • Microtitle (optional)
    • Very short (30 characters or up to 4 words)
    • Displays a category/topic to give context
  • Heading/title (required)
    • Typically an h3 heading
  • Subtitle (optional)
    • Rarely used
  • Supporting content (optional)
    • No longer than 1 sentence, ~160 characters
    • Often used to highlight key people featured in the
    audio
    • clip
  • Link text (optional)
    • Use sparingly as it will distract users from the primary action for this block, which is to play the embedded audio clip
    • Typically used to link to the full podcast episode for the clip
• Audio clip (required)
  • MP3, WAV, or OGG file
• Transcript (required)
  • This is an accessibility requirement
  • Should be edited for clarity (remove stutters, repeated words, etc.)
  • Include speaker names if more than one person is featured in the clip. clip 
    • See AI Hub for Business for an example of this

...

42/58 layout (use most often)

This layout can be used anytime you need an image next to copy. 

Design Assets Needed

Image (recommended)

• One for each audio clip

• Use large, high-quality images that are 2400 x 1600px. Using a shorter image may break the layout by causing the card to extend below the image (see callout above).

  • You can try using taller images. Example: This news story from 2025 uses a custom-cropped photo that is 2400x2817px

Implementation

Block layout options 

Listed from smallest image to largestTo use this layout, choose 58% for Image column width field, under Configuration.

50/50 layout (default; use often)

...

• Use this layout when the image is not as important or does not have small details that are important to see.
• This is the default layout of the block.

42/58 layout (use most often)

• Use for most cases.
• To use this layout, choose 58% for Image column width field, under Configuration.

33/66 layout (use sparingly)

• Only use this layout when you have a very small amount of copy (< 250 characters total).
• To use this layout, choose 66% for Image column width field, under Configuration.

Card-level Fields

Additional fields are listed under editorial guidelines above.

Audio (required for each card)

Upload or use an audio file from the media library. Only MP3, WAV, and OGG files are supported.

Title

The card title. 

Heading Size

You can select H2 - H4 heading sizes.

Subtitle

The card subtitle. 

Image

Use large, high-quality images that are 2400 x 1600px. Using a shorter image may break the layout by causing the card to extend below the image (see callout above).

• You can try using taller images. Example: This news story from 2025 uses a custom-cropped photo that is 2400x2817px

Micro title

The card micro title. 

Content

The supporting copy. This should not be more than 1 sentencefit on 3 lines (~160 characters). Make sure the amount of copy in the card looks good. If not, cut some of it or ask a writer to cut some of it.

Transcript (required)

The audio transcript. Required for accessibility. Causes a "Show transcript" link to appear at base of the card.

Link (use sparingly)

The URL. Use sparingly as it will distract users from the primary action for this block, which is to play the audio snippet.

CTA Styles

You can pick text link or different CTA styles a CTA style for the link.

Block-level Fields

Image Column Width

Default is 50%. Can also choose 58% or 66% for image width. See details above

Enable Swiper

If you have multiple cards in one block, you can choose between using a swiper or stacking the cards on the page.

...

Resources

• Figma mockup (coming soon)

Future dev updates for this block

1. Consider adding keyboard arrow controls for swiper slides, as long as it doesn't interfere with arrow actions for the audio controls (e.g. scrubbing and volume control).
2. When the swiper slide is changed, set focus on first focusable element in the now active slide (Erica tried to do this when creating the block, but it created other problems with the swiper code)Crosscheck onKeyDown keycodes with vertical tabbed block code, since we used a different, newer way of checking which key was pressed.