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">
        <a href="#" 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>
        </a>
    </div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--3-col-desktop">
        <a href="#" 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>
        </a>
    </div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--3-col-desktop">
        <a href="#" 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>
        </a>
    </div>
    <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-cell--3-col-desktop">
        <a href="#" 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>
         ...

SCSS

$colour-white:     #fff;
$colour-accent:    #46B6AC;

.page-content {
    margin: 0 auto;
    max-width: 1200px;
}

.mdl-card {
  text-decoration: none;
  &:hover {
  }
  &-square {
    width: 100%;
    min-height: 300px;
    > .mdl-card__title {
        color: $colour-white;
        background: $colour-accent;
    }
  }
}