<nav>
    <div class="nav-wrapper">
        <div class="row">
            <div class="col s12">
                <a href="https://codepen.io/collection/nbBqgY" target="_blank" class="brand-logo">Materialize <span class="hide-on-small-only">Framework</span>
                    <span class="hide-on-small-only" style="font-weight: 100; font-size: 0.4em; opacity:0.5;">
						v1.0.0
					</span>
                </a>
                <ul class="right">
                    <li><a href="https://s.codepen.io/j_holtslander/fullpage/MzNPbP" target="_blank"><i class="material-icons">fullscreen</i></a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>


<div class="container">

    <div id="style1" class="row">
        <h4>Alerts</h4>
        <p>A "Bootstrapesque" style of alerts done in Materialize. Also have a look at <a href="https://codepen.io/j_holtslander/pen/XoPJNv" target="_blank">this style of alert</a> which is a direct copy of Google's styling.</p>
        <h5>Style 1.</h5>
        <p>Typical pallette.</p>
        <div class="alert card blue lighten-4 blue-text text-darken-3">
            <div class="card-content">
                <p><i class="material-icons">info</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

        <div class="alert card amber lighten-4 brown-text">
            <div class="card-content">
                <p><i class="material-icons">report_problem</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

        <div class="alert card red lighten-4 red-text text-darken-4">
            <div class="card-content">
                <p><i class="material-icons">report</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

        <div class="alert card green lighten-4 green-text text-darken-4">
            <div class="card-content">
                <p><i class="material-icons">check_circle</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

    </div>

    <div id="style2" class="row">
        <h5>Style 2.</h5>
        <p>Material color palette</p>
        <div class="alert card blue white-text">
            <div class="card-content">
                <p><i class="material-icons">info</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

        <div class="alert card amber white-text">
            <div class="card-content">
                <p><i class="material-icons">report_problem</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

        <div class="alert card red white-text">
            <div class="card-content">
                <p><i class="material-icons">report</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

        <div class="alert card green white-text">
            <div class="card-content">
                <p><i class="material-icons">check_circle</i><span>This is an alert:</span> It has text within it.</p>
            </div>
        </div>

    </div>

</div>


<!-- Gitter Chat Link -->
<div class="fixed-action-btn"><a class="btn-floating btn-large red" href="https://gitter.im/Dogfalo/materialize" target="_blank"><i class="large material-icons">chat</i></a></div>