Emphasis Box: Malachite | Reactive Graph

<section class="rg-emphasis-box malachite"> <h3>We’re building a better Application!</h3> <p class="intro">Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.</p> <p>Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.</p> <p>At Mozilla, we’re a global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p> </section>

<section class="rg-emphasis-box{{#if color}} {{color}}{{/if}}"> <h3>{{ title }}</h3> {{#if intro}}<p class="intro">{{intro}}</p>{{/if}} {{#each paragraphs}} <p>{{ this }}</p> {{/each}} {{ yield }} </section>

{ "title": "We’re building a better Application!", "intro": "Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.", "paragraphs": [ "Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.", "At Mozilla, we’re a global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future." ], "color": "malachite" }

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.