Heading Elements

A heading acts as a title for the content that immediately follows it. We've declared default sizes for headings in keeping with their standard ranking but this base size can be overridden with more context-specific styling.

Sphinx of black quartz, judge my vow!

H1 with a utility class to make it an extra-small title

H6 with a utility class to make it a medium title

<h1>Sphinx of black quartz, judge my vow!</h1>
<h2>Sphinx of black quartz, judge my vow!</h2>
<h3>Sphinx of black quartz, judge my vow!</h3>
<h4>Sphinx of black quartz, judge my vow!</h4>
<h5>Sphinx of black quartz, judge my vow!</h5>
<h6>Sphinx of black quartz, judge my vow!</h6>

<h1 class="mzp-u-title-xs">H1 with a utility class to make it an extra-small title</h1>
<h6 class="mzp-u-title-md">H6 with a utility class to make it a medium title</h6>

No-nos

Avoid breaking rank just for font sizing. The next heading after an h1 should be an h2 even if that h2 is much smaller. Use HTML for meaning and CSS for styling. You can make that h2 whatever size you need.
Avoid "stacking" headings without any body content in between, eg. an h2 immediately following an h1. If you need a subheading or tagline immediately after a title, chances are it should be a paragraph rather than a second heading.
There are presentational utility classes available that you can apply to any heading, e.g. mzp-u-title-sm, but don't abuse them. Use the equivalent mixins in Sass/SCSS.

Paragraphs

You know what a parapgraph is. Here's an example of paragraphs with a heading.

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.

<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>

Data tables

Tables have no base styling (apart from the browser defaults). Use the .mzp-u-data-table class to display tabular data with a bit more polish.

MDN

Table caption
	Column	Column	Column
Row	Cell	Cell	Cell
Row	Cell	Cell	Cell

<table class="mzp-u-data-table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Column</th>
      <th scope="col">Column</th>
      <th scope="col">Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">Row</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

Quote Elements

A pull quote is an excerpt that has been pulled from a body of text used to highlight a key topic. A blockquote is a quotation that is set off from the main text typically used for long quotations.

MDN <blockquote>

"A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets."
A. Nonymous

<blockquote>
  <p>
    "A peep at some distant orb has power to raise and
    purify our thoughts like a strain of sacred music, or a
    noble picture, or a passage from the grander poets."
  </p>
  <cite>A. Nonymous</cite>
</blockquote>