Content blocks

Content Blocks are predefined text-boxes and text-formats used to display various types of information in a standardized way on MDN. 

This page lists some content block examples, along with the CSS style-class used to invoke them -- and for reference ONLY, their last-known line-number location in the MDN website main stylesheet-files.


Allows to have a couple of cards next to each other to call out specific contents or can be used for a call to action.

CSS class: .card-grid  (Ref L 751 - 824 in CustomCSS).

  • CSS Reference

    An exhaustive reference for seasoned Web developers describing every property and concept of CSS.

  • CSS Tutorial

    A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.

  • CSS3 Demos

    A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

Two columns

Two columns seperated with a thick grey border. Often used on landing pages.

CSS class: .topicpage-table  (Ref L 830 - 837 & 82-93 in CustomCSS).

Column 1
Column 2


Equal column heights

Used on the Firefox OS landing page to wrap columns that should all be the same height.

CSS class .equalColumnHeights  (Ref L 25 - 38 in CustomCSS).

Some text
And a new line
Some more text



Document Tags and Contributors

Contributors to this page: Sheppy, fscholz, pcat
Last updated by: pcat,
Hide Sidebar