Shaded Box Container

The Shaded Box Container component is a versatile page element that provides a background color and/or borders around other components. The primary purpose of the Shaded Box container is to create a clearly defined content area on a page, as well as help draw the user's attention to the particular piece of content. 

Example

Various components can be placed within the Shaded Box Container 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

Use Cases

WLAN Solutions

Zebra's Azara Cloud-Based Networking offers freedom from the unpredictibility of providing connectivity.

Connect to the Future

Zebra PartnerConnect opens a broad portfolio of award-winning products and services to our channel partners.

Healthcare Solutions

Explore how Zebra helps to improve patient safety, streamline clinical workflows and enhance hospital efficiency.

VISION REPORT: WHAT AREN'T YOU SEEING?

At Zebra, we empower you with Visibility That’s Visionary. We provide more visible environments that give you the big picture to make smart, informed and real-time decisions – improving productivity, connectivity and customer experience.

Learn how to gain insights through visibility to grow and sustain your business. What aren’t you seeing?

DOWNLOAD VISION REPORT

Discover Your Opportunity

See how the next generation of workforce mobility can help you transform your business. Get the detail on how it cn increase efficiency, productivity and accuracy.

Read More

 

Assess Your Business

Take a workforce mobility assessment to understand what you can improve and the impact of those improvements.

 

 

Read More



Authoring, Requirements and Specifications

Background Color

  • Options
    • Extra Light Gray
    • Light Gray
    • Gray
    • Black
    • White


Border Color

  • Options
    • Extra Light Gray
    • Light Gray
    • Gray
    • Black
    • White


Borders

  • Options: A selection must be made for the borders to appear
    • Top
    • Bottom
    • Left
    • Right


Authoring Notes

  • Background Color Selection: Must be different from the underlying page color unless a border is used
    • Example: using the White Background color with top and bottom borders is a simple way to contain content between two horizontal rules with equal top and bottom padding
  • Contents: Most components can be placed within the Shaded Box Container to meet the needs of the content to be displayed within the container
    • The height of multiple Shaded Box Containers in a row within a Column Control will all be the same and is determined by the tallest one


Similar Components

  • The Shaded Box Area is only used on the Product Detail Template because of its pre-defined structure which limits its usage.