Basic Footer Layout Navigation Others
Components

Details (details)

Native details and summary support.

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at justo.

Heading

Proin in dapibus nulla. Nam vitae est vitae tellus mollis eleifend in eu erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean feugiat ante porttitor purus elementum, eget vestibulum ex volutpat. Sed gravida convallis rutrum. Quisque pharetra eros eget malesuada vulputate.

Sub Heading

Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.
<section class="mzp-c-details"> <h3>Summary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at justo.</p> <h3>Heading</h3> <p>Proin in dapibus nulla. Nam vitae est vitae tellus mollis eleifend in eu erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean feugiat ante porttitor purus elementum, eget vestibulum ex volutpat. Sed gravida convallis rutrum. Quisque pharetra eros eget malesuada vulputate.</p> <h4>Sub Heading</h4> <p>Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.</p> </section>

A page footer component, containing common links to complement primary navigation and flexible structure. It is best viewed with “full view” as it’s meant to take up the full width of the page.

To use only in a menu component.

Card layout (card_layout)

A layout class for displaying card components in different arrangements.

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

<div class="mzp-l-card-hero"> <section class="mzp-c-card-large mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> </div> <div class="mzp-l-card-half"> <section class="mzp-c-card-large mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> </div> <div class="mzp-l-card-third"> <section class="mzp-c-card-large mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> </div> <div class="mzp-l-card-quarter"> <section class="mzp-c-card-large mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> </div>

An expandable menu used in the Navigation organism, consisting of menu panels.

A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component.

An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule.

Main site Navigation, containing Menu and Secondary Download Button components.

Article (article)

A long-form body of text. This is typically multiple paragraphs, often with subheadings, and should be the primary content on the page.

We’re building a better Internet

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.
<article class="mzp-c-article"> <h1 class="mzp-c-article-title">We’re building a better Internet</h1> <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> </article>

Billboard (billboard)

A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens.

Example headline with 35 characters

A description with a maximum of 100 characters. That usually means only one or two sentences.

Learn more about us

Example headline with 35 characters

A description with a maximum of 100 characters. That usually means only one or two sentences.

Learn more about us
<div class="mzp-l-billboard-right mzp-c-billboard"> <div class="mzp-c-billboard-image-container"> <img class="mzp-c-billboard-image" src="https://data.dilla.io/protocol_1/assets/billboard-image.png" /></div> <div class="mzp-c-billboard-content"> <div class="mzp-c-billboard-content-container"> <div class="mzp-c-billboard-content-inner"> <h3 class="mzp-c-billboard-title">Example headline with 35 characters</h3> <p class="mzp-c-billboard-desc">A description with a maximum of 100 characters. That usually means only one or two sentences.</p> <a class="mzp-c-cta-link" href="#">Learn more about us</a> </div> </div> </div> </div> <div class="mzp-l-billboard-left mzp-c-billboard"> <div class="mzp-c-billboard-image-container"> <img class="mzp-c-billboard-image" src="https://data.dilla.io/protocol_1/assets/billboard-image.png" /></div> <div class="mzp-c-billboard-content"> <div class="mzp-c-billboard-content-container"> <div class="mzp-c-billboard-content-inner"> <h3 class="mzp-c-billboard-title">Example headline with 35 characters</h3> <p class="mzp-c-billboard-desc">A description with a maximum of 100 characters. That usually means only one or two sentences.</p> <a class="mzp-c-cta-link" href="#">Learn more about us</a> </div> </div> </div> </div>

A type of navigation menu used to provide a list of links based on current page within the site hierarchy, allowing users to visit previous pages from the current page.

Button (button)

For actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Submit Submit Submit Submit Submit Submit Submit Submit Submit
<a class="mzp-t-primary mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-primary mzp-t-dark mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-secondary mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-secondary mzp-t-dark mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-product mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-product mzp-t-secondary mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-product mzp-t-secondary mzp-t-dark mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-neutral mzp-t- mzp-c-button" href="http://example.com">Submit</a> <a class="mzp-t-neutral mzp-t-dark mzp-t- mzp-c-button" href="http://example.com">Submit</a>

Call out (call_out)

A vertical call out section containing a logo, headline, description and a call-to-action button.

Example headline with 35 characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Download Firefox Firefox Privacy Notice

Example headline with 35 characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Download Firefox Firefox Privacy Notice
<section class="mzp-c-call-out"> <div class="mzp-l-content "> <h3 class="mzp-c-call-out-title">Example headline with 35 characters</h3> <p class="mzp-c-call-out-desc"> <p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p></p> <span class="mzp-t-product mzp-t- mzp-c-button">Download Firefox</span> <span class="mzp-t- mzp-c-button">Firefox Privacy Notice</span> </div> </section> <section class="mzp-c-call-out-compact"> <div class="mzp-l-content "> <h3 class="mzp-c-call-out-title">Example headline with 35 characters</h3> <p class="mzp-c-call-out-desc"> <p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p></p> <span class="mzp-t-product mzp-t- mzp-c-button">Download Firefox</span> <span class="mzp-t- mzp-c-button">Firefox Privacy Notice</span> </div> </section>

