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:
- Use an optimized JPG for full color images OR use an optimized PNG for product UI-type image assets
- 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
- 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 (265px X 150px)
For use when the smallest video is needed.
Medium (360px X 204px)
For use when the medium size video is needed.
Large (550px X 310px)
For use when the large size video is needed.
X-Large (740px X 416px)
For use when the x-large size video is needed.
XX-Large (1120px X 634px)
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.
