Sheffugees: category tiles

by Laura Kishimoto

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.teal-green.min.css">
<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--3-col-desktop">
        <div class="mdl-card-square mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">Food, clothing, and housing</h2>
            </div>
            <div class="mdl-card__supporting-text">
                Information on accommodation getting help with the essentials such as food and clothes.
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="LINK">
                    Read more
                </a>
            </div>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--3-col-desktop">
        <div class="mdl-card-square mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">Food, clothing, and housing</h2>
            </div>
            <div class="mdl-card__supporting-text">
                Information on accommodation getting help with the essentials such as food and clothes.
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="LINK">
                    Read more
                </a>
            </div>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--3-col-desktop">
        <div class="mdl-card-square mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand">
                <h2 class="mdl-card__title-text">Food, clothing, and housing</h2>
            </div>
            <div class="mdl-card__supporting-text">
               ...

SCSS

.mdl-grid {
    margin: 0 auto;
    max-width: 1200px;
}

.mdl-card-square {
  width: 100%;
  min-height: 300px;
  > .mdl-card__title {
      color: #fff;
      background: #46B6AC;
  }
}