Card (card)

A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link.

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

6 hours ago

A short inline text cta

<section class="mzp-c-card-extra-small mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card-medium mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section> <section class="mzp-c-card-large mzp-c-card"> <a class="mzp-c-card-block-link" href="#"> <div class="mzp-c-card-media-wrapper"> <img class="mzp-c-card-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC" /></div> <div class="mzp-c-card-content"> <div class="mzp-c-card-tag">Card tag</div> <h2 class="mzp-c-card-title">This example headline has 40 characters</h2> <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p> <p class="mzp-c-card-meta">6 hours ago</p> <p class="mzp-c-card-cta"> <span class="mzp-c-card-cta-text">A short inline text cta</span> </p> </div> </a> </section>

Emphasis box (emphasis_box)

A visual wrapper used around some CTAs and forms in both marketing and application contexts.

This is a standard Emphasis Box

This is some filler content. Cats are the best, every cat.
<section class="mzp-c-emphasis-box"> <h3>This is a standard Emphasis Box</h3> <p>This is some filler content. Cats are the best, every cat.</p> </section>

A sort title, when clicked, expands a list of links.

Newsletter (newsletter)

The standard newsletter subscription form. The standard newsletter subscription form.

<section class="mzp-c-newsletter"> <div class="mzp-c-newsletter-image"> <img src="https://data.dilla.io/protocol_1/assets/static/img/newsletter/newsletter-image.png" /></div> <div class="mzp-c-newsletter-form"> <header class="mzp-c-newsletter-header"> <h3 class="mzp-c-newsletter-title">Love the Web?</h3> <p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p> </header> <div class="mzp-c-newsletter-content"> <label>Your email address</label> <input placeholder="yourname@example.com" type="email" /> <p class="mzp-c-form-submit"><button type="submit" class="mzp-c-button">Sign up now</button><span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span></p></div> </div> </section>

Notification bar (notification_bar)

Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification.

<aside class="mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside> <aside class="mzp-t-success mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside> <aside class="mzp-t-warning mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside> <aside class="mzp-t-error mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside> <aside class="mzp-t-click mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside>

Picto (picto)

A small block of content featuring a pictographic icon, headline, and body.

A headline with 30 characters

A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.

A headline with 30 characters

A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.

A headline with 30 characters

A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.
<section class="mzp-c-picto"> <div class="mzp-c-picto-image"> <img src="https://data.dilla.io/protocol_1/assets/image.svg" width="64" /></div> <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3> <div class="mzp-c-picto-body"> <p>A short description, just a sentence or two. Don&#x27;t use this component for long-form content; it&#x27;s only for blurbs.</p></div> </section> <div class="mzp-t-picto-side"> <section class="mzp-c-picto"> <div class="mzp-c-picto-image"> <img src="https://data.dilla.io/protocol_1/assets/image.svg" width="64" /></div> <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3> <div class="mzp-c-picto-body"> <p>A short description, just a sentence or two. Don&#x27;t use this component for long-form content; it&#x27;s only for blurbs.</p></div> </section> </div> <div class="mzp-t-picto-center"> <section class="mzp-c-picto"> <div class="mzp-c-picto-image"> <img src="https://data.dilla.io/protocol_1/assets/image.svg" width="64" /></div> <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3> <div class="mzp-c-picto-body"> <p>A short description, just a sentence or two. Don&#x27;t use this component for long-form content; it&#x27;s only for blurbs.</p></div> </section> </div>

Section heading (section_heading)

Use section headings help organize your page content into sections.

We’re building a better Internet

<h2 class="mzp-c-section-heading"> We’re building a <strong>better</strong> Internet </h>

Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section.

Split (split)

A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It's highly customizable with a lot of optional classes to support different layout variations.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.
<section class="mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-reversed mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-body-wide mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-body-wide mzp-l-split-reversed mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-body-narrow mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-body-narrow mzp-l-split-reversed mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-pop-top mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-pop-top mzp-l-split-reversed mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-pop-bottom mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section> <section class="mzp-l-split-pop-bottom mzp-l-split-reversed mzp-c-split"> <div class="mzp-c-split-container"> <div class="mzp-c-split-body "> <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1> <p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p></div> <div class="mzp-c-split-media "> <img class="mzp-c-split-media-asset" src="https://data.dilla.io/protocol_1/assets/static/img/split/devices.png" /></div> </div> </section>

Video (video)

A responsive container for embedded video. The video is scaled to the width of its container and maintains its aspect ratio.

<div class="mzp-c-video"> <video controls="controls" height="360" poster="https://data.dilla.io/protocol_1/assets/static/img/video/video.jpg" src="https://protocol.mozilla.org/static/video/video.webm" width="640"></video> </div>