materialize material-design grid components classes reference

Materialize reference

Materialize CSS logo

This reference covers Materialize CSS classes and components available in Site Designer projects that use the Materialize framework. Materialize implements Google’s Material Design specification — expect elevation shadows, ripple effects, and a specific visual language. For the full API, see the official Materialize docs.

Grid system

Materialize uses a float-based 12-column grid (not Flexbox like Foundation or Bootstrap 4).

Class	Purpose
`container`	Fixed-width centered wrapper
`row`	Grid row; use inside `container`
`col s12`	Full width on small (all) screens
`col s12 m6`	Half width on medium (≥601 px) screens
`col s12 m6 l4`	One-third width on large (≥993 px) screens
`offset-m3`	Offset 3 columns on medium screens
`push-l2`	Push column right by 2 on large screens
`pull-l2`	Pull column left by 2 on large screens

Breakpoints: s = 0–600 px, m = 601–992 px, l = 993–1200 px, xl = 1201 px+.

Components

Card

<div class="card">
  <div class="card-image">
    <img src="…" alt="…">
    <span class="card-title">Card title</span>
  </div>
  <div class="card-content"><p>Card body text.</p></div>
  <div class="card-action"><a href="#">Action</a></div>
</div>

For a horizontal card: add class horizontal to the card div.

<div id="myModal" class="modal">
  <div class="modal-content">
    <h4>Modal title</h4>
    <p>Modal body content.</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect btn-flat">Close</a>
  </div>
</div>
<a class="waves-effect waves-light btn modal-trigger" href="#myModal">Open</a>

Modal requires JavaScript initialization: M.Modal.init(document.querySelectorAll('.modal'));

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Brand</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</nav>

Sidenav (mobile drawer)

<ul class="sidenav" id="mobile-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>

Floating Action Button (FAB)

<a class="btn-floating btn-large waves-effect waves-light red" href="#">
  <i class="material-icons">add</i>
</a>

Chip

<div class="chip">Tag label<i class="close material-icons">close</i></div>

Badge

<span class="badge new" data-badge-caption="unread">5</span>

Collection (list)

<ul class="collection">
  <li class="collection-item">Item 1</li>
  <li class="collection-item active">Item 2 (active)</li>
  <li class="collection-item">Item 3</li>
</ul>

Material Icons integration

Materialize relies on Material Icons for its component buttons. Include the icon font via Google Fonts and use:

<i class="material-icons">icon_name</i>

Site Designer inserts the Material Icons <link> automatically when Materialize is selected.

Waves effect

The ripple click effect is added by including waves-effect and the desired wave color class:

<a class="waves-effect waves-light btn">Click me</a>
<a class="waves-effect waves-teal btn">Teal waves</a>

Color classes

Materialize ships a full color palette as utility classes:

<!-- Background colors -->
<div class="red"></div>
<div class="teal darken-2"></div>
<div class="blue lighten-3"></div>

<!-- Text colors -->
<p class="red-text">Red text</p>
<p class="teal-text text-darken-2">Dark teal text</p>

Modifiers: lighten-1 through lighten-5, darken-1 through darken-4, accent-1 through accent-4.

Full documentation

For the complete Materialize reference — every component, JavaScript API, color system — visit materializecss.com/.