HP.com Design System HP.com Design System

Resolution Module

The Resolution Module component allows a user to compare the resolution of products side by side and view details about specific areas of interest.

Understanding resolution

The higher the resolution, the more pixels, and that means more crisp, detailed images. It also means you can have more content on screen, because you can reduce the size of the content and still see all the detail. Check out our iguana below to compare.

    4K

    The Ultimate Experience

    Get more content on your screen with four times higher resolution than FHD. You’ll get extremely crisp detail even with content at smaller sizes, making this perfect for creative design work and complex graphs, spreadsheets and CAD drawings.

    Pixels

    Learn

    Image Detail

    Learn

    Viewable Content

    Learn
    QHD (QUAD HD)

    Outstanding Detail

    Quad HD is the sweet spot for most users and is perfect if you want to see more detail than FHD for editing photos and videos or gaming.

    Pixels

    Learn

    Image Detail

    Learn

    Viewable Content

    Learn
    FHD (FULL HD)
    Everyday Excellence

    The most popular resolution, this is ideally suited for everyday office work, homework and watching videos.

    Pixels

    Learn

    Image Detail

    Learn

    Viewable Content

    Learn

    4K Pixels

    3840 x 2160 means you get 8,294,400 pixels of detail on screen.

    4K Image Detail

    With four times the resolution of Full HD, 4K provides the ultimate viewing experience with the highest levels of sharpness, detail, and clarity. 

    4K Viewable Content

    4K allows you to see your content in incredible detail, even at smaller sizes, because of the pixel density. Compared to FHD, 4K allows you to see 30 extra columns of a spreadsheet in the same space with the same clarity. You can see 300% more of an image, and you can fit more apps on screen without losing clarity. 

    QHD Pixels

    2560 x 1440 means you get 3,686,400 pixels of detail on screen.

    QHD Image Detail

    With twice as many pixels as FHD, QHD delivers a more detailed and realistic viewing experience. 

    QHD Viewable Content

    QHD allows you to see more content on screen than FHD because it provides more pixel detail. You can make your apps smaller on screen and still have the clarity you need. This allows more apps on screen, 15 more excel columns, and more multitasking.

    FHD Pixels

    1920x1080 means you get 2,073,600 pixels of detail on screen.

    FHD Image Detail

    FHD has become the baseline for image quality. Ideal for everyday projects, image details are sharp and clear. 

    FHD Viewable Content

    The higher the resolution, the more content you can see on your screen. With more pixels, you can make your content smaller in size and still see with the clarity you need. With FHD, you get enough resolution to comfortably see multiple apps on screen for multitasking.

    Usage

    The Resolution Module component allows a user to compare the resolution of products side by side and view details about specific areas of interest.

    Module specifications

    • Minimum of 2 items, maximum of 8
    • Minimum of 1 Model Stats, maximum of 3
    • Background color configurable

    Character counts (with spaces)

    • Module headline - 50 max characters
    • Module body copy - 300 max characters
    • Card headline - 30 max characters
    • Card body copy - 250 max characters
    • Modal headline - 50 recommended character count
    • Modal body copy - 300 recommended character count

    Example layouts

    The Resolution Module component allows a user to compare the resolution of  products side by side and view details about specific areas of interest.

    Desktop with specs layout

    Desktop with menu dropdown

    Desktop view with modal window

    Tablet Variation

    Mobile Variation

    Resources

    Reference

    For Zeplin access contact the UX Design Manager

    Download