Guide to classes and styles used in MDN content

MDN has many built-in global styles available for use when styling and laying out articles, and this article is a guide to the available classes and when to use them.

Please keep in that these styles have been developed to cover the most common situations that arise while styling article content, and that whenever possible, you should try to use the available classes; diverging too much from the standard content look-and-feel isn't good for consistency and readability. If you feel that your page absolutely requires some kind of special custom styling, you should talk to us about it.

Inline styles

This section lists the inline styles available for style content blocks on MDN.

.hidden

Allows you to hide content in the final rendered view. Typically this is used to provide HTML, CSS, and JavaScript to the script that creates the live code samples while only displaying the relevant language to the reader.

Example syntax

<h4 id="Hidden_Code_Sample">Hidden code Sample</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html;">
&lt;button id="test"&gt; Click me &lt;/button&gt;

<h5 id="CSS">CSS</h5>

<pre class="brush: css;">
button {
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}
</pre>
</div>

<h5 id="JavaScript_Content">JavaScript Content</h5>

<pre class="brush: js;">
document.getElementById("test").addEventListener("click", works);
function works() {
    window.alert("you clicked it!");
}
</pre>

<p>{{EmbedLiveSample("Hidden_Code_Sample")}}</p>

Hidden code sample

JavaScript
document.getElementById("test").addEventListener("click", works);
function works(){
    window.alert("you clicked it!");
}

.seoSummary

This is a class that has no visible effect on content on the page, however, if the class is applied to an element (usually a <span>) KumaScript will use the element's content to create description <meta> tags. These provide a short description to be used in search engines and sharing sites like Facebook and Twitter.

Note

If .seoSummary is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary.

The below example is taken from the Mozilla Add-ons page.

Example syntax

<span class="seoSummary">
  Add-ons allow developers to extend and modify the functionality of Firefox.
</span>

Example of the generated <meta> element

<meta name="description"
      content="Add-ons allow developers to extend and modify the functionality of Firefox.">

Block level styles

This section lists the block-level styles available for style content blocks on MDN.

Code syntax highlighting

To create a code example block on MDN, you wrap it in a <pre> element:

<pre>p {
  color: red;
  /* This is my code example */
}</pre>
This gives you the following output:
p {
  color: red;
  /* This is my code example */
}

If you want to use syntax highlighting on your code example, you need to include a class attribute containing a value of brush: highlight-type, where highlight-type can be one of:

  • bash
  • cpp (for C/C++)
  • css
  • html
  • java
  • js (for JavaScript)
  • json
  • php
  • python
  • sql
  • xml
  • wasm (for WebAssembly text format)

For example, to provide CSS highlighting, you'd do this:

<pre class="brush: css">p {
  color: red;
  /* This is my code example */
}</pre>
Which gives you the following output:
p {
  color: red;
  /* This is my code example */
}

If no appropriate language is available, just use no brush value, or brush: plain, to get code without syntax highlighting.

details

A <details> element can be wrapped around a block of content to hide that content and instead display a "▶︎ Details" link that can be clicked to expand/collapse the content contained within.

Example syntax

This is an example syntax section for <details> that was hidden with <details>. Ooooooh, how meta.

<details>
    <summary>
<h4>Example syntax</h4>
    </summary>
<p>This is an example syntax section for <code>.detail</code> that was hidden with <code>.detail</code>. Ooooooh, how meta.</p>
</details>

Note

You can include an open attribute on the <details> element to make it opened by default.

.example-bad and .example-good

Good and bad examples can be highlighted using the .example-good and .example-bad classes. These are usually used on <pre> blocks denoting sample code snippets, but can also be used on other blocks.

Good code example
<label for="test">Form label:</label>
<input type="text" id="test">
Bad code example
<input type="text">

You should use headings with these classes, as shown below — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)

Example syntax

<h5 id="Good_code_example">Good code example</h5>

<pre class="brush: html example-good">
  &lt;label for="test"&gt;Form label:&lt;/label&gt;
  &lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Bad code example</h5>

<pre class="brush: html example-bad">
  &lt;input type="text"&gt;
</pre>

.note.notecard

Turns a section of content into a note box, which is normally a useful note that tangentially relates to the current subject but doesn't directly fit into the flow of information.

Note

This is how we usually present a note in an MDN article.

We've used an <h4> for the heading in this example, but you should choose the level of heading that makes sense for your note's position in the document hierarchy — <h2>, <h3>, or <h4>.

Example syntax

<div class="notecard note">
  <h4>Note</h4>
  <p>This is how we usually present a note in an MDN article.</p>
</div>

.notecard.warning

Turns a section of content into a warning box, which normally communicates a vital fact that the reader needs to be really careful about (e.g., they need to do something, or avoid something to avoid serious issues.)

Warning

Here be dragons!

We've used an <h4> for the heading in this example, but you should choose the level of heading that makes sense for your note's position in the document hierarchy — <h2>, <h3>, or <h4>.

Example syntax

<div class="notecard warning">
  <h4>Warning</h4>
  <p>Here be dragons!</p>
</div>

Table styles

MDN provides specific styles for presentation of HTML <table> elements. This section covers these.

No added classes:

Favorite teas, December 2015
Variety Caffeine Steeping Time Water Temperature
Black High 2-3 minutes 99 °C
Green Low to Medium 1-2 minutes 75 to 80 °C
Caffeine free
Herbal None 3-6 minutes 99 °C

.standard-table

Favorite teas, December 2015
Variety Caffeine Steeping Time Water Temperature
Black High 2-3 minutes 99 °C
Green Low to Medium 1-2 minutes 75 to 80 °C
Caffeine free
Herbal None 3-6 minutes 99 °C

Style notes

  • Note the different styling applied to the headers (<th>), and the fact that they have scope attributes applied for accessibility purposes.

Example syntax

<table class="standard-table">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
 </tbody>
</table>