Text

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!

Sphinx of black quartz, judge my vow!

Sphinx of black quartz, judge my vow!

Sphinx of black quartz, judge my vow!

Sphinx of black quartz, judge my vow!
Sphinx of black quartz, judge my vow!
<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>

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.

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>

List Elements

We most frequently use lists for semantic structure and don’t actually want to display them as lists. It’s simpler to reset lists globally and only display them as lists in text when needed with the .mzp-u-list-styled class.

  1. List item
  2. List item
    1. Nested list
  • List item
  • List item
    • Nested list
<ol class="mzp-u-list-styled">
  <li>List item</li>
  <li>List item
    <ol class="mzp-u-list-styled">
      <li>Nested list</li>
    </ol>
  </li>
</ol>

<ul class="mzp-u-list-styled">
  <li>List item</li>
  <li>List item
    <ul class="mzp-u-list-styled">
      <li>Nested list</li>
    </ul>
  </li>
</ul>

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.

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.

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

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