9BoxEmpEval

by Mike Lynch

HTML

<script src="https://cdn.jsdelivr.net/foundation/3.2.2/javascripts/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css">
<script src="https://cdn.jsdelivr.net/foundation/3.2.2/javascripts/app.jsn/3.2.2/javascripts/app.js"></script>
<body>
    <div class="wrapper">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>1C</h2>
                <p>Rough Diamond</p>
                <hr />
                <p>Poor Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1B</h2>
                <p>Future Star</p>
                <hr />
                <p>Good Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1A</h2>
                <p>Consistent Star</p>
                <hr />
                <p>Outstanding Performance<br/>High Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2C</h2>
                <p>Inconsistent Player</p>
                <hr />
                <p>Poor Performance<br/>Moderate Potential (new role)</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2B</h2>
                <p>Key Player</p>
                <hr />
                <p>Good Performance<br/>Moderate Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>2A</h2>
                <p>Current Star</p>
                <hr />
                <p>Outstanding Performance<br/>Moderate Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns...

CSS

.columns {
    border: 1px solid #000;
}
.green_gradient {
    background: linear-gradient(#00FF99, #009900);
}
.yellow_gradient {
    background: linear-gradient(#FFFF99, #999900);
}
.red_gradient {
    background: linear-gradient(#FF6666, #990000);
}

JavaScript

$(document).foundation();