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:
A dark theme is also available using the theme class
<h3>We’re building a better Internet</h3>
<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>