Videos are a great way to present information a customer
can use to make decisions, learn more about a subject, and 
engage with our brand. Use this guide to ensure a quality 
video presentation every time.

Resources

Video component usage

The Video component is used to display actionable video thumbnails and video links within a page. The actual video player is a standalone component available through our proprietary interface called HUI (Harmony User Interface). Use the Video component to:

Display brand-approved video content within the customer E2E

Use a video link to create a lightweight option to include video

Use the video thumbnail as a more visual way of delighting customers
and increase engagement

When not to use it

When embedding video content within a page

To display off-brand or inappropriate video content

Do not use the video thumbnail version if a thumbnail image asset is
not available (via design partner)

Appearance and behavior

All video links have a title, play icon, and timestamp with units. Users select one of the links to launch the video player.

Anatomy of a video thumbnail

 

 

 

Play icon

Adds a visual cue to customers (optional, but recommended).

 

 

White gradient overlay

Used to make high contrast images more subtle (optional).

 

 

Stroke and drop shadow

Adds more visual prominence and includes a hover effect (optional).

Play icon sizes

Small: 60px X 60px
Medium: 60px X 60px
Large: 80px X 80px
X-Large: 100px X 100px
XX-Large: 120px X 120px

Gradient overlay


Default
Color: #FFFFFF
Opacity: 20% (0.2)


On hover
Color: #FFFFFF
Opacity: 40% (0.4)

Stroke and shadow specs


Stroke
Border: Solid 2px #FFFFFF
Border-radius: 2px


Drop shadow
Box-shadow: 0 4px 8px 0 rgba(0,0,0,0,0.10);


Drop shadow (hover)
Box-shadow: 0 8px 16px 0 rgba(0,0,0,0,0.15);

Motion and animation

The Video component has some subtle animations that are displayed on hover of the video thumbnail.

motion prototype

Image asset creation guidelines

Video thumbnails image assets should be created with the following guidelines:

  1. Use an optimized JPG for full color images OR use an optimized PNG for product UI-type image assets
  2. There is no need to round the corners, add drop shadows, add an overlay, or play icon when using this component; those attributes are applied by the component
  3. Image asset sizes should match the thumbnail sizes below

EXAMPLE (COMPONENT IN USE)

 

 

 

 

 

 

 

 

 

EXAMPLE (ASSET)

 

 

 

 

 

 

 

 

 

Content guidelines

Video links should follow the content guidelines below.

Link

Keep links titles brief, usually two to three words. If a video is less than 60 seconds add a “0:” immediately before the seconds. Example: Create invoice (0:59) or How it works (0:45).

Voice and tone

Recommended voice and tone principals: Keep it simple. Use everyday language. We understand users’ goals and give them just what they need to move forward.

Video thumbnail sizes

Below are examples of video thumbnail sizes. All thumbnails align to established QuickBooks Design System grid columns. Use images that are 16:9 aspect ratio and include a link with video description and duration.

Small (268px X 152px)

For use when the smallest video is needed.

Medium (364px X 206px)

For use when the medium size video is needed.

Large (556px X 314px)

For use when the large size video is needed.

X-Large (746px X 420px)

For use when the x-large size video is needed.

XX-Large (1132px X 640px)

For use when the largest size video is needed.

Video link styles

Video links are hyperlinked text and can be standalone or used in conjunction with a video thumbnail (see above). When clicked, a video player modal will launch and overlay the page.

 

  • Was this Helpful?
  •