HP.com Design System HP.com Design System HP.com Design System

Audio player

Embeds audio from an external source so that the user doesn’t have to leave HP.com

Usage

Use the player on its own for a simple experience, or add supporting visuals to increase its hierarchy on the page.

Module specifications

Theme is configurable
Image or color background is optional
Text color is configurable
Podcast pre-title and description are optional
Podcast title and description fonts are configurable
CTA is optional
Max of 1 CTA

Character counts (with spaces)

This is one of the few components that does not have a character limit, however we do ask that marketing use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts

Dark theme with gradient color background, with pre-title and description

Transparent theme with background image, with description

Light theme without background type, with description

White theme in 3 column control, no background types

Tablet

Mobile

Resources

For Zeplin access contact the UX Design Manager

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.