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

Reference

For Zeplin access contact the UX Design Manager

Figma

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