Emphasis Box full view

The Emphasis Box is a visual wrapper used around some CTAs and forms in both marketing and application contexts. It’s defined by a contrasting background, large border radius (rounded corners) and drop shadow which provides visual separation from the rest of the page and draws the user’s attention to its contents.

The Emphasis Box is a block-level layout component. Due to its rounded corners and drop shadow, it should fit within the defined width of your application or website (as opposed to being edge-to-edge within a browser window).

Within an Emphasis Box you have a great deal of layout freedom. In general, consider using either a single column of left-aligned or center-aligned text for narrow boxes, or flexing your content so that text appears in two columns in wider boxes (perhaps with text on one side and an image on the other).

Use an emphasis box:

• When you need to frame a key form or interactive area on a page.
• When you need to call out one key CTA among several on a page.

A dark theme is also available using the theme class mzp-t-dark.

Tips

• In smaller, responsive views, make sure your layout accommodates some margins around the emphasis box.
• Try to limit text to around 70 characters per line. The emphasis box doesn’t have any internal layout of its own so you may need to limit its total width or add some other inner container.

No-nos

• Emphasis boxes should be used sparingly. In general, limit one per page. If you use two they should be far apart (e.g. one at the top and another at the bottom of a long page).
• Do not use Emphasis Boxes in a list or grid. If you want a group of boxes, use Cards.
• Do not let emphasis boxes collide with browser or device window edges. Ensure there is some outer margin to accommodate the shadow.
• The emphasis box shouldn’t be used for long-form content where a user would likely have to scroll to see the whole thing